Backgrounds

Gradient slat spotlight

Vertical slats hide a colour gradient until a soft spotlight tracks the pointer across them and lights each slat it touches.

Studio backdrop

Move the pointer to catch the light between the slats

Using Gradient slat spotlight

Vertical slats hide a colour gradient until a soft spotlight tracks the pointer across them and lights each slat it touches.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: accent, blindCount, spotlightRadius, softness, angle, grain

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

1666Aurora curtainBackgroundsA soft curtain of light hanging from the top edge, its lower hem rising and falling on a slow noise wave while its color shifts across the width.

1526Aurora veilBackgroundsA full-bleed background of three drifting ribbons of light that add up where they cross, over a dark ground, with a caption layer that stays readable.

1947Cursor fluid trailBackgroundsA dark field where dragging the pointer smears colored fluid across it, and the smear keeps curling and thinning out after the pointer stops.

1992Light cone beamBackgroundsA grainy wedge of light flares up from a hot line at the foot of the frame, turning slowly so its edges catch different colors.

1720Magnetic particle ringBackgroundsA drifting field of tiny specks that the pointer catches and reorganises into a rippling ring, releasing them again as it moves on.

1536Particle driftBackgroundsA canvas field of slow drifting particles that wrap at the edges, and link with faint lines and ease away where the pointer passes.