One continuous gradient cut into vertical slats that turn like venetian blinds, swinging round in a wave that follows the cursor.
Let the light in
Customize
Usage
import { GradientBlinds } from "@/components/motionkit/gradient-blinds";
<GradientBlinds className="h-[32rem] rounded-3xl">
<h1>Your hero</h1>
</GradientBlinds>Motion
The exact curves this component runs, plotted with Motion's own maths.
Slat turn
Pointer moves
Resting wave
No pointer
Fashion, interiors, architecture and creative studio heroes: a background with a tactile, physical feel.
Every slat shows its own slice of one gradient: the background is sized to the full width and positioned per slat, so together they read as a single surface. Inside a CSS perspective, each slat's rotateY eases towards a target: high near the pointer and falling away with a Gaussian curve, or a slow travelling sine wave at rest. Turning slats are darkened slightly, like a real blind turning away from the light.
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | — | The gradient across the blinds, left to right. |
| slats | number | 16 | Number of slats. |
| angle | number | 55 | How far slats turn, in degrees. |
| idle | boolean | true | A slow wave sweeps across while the pointer is away. |
| children | ReactNode | — | Your content, layered above. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/gradient-blinds. It saves the file to components/motionkit and installs its dependencies.
Gradient Blinds is part of MotionKit Plus (£12 / $15 / €14 a month or £96 / $120 / €112 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the slats stay flat and don't follow the pointer.
Let the light in
Customize
Usage
import { GradientBlinds } from "@/components/motionkit/gradient-blinds";
<GradientBlinds className="h-[32rem] rounded-3xl">
<h1>Your hero</h1>
</GradientBlinds>Motion
The exact curves this component runs, plotted with Motion's own maths.
Slat turn
Pointer moves
Resting wave
No pointer
The live preview is free to explore. Plus unlocks the source for Gradient Blinds and every other premium component.