Ridgeline Background

ProNew

Fourteen stacked line profiles that each hide the one behind, swaying like a pulsar plot.

Customize

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

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

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`	`12`	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

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

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`	`12`	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.