Light Waves Background for React

Soft bands of coloured light drift sideways across the lower half of a section, layered at low opacity over a few faint glows, so text stays easy to read anywhere on top. Each band is a CSS gradient cut to a wave shape by an SVG mask and slid by keyframes, exactly one wave length per loop so it never jumps, while it bobs gently up and down; neighbouring bands flow opposite ways. There's no canvas and no script.

Reach for it when a plain colour feels flat but the content has to come first. For brighter curtains of light, use Aurora; for soft blobs with no wave shape, Mesh Gradient; for blurred ribbons of colour that cross in depth, Wavy; for a satin sheen over broad fields of colour, Silk.

Installation

Usage

import { LightWaves } from "@/components/ui/light-waves";

<LightWaves className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-4xl font-semibold">Calm tools for focused teams</h1>
</LightWaves>

Light Waves is a container: what you put inside renders on top, and the bands sit behind it. The background is the root's own, so className="bg-…" sets it; the edges fade toward your theme's background colour. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Warm

colors takes up to five CSS colours, repeated when there are fewer; here amber, rose and peach. The first three also tint the glows.

Subtle

intensity="subtle" pales the bands, here in a card, so they can sit behind a long paragraph without getting in the way.

Accessibility

The bands are decorative: they're hidden from screen readers and never take the pointer, and your content stays on top in normal flow. With reduced motion the bands and the glows hold still. Nothing flashes. The bands are translucent (a quarter of their colour at most, at the default strength), so body text in your foreground colour stays readable anywhere on top, in both themes.

FAQ

API Reference