Facets Background for React

A surface cut into irregular triangles, like a low-poly relief carved in one tone. Each facet is lighter or darker by the way it faces the light, so neighbours differ by their slope, not by a random colour, at low contrast. A soft light drifts across and the facets it passes lift and shimmer; a few breathe a little brighter, and now and then one catches the light. The triangles come from a jittered grid lifted to seeded heights, computed from their index while rendering, so the server and the browser draw the same pattern; they're cropped to the box, never stretched. CSS keyframes fade the facets and move the light, and no script runs.

Use it behind a hero or a product page that wants a crystalline, low-poly surface. For a folded paper sheet under a moving light, use Origami; for organic glass cells, Voronoi; for a regular grid whose cells breathe, Honeycomb; for a mirrored mandala of glass, Kaleidoscope; for light split by glass, Prism.

Installation

Usage

import { Facets } from "@/components/ui/facets";

<Facets className="flex min-h-[480px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Cut from glass</h1>
</Facets>

Facets is a container: whatever you put inside sits on top of the facets, in normal flow. It fills its own box, so give it a height or content. The facets are translucent over the container's own background, so className="bg-…" changes the surface under them. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Jewel glass

colors takes two to six CSS colours, and each facet takes one by its index, still shaded by the light: here violet, indigo, sky, teal and rose on a dark panel, with count={90} for finer facets and shimmer={1} for more glints.

One hue

color sets the one tone, here your theme's var(--primary); count={110} cuts a finer crystal, intensity="strong" deepens the relief and shimmer={0} turns the glints off.

Accessibility

The facets are decoration: they're hidden from assistive tech and let every click through to your content. With reduced motion the facets and the light stop and the glints are hidden, so a still relief stays.

At the default shimmer a facet catches the light about every two seconds somewhere on the surface, each for a quarter of a second; shimmer goes up to 2, and the glints never pass 2.5 a second, whatever the speed. Put copy over it in your foreground colour (text-foreground): the default relief stays within a narrow, low-contrast range, so it keeps text readable in light and dark. With jewel colors, use intensity="subtle" or a card under body text.

FAQ

API Reference