# Gradient Blinds

> One continuous gradient cut into vertical slats that turn like venetian blinds, swinging round in a wave that follows the cursor.

Category: Backgrounds · MotionKit Plus · Updated 2026-10-30 · Live demo: https://www.motionkitui.com/components/gradient-blinds

## When to use it

Fashion, interiors, architecture and creative studio heroes: a background with a tactile, physical feel.

## How it works

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.

## Installation

Part of MotionKit Plus (https://www.motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/gradient-blinds` after adding their registry token from https://www.motionkitui.com/account.

## Props

| 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. |

## Accessibility

- **Keyboard: Not applicable.** Decorative, nothing to focus.
- **Screen readers: Pass.** The slats are hidden from assistive tech; only your content is read.
- **Reduced motion: Pass.** With reduced motion on, the slats stay flat and don't follow the pointer.
- **Colour contrast: Pass.** A soft dark centre keeps ivory text at 8:1 or better over the default gradient. Check again if you use brighter colours.