Deep Sea Background for React

Glowing jellyfish drift through deep water while marine snow sinks around them. Each jellyfish is a few layered gradients, a white core in a coloured bell with a wide soft halo, trailing fine tendrils that sway as it swims: the bell contracts as it rises and relaxes as it sinks. Every third is far away, smaller, fainter and softer, half lost in the haze, so the water has depth; the marine snow sinks in two layers, fine specks far off and bigger flakes nearer. The water is a scene in both themes: a mid-ocean blue on a light page, light enough for dark text, and near-black navy at night, each lighter toward the surface with a haze of light from above. CSS keyframes the install adds to your stylesheet move everything with transforms and opacity, and positions come from each jellyfish's index, so the server and the browser draw the same scene. There's no canvas and no script.

Use it behind a hero or a launch page that should feel calm rather than loud. For the sunlit shallows, use Underwater; for a net of light on water, Caustics; for glowing drifters in night air, Fireflies; for soft out-of-focus lights, Bokeh.

Installation

Usage

import { DeepSea } from "@/components/ui/deep-sea";

<DeepSea className="flex min-h-[480px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Into the deep</h1>
</DeepSea>

Deep Sea is a container: whatever you put inside sits on top of the water, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Sparse

count={2} leaves two jellyfish in a lot of open water, and plankton={300} thickens the marine snow around them. Each jellyfish takes one of the box's columns, so a few never bunch up.

Colors

colors takes any CSS colours, and each jellyfish takes the next one; here amber, magenta and coral. waterColor sets the water, which lightens toward the top and deepens toward the bottom, and the dark class keeps the section dark in both colour schemes.

Accessibility

The scene is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion everything stops on the opening frame, so the same jellyfish stay where they started and the marine snow holds still. Nothing flashes.

Put copy over it in your foreground colour (text-foreground). On a light page the water stays light enough for dark text, above 4.5:1 down to its deepest edge; at night light text reads on the navy. A jellyfish's bright core can drift behind a headline: keep count low behind body text, or set the text in a band of its own.

FAQ

API Reference