A low-poly crystal surface whose facets breathe in depth while a light orbits above them. Facets that face the light glint, and a diagonal shimmer passes over the whole surface.
Your keys, cut in glass
Facet Vault · hardware wallet with a sapphire displaySee the vault
npx shadcn@latest add https://hyperblur.dev/r/bg-crystal-facets.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-crystal-facets.tsx.
import { BgCrystalFacets } from "@/components/hyperblur/bg-crystal-facets"
<div className="relative h-96"><BgCrystalFacets><h1>Cut in glass</h1></BgCrystalFacets></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#28334d" | Base color of the facets. Hex color. |
| accent | string | "#9fd0ff" | Glint and edge highlight color. Hex color. |
| background | string | "#05060a" | Darkest tone of the surface. Hex color. |
| facet | number | 84 | Approximate facet size in pixels, minimum 36. |
| relief | number | 1 | Depth of the surface. Higher gives stronger contrast between facets. |
| speed | number | 1 | Speed of the light and the breathing. |
| className | string | "" | Extra classes for the root. The root is absolutely positioned and fills its parent. |
| children | ReactNode | Content rendered on top of the background. |