Ocean Background for React

The open sea, seen out to the horizon. Rows of waves, fine and close together far away and broad near you, drift sideways and rise and fall with a slow swell, while glitter twinkles on the path of light under the sun. In light mode it's a clear day, with a pale sky and a white haze on the horizon; in dark mode it's a night sea, with faint stars, a silver glow where the moon is about to rise, and moonlight on the water.

Each row of waves is a strip of noise the browser draws once, as an image, and slides sideways by exactly one tile, so the loop never jumps; neighbouring rows of light and shade slide opposite ways, so the surface keeps changing in place. The glitter is three layers of streaks that fade in and out in turn. Only transforms and opacity animate, and no script runs. Use it behind a travel or sailing hero, a meditation app or a marine product page, with the headline in the sky. For the same water from below, use Underwater; for sunlight on a pool floor, Caustics; for a sky mirrored on still water, Reflection; for the sea as a wireframe, Wave Grid.

Installation

Usage

import { Ocean } from "@/components/ui/ocean";

<Ocean className="flex min-h-[480px] flex-col items-center pt-16">
  <h1 className="text-5xl font-semibold">Somewhere warmer</h1>
</Ocean>

Ocean is a container: whatever you put inside sits on top of the scene, in normal flow. It paints its own sky and sea, so give it a height or content, and put copy in the sky above the horizon. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Sunset

seaColor sets the water, and the sky, the haze and the light and shade on the waves follow it; sunColor colours the glow on the horizon, the path of light and the glitter. A violet sea and an amber sun at sunX={0.72} give a sunset, and horizon={0.6} lowers the horizon for more sky.

Calm

A small card with a quiet sea: intensity="subtle" softens the light and shade on the waves, glitter={false} turns the glitter off for an overcast day, speed={0.6} slows the drift and the swell, and horizon={0.6} gives the sky most of the card.

Accessibility

The scene is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion the waves and the glitter stop where they are, so a still picture of the sea remains. Nothing flashes: the glitter is thin streaks that brighten and fade over more than a second, sparkle rather than flashes.

Put copy in the sky, in your foreground colour (text-foreground): the sky is pale in light mode and deep in dark mode, so the foreground colour reads in both. The water is busier, so keep body text off it. A dark seaColor darkens the sky on a light page too, so check your copy against it.

FAQ

API Reference