Prism Background for React

White light catches the edge of the frame and breaks into a spectrum that fans across the whole section, like sunlight through a crystal onto a wall. A wide, faint fan of soft colour bands sweeps slowly under a brighter, narrower band laced with thin caustic streaks, which swings further at its own pace, so the colours keep drifting through each other; a soft glow marks where the light enters and faint chromatic leaks warm the far corners. The fans are conic gradients turned about the entry point, so the browser composites them without repainting, and there's no script.

Use it where the story is one thing becoming many: a converter, an analytics product, an API that splits data. For curtains of one colour family, use Aurora; for parallel streaks of light, Beams; for an iridescent foil over a surface, Hologram; for coloured light from a turning ball, Disco.

Installation

Usage

import { Prism } from "@/components/ui/prism";

<Prism className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold">One input, every color</h1>
</Prism>

Prism is a container: whatever you put inside sits on top of the light, in normal flow. The light enters at the left edge, near the top, and the spectrum fans out to the right and down, fading with distance, so it fills a card, a banner or a whole page. On a right-to-left page it enters from the right. The surface is the root's own background, so className="bg-…" sets it. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Sweep

angleRange={34} nearly doubles how far the bright band swings and speed={0.5} halves its pace, on a scene that stays dark, where the bands add up like light.

In a card

colors takes up to seven CSS colours, from the top band to the bottom one, repeated when there are fewer; here cyan, blue and violet at intensity="subtle".

Accessibility

The light is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion both fans hold the middle of their swing, which is the full picture. Nothing flashes.

Put copy over it in your foreground colour (text-foreground). The bands are brightest near where the light enters and fade across the box; at the default intensity text in the content area keeps above 4.5:1 in both colour schemes, so keep small text away from the entry corner on a dark surface with intensity="strong".

FAQ

API Reference