Underwater Background for React

A view through sunlit water: shafts of light sway down from the surface, soft patches of light drift above, and tiny motes rise slowly through the blue with a gentle side-to-side sway. It's CSS gradients and keyframes with no blur filter and no script; the motes are placed by a fixed seed, so every render matches, and each moves with a single animation the browser composites without repainting.

Use it behind a meditation or spa page, a marine conservation hero or an ocean-themed landing page. For the bright net of light on a pool floor, use Caustics; for darker water with glowing creatures, Deep Sea; for larger rising circles, Bubbles; for the open sea out to the horizon, Ocean.

Installation

Usage

import { Underwater } from "@/components/ui/underwater";

<Underwater className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Slow down, breathe out</h1>
</Underwater>

Underwater is a container: whatever you put inside sits on top of the water, in normal flow. It paints its own water, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10". The water follows the colour scheme: sunlit shallows on a light page, deep water on a dark one, both made from the same waterColor.

Demos

Calm

A quieter card: count={20} halves the motes, speed={0.5} slows everything down and intensity="subtle" dims the light, so the water reads deeper.

Kelp

waterColor and lightColor take any CSS colours: here a green sea under pale yellow light. The water is still lifted toward the light on a light page and deepened on a dark one.

Accessibility

The water is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion everything stops where it is: the shafts hold their angle and the motes stay scattered through the water, so a still picture remains. Nothing flashes: the shafts brighten and dim over 8 to 13 seconds.

Put copy in your foreground colour (text-foreground). It keeps at least 4.4:1 at the brightest moment behind a headline and 5.4:1 behind body text, in both colour schemes. On a dark page the light is strongest near the top, so keep small text out of the top fifth, or use intensity="subtle".

FAQ

API Reference