Dunes Background for React

A wind-swept dune field fills the lower half of the box under a hazy sky. Five ridges of sand, smaller and paler the farther away they are, pan slowly past at different speeds. Each dune has a long sunlit back, a sharp crest and a shaded slip face that turns softly into the next dune, with fine wind ripples on the sand. Faint sand streams off the nearest crests and drifts along the ground. On a light page it's warm daylight; on a dark page it's the same dunes in cool moonlight, under stars.

Each ridge is a repeating SVG shape one period wider than the box, and it slides by exactly one period, so the loop never jumps. The shapes ship in the CSS the install adds to your stylesheet, and only transforms and opacity animate, so the browser composites the motion without repainting. There's no script: it's a server component. Use it behind travel, hospitality, outdoor and editorial heroes, with the copy in the sky. For water instead of sand, use Ocean or Reflection; for the land as a map, Terrain; for the texture alone, as film grain, Grain.

Installation

Usage

import { Dunes } from "@/components/ui/dunes";

<Dunes className="min-h-[480px] px-12 pt-16">
  <h1 className="text-5xl font-semibold">Somewhere warm</h1>
</Dunes>

Dunes is a container: whatever you put inside sits on top of the desert, in normal flow. It paints its own sky, so give it a height or content, and keep copy in the upper part of the box, where the sky is. The ridges are sized from the box itself, so a banner, a card and a phone screen all get dunes of a sensible size. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Night

colors takes the sky, the haze at the horizon, the sunlit sand and the shaded sand, and a fifth colour for the stars, which then show on a light page too. Here a moonlit palette keeps the desert at night in both colour schemes, and speed={0.5} slows the pan.

In a card

count={3} keeps three ridges, so the dunes read bigger in a small box, and density={2} carries twice as much sand off the crests and along the ground.

Accessibility

The desert is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion the ridges, the drifting sand and the stars stop where they are, and the still dune field stays. Nothing flashes.

Put copy over it in your foreground colour (text-foreground). With the default palette it keeps at least 13:1 over the sky and 7.7:1 over the sand on a light page, and at least 5:1 over the sky and 4.7:1 over the sand on a dark page, at the worst frame. Custom colors change that, so check your copy against them, and keep long text in the sky.

FAQ

API Reference