Reflection Background for React

Still water at dusk: a calm horizon with a low line of distant hills, long wisps of cloud drifting slowly across a softly layered sky, and a lake that mirrors all of it, darker with depth, crossed by slow ripples and the shimmering path of a low sun. It follows your colour scheme, a pastel dawn on a light page and a night lake under a moon glow and a few stars on a dark one. It's CSS with no script: the sky and its mirror are one static gradient, and each cloud is a strip of noise drawn once that slides sideways by exactly one tile, so the loop never jumps. Its reflection is the same strip flipped about the horizon, with the ripples drawn into it once, on the same keyframes, so the two stay in step. Only transforms and opacity animate.

Use it behind a hero, a travel or retreat page, or a calm product page, with the copy in the sky or on the water. For curtains of light in the sky, without the lake, use Aurora; for a rolling sea out to the horizon, Ocean; for the view from below the surface, Underwater; for sunlight on a pool floor, Caustics.

Installation

Usage

import { Reflection } from "@/components/ui/reflection";

<Reflection className="flex min-h-[480px] flex-col items-center pt-20 text-center">
  <h1 className="text-5xl font-semibold">Still water</h1>
</Reflection>

Reflection is a container: whatever you put inside sits on top of the scene, in normal flow. It paints its own sky and 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".

Demos

Low horizon

horizon sets where the horizon sits, as a share of the height from the top, from 0.2 to 0.8. At 0.34 the lake takes most of the box; clarity={0.85} makes it a clearer mirror and intensity="subtle" calms the ripples, a quiet place for copy.

Sunset

colors takes up to four CSS colours: the sky overhead, the sky half-way down, the glow at the horizon and the sun. Here a dusky violet, rose, a deep amber glow and a warm sun; the water, the clouds and the ripples are mixed from them, and the same colours are used 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 the clouds, the ripples and the sun's path stop where they are, and the still sky with its reflection stays. Nothing flashes: the sun's path brightens and dims over about four seconds.

Put copy over it in your foreground colour (text-foreground). With the default colours it keeps above 8:1 everywhere on a light page, where the dawn is pale, and above 6:1 over the start half of a dark page, where the lake is dark; only the moon and the brightest glints of its path dip below 4.5:1. The sun (or moon) sits on the end side of the horizon, on the right or, on a right-to-left page, the left, so keep small text away from it. If you pass your own colors, check your copy against the lightest and darkest of them.

FAQ

API Reference