Hologram Background for React

Hologram covers its container in iridescent foil: soft thin-film colours (aqua, lilac, pink, gold) slide across a bare silver sheet as if it were tilting under a lamp, over a fine grain, and now and then a soft band of light sweeps across it. On a dark page the sheet turns to graphite and the colours to deep jewel tones. Two films of colour, crossed at 70°, slide opposite ways, each a repeating gradient moved by exactly one band so the loop never jumps; the grain is a still texture on top. There's no canvas, and nothing repaints while it moves.

Use it for collectible cards, limited drops, membership tiers and launch pages. It's calm enough for text on top. For a softer, flowing satin, use Silk; for liquid metal without the colour, Mercury; for the spectrum fanned out by a prism, Prism; for colour cycling everywhere at once, Plasma.

Installation

Usage

import { Hologram } from "@/components/ui/hologram";

<Hologram className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Limited edition drop</h1>
</Hologram>

Hologram is a container: give it a size, put your content inside, and the foil sits behind it, covering the box edge to edge. The colours are pastel on a light page and deeper on a dark one, so text in your foreground colour reads on both. For the whole page, pass className="fixed inset-0 -z-10".

Demos

Card

A collectible card in a 5:7 box. interactive tilts the foil toward the pointer, so the colours and the sheen slide as you move across it; the dark class gives it the graphite sheet, intensity="strong" full colour, and angle={40} leans the bands further.

Pearl

colors takes any CSS colours, spread in order across each band and back to the first. Pastels with near-white between them make a pearl foil; grain={0.3} softens the texture.

Accessibility

The foil is decoration: it's hidden from assistive tech and never takes the pointer, so your content is read and clicked as usual; with interactive it only follows the pointer, it never needs it. With reduced motion the films and the sheen stand still where they are and the pointer tilt is off, leaving a still picture of the foil. Nothing flashes: the colours slide slowly and the sheen crosses about once every 13 seconds.

Put copy over it in your foreground colour (text-foreground). At the default intensity it keeps about 9:1 on a light page and 4.5:1 on a dark one over the content area at the worst frame. intensity="strong" on a dark surface brings the brightest bands down to about 2.9:1, enough only for large headings, so keep small text on a panel there.

FAQ

API Reference