Wavy Background

Blurred, translucent ribbons of brand colour flowing sideways on a canvas.

Make some waves

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/wavy-background.json

Adds components/velora/wavy-background.tsx.

A landing hero with a badge, headline and two calls to action over the waves.

Now in public beta

Motion-rich components that respect reduced motion, ship tiny and re-theme with seven CSS variables.

Prop	Type	Default
`waves` Number of layered waves	`number`	`5`
`speed` How quickly the waves drift	`"slow" \| "fast"`	`"slow"`
`blur` Blur radius in px applied to the wave layer	`number`	`16`
`colors` Any CSS colours or custom property names (e.g. "--brand-from"); cycled across the waves	`string[]`	`["--brand-from", "--brand-via", "--brand-to"]`
`opacity` Opacity of each wave, 0–1	`number`	`0.5`

Also accepts every <div> attribute, forwarded to the root element.

Reduced motion: The waves do not move: the canvas paints one still frame of the ribbons and repaints it on resize and theme change.
Keyboard: Decorative — nothing to operate.
Screen readers: Decorative; the wrapper is aria-hidden, so only the content layered above is announced.