Light Leaks Background

ProNew

Diagonal streaks of soft colour that slide across the frame like film light leaks.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/light-leaks-background

Prop	Type	Default	Description
`colors`	`[string, string, string]`	`["var(--chart-1)", "var(--chart-2)", "var(--chart-3)"]`	Three CSS colors the scene is drawn with. Any CSS colors or var().
`duration`	`number`	`14`	Seconds for one cycle. Higher is calmer.
`children`	`React.ReactNode`	—	Content shown on top of the scene.

Also accepts all <div> props.

Plain CSS and React: no animation library, no WebGL, no extra dependencies.
Colours default to your theme's --chart-1, --chart-2 and --chart-3, so it follows light, dark and any theme. Pass colors to override.
Decorative: the scene is aria-hidden. Animations stop under prefers-reduced-motion.
Each instance injects one small scoped <style> tag, so it works in server and client components alike.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/light-leaks-background

Prop	Type	Default	Description
`colors`	`[string, string, string]`	`["var(--chart-1)", "var(--chart-2)", "var(--chart-3)"]`	Three CSS colors the scene is drawn with. Any CSS colors or var().
`duration`	`number`	`14`	Seconds for one cycle. Higher is calmer.
`children`	`React.ReactNode`	—	Content shown on top of the scene.

Also accepts all <div> props.

Plain CSS and React: no animation library, no WebGL, no extra dependencies.
Colours default to your theme's --chart-1, --chart-2 and --chart-3, so it follows light, dark and any theme. Pass colors to override.
Decorative: the scene is aria-hidden. Animations stop under prefers-reduced-motion.
Each instance injects one small scoped <style> tag, so it works in server and client components alike.