Spectrum Burst Backdrop

ProNew

A burst of coloured rays that opens from the centre, breathes in and out, and fades to the edges of the page.

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-spectrum-burst

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

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.

Rays are filled wedges coloured along the palette; one radial fade at the end is what makes them dissolve toward the edges.
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-spectrum-burst

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

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.

Rays are filled wedges coloured along the palette; one radial fade at the end is what makes them dissolve toward the edges.
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.