Blinds Gradient Backdrop

ProNew

A row of tall window-blind slats, each lit by its own gradient, that open and brighten one after another in a rolling wave.

The full demo as documented.

Customize

Controls declared by this item. Changes drive the preview live.

speed1


pnpm dlx shadcn@latest add @tealmac-pro/backdrop-blinds-gradient

Prop	Type	Default	Description
`colors`	`string[]`	`chart-3, chart-1, chart-4`	CSS colors drawn from in order. Any CSS color or `var()`.
`speed`	`number`	`1`	Playback speed multiplier.
`slats`	`number`	`16`	How many slats to draw.

Also accepts all <div> props except children.

Decorative: the wrapper is aria-hidden and pointer-events-none, so it never takes focus or blocks clicks.
Under prefers-reduced-motion: reduce it draws one still frame and does not animate.

One element per slat. Each slat animates its opacity and width with a staggered delay, which is what makes the light roll across.
Fills its nearest positioned parent (absolute inset-0). Put page content above it with relative isolate on the parent and -z-10 on the backdrop.
Draws with the 2D canvas only (no WebGL, no extra packages), caps the pixel ratio, and stops its loop while off-screen or in a hidden tab.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/backdrop-blinds-gradient

Prop	Type	Default	Description
`colors`	`string[]`	`chart-3, chart-1, chart-4`	CSS colors drawn from in order. Any CSS color or `var()`.
`speed`	`number`	`1`	Playback speed multiplier.
`slats`	`number`	`16`	How many slats to draw.

Also accepts all <div> props except children.

Decorative: the wrapper is aria-hidden and pointer-events-none, so it never takes focus or blocks clicks.
Under prefers-reduced-motion: reduce it draws one still frame and does not animate.

One element per slat. Each slat animates its opacity and width with a staggered delay, which is what makes the light roll across.
Fills its nearest positioned parent (absolute inset-0). Put page content above it with relative isolate on the parent and -z-10 on the backdrop.
Draws with the 2D canvas only (no WebGL, no extra packages), caps the pixel ratio, and stops its loop while off-screen or in a hidden tab.