Gradient Blinds
A flowing gradient seen through folded blinds, with a spotlight that follows the pointer.
import { GradientBlinds } from "pleate/effects/gradient-blinds";Behind a headline
Light through the slats
Props
- blinds
Number of blinds across the height of the canvas.
numberdefault 14- angle
Tilt of the blinds in degrees.
numberdefault 0- spotlight
Strength of the pointer spotlight, 0 to turn it off.
numberdefault 0.5- colors
CSS colors or tokens: light, mid and deep stops of the gradient. Defaults follow the palette.
string[]- speed
Playback speed.
numberdefault 1- scale
Pattern size; above 1 is bigger.
numberdefault 1- interactive
React to the pointer over the parent.
booleandefault true
Accessibility
- Decorative: the canvas is aria-hidden and ignores pointer events, so content on top stays usable.
- Pauses off screen and in hidden tabs; with reduced motion it shows a still frame.
- Fills its parent: give the parent position relative and the background absolute inset-0.