Zigzag Chevron Background

ProNew

A tiled zigzag of chevrons that scrolls sideways with a fade at the edges.

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/zigzag-chevron-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/zigzag-chevron-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.