Wavy Background for React

Softly blurred ribbons of colour drift across the box at different depths, crossing and parting as they go: sky, indigo, purple, fuchsia and cyan by default. The near ribbons are bold and fairly crisp, the far ones thin, faint and softer, and they spread over most of the box's height above a faint wash of the same colours, so the box never splits into a band and empty space. Each ribbon is a wave drawn once as SVG and blurred once; its wrapper slides sideways by exactly one wave at its own speed, every other ribbon the other way, and bobs gently up and down. Only transforms move, so the browser never repaints, and no script runs.

Use it behind a music player, a wellness app or a creative portfolio, where the motion should stay ambient. For wide silk ribbons that twist and catch the light, use Ribbons; for quieter filled waves, Light Waves; for soft sheets of light at the same calm pace, Aurora; for thin curves instead of soft bands, Paths.

Installation

Usage

import { Wavy } from "@/components/ui/wavy";

<Wavy className="flex min-h-[520px] flex-col items-center justify-center">
  <h1 className="text-5xl font-semibold">Music for long focus</h1>
</Wavy>

Wavy is a container: whatever you put inside sits on top of the ribbons, in normal flow. The ribbons spread over the middle 70% of the box's height by default (spread), in a portrait card as in a wide banner, so give the box a height. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10". There's no painted panel: your page's background shows through, so the ribbons read as pastels on a light page and glow on a dark one.

Demos

Theme colours

colors takes up to five CSS colours, used in turn; here the theme's var(--chart-1) to var(--chart-5), so the ribbons follow a theme switch. count={7} with spread={0.9} fills the box from top to bottom.

Lines

thickness={6} and blur={2} turn the ribbons into fine lines, count={3} keeps three, and speed={0.6} slows them down, here in a small card.

Accessibility

The ribbons are decoration: they're hidden from assistive tech and let every click through to your content. With reduced motion they stand still, each at its own offset, so they still cross. Nothing flashes.

Put copy in your foreground colour (text-foreground). At the default intensity it keeps about 5.7:1 on a light page at the worst frame. On a dark page it keeps 4.5:1 over most of the box, dipping to about 3.5:1 for a moment where the brightest ribbons cross behind it, enough for a large headline; the ribbons are dimmer on a dark surface for this reason. intensity="subtle" behind body text keeps it clear, and intensity="strong" brightens them, so keep body text off the crossings there.

FAQ

API Reference