Crystals Background for React

Q: Can I make it grow faster or slower?

speed multiplies the pace. At 1 a patch grows, holds and recedes over 36 seconds and a corner breathes every 24; 0.5 halves it, 2 doubles it.

Q: How do I recolour it?

frostColor colours the ice and glassColor the cold tint it grows on; both take any CSS colour. By default they're white on pale blue-grey in light mode and ice blue on navy in dark mode. You can also set --crystals-frost and --crystals-glass from CSS.

Q: Can I get a different pattern?

seed grows other dendrites and arranges them differently; the same seed always draws the same frost, on the server and in the browser.

Frost on a window pane: dendritic ice grows in from the corners and edges, holds, recedes and grows again, with tiny glints. For React with Base UI, when a winter launch, a cold-storage product or a science page wants a quiet, living frame.

Frost on a window pane. Fern-like ice crystals grow in from the corners and along the edges, hold, slowly recede and grow again elsewhere, and tiny glints catch the light on them, while the centre of the box stays clear. In light mode it's white frost with a soft blue-grey relief on pale cold glass; in dark mode, luminous ice blue on navy. The dendrites are SVG worked out when the page renders, and each patch grows from its corner or edge with CSS transforms and opacity, so nothing runs in script.

Use it for winter launches, cold storage, or anything crisp and calm. For flakes that fall, use Snow; for an endless fern zoom, Fractal; for points that twinkle, Sparkles; for a faceted low-poly surface, Facets; for points joined by lines, Constellation.

PreviewCode

Installation

Part of Pro

Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.

Get Pro Sign in

Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { Crystals } from "@/components/ui/crystals";

Crystals is a container: give it a size and put your content inside. The frost frames the box from its edges and the centre stays clear, so centred copy reads well.

<Crystals className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Frost, forming</h1>
</Crystals>

For a backdrop behind the whole page, leave it empty and fix it under everything else:

<Crystals className="fixed inset-0 -z-10" />

Demos

Arcane

frostColor and glassColor take any CSS colours, here violet frost on a deep violet tint over a dark panel. seed={4} grows another pattern, and speed={0.6} slows the frost down.

PreviewCode

In a card

intensity="subtle" pales the frost for a card. The patches are sized to the box, so the frame stays in proportion at any size.

PreviewCode

Accessibility

The frost is decoration: it's hidden from screen readers and lets every click through to the content. With reduced motion the frost stands still and the glints are hidden. Nothing flashes: a glint is a small star that fades in and out in under a second, and no two glints flash together. The centre stays clear, so text on top keeps its contrast in your foreground colour, in light and dark.

FAQ

How does the frost move?

The four corners breathe slowly, never gone; the eight patches along the edges take turns to grow from their anchor, hold, then fade and shrink a little, and grow again. Each patch scales from its corner or edge, and a soft mask keeps its tips feathered, so the frost looks like it creeps in.

Can I make it grow faster or slower?

speed multiplies the pace. At 1 a patch grows, holds and recedes over 36 seconds and a corner breathes every 24; 0.5 halves it, 2 doubles it.

How do I recolour it?

frostColor colours the ice and glassColor the cold tint it grows on; both take any CSS colour. By default they're white on pale blue-grey in light mode and ice blue on navy in dark mode. You can also set --crystals-frost and --crystals-glass from CSS.

Can I get a different pattern?

seed grows other dendrites and arranges them differently; the same seed always draws the same frost, on the server and in the browser.

Does it respect reduced motion?

Yes: every patch stops where it is and the glints are hidden, so it becomes a still frosted frame.

Is it expensive?

No script runs. The three dendrite shapes are drawn once and reused by SVG, and the browser grows each patch with a scale and an opacity animation it runs off the main thread, without repainting.