A faceted low-poly sphere drawn on canvas. It turns slowly, tilts toward the pointer and moves its highlights with it.
Prism series
Aurora Quartz
Cut in 80 facets. Turns to follow your cursor.
npx shadcn@latest add https://hyperblur.dev/r/ball-crystal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/ball-crystal.tsx.
import { BallCrystal } from "@/components/hyperblur/ball-crystal"
<BallCrystal size={200} accent="#7fb3ff" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 220 | Width and height in pixels. The ball never grows past its parent. |
| accent | string | "#7fb3ff" | Hex color of the facets and the glow behind the ball. |
| speed | number | 1 | Multiplier for the idle rotation speed. |
| tilt | number | 1 | How far the ball leans toward the pointer. 0 turns the tilt off. |
| detail | 0 | 1 | 2 | 1 | Subdivision level: 0 has 20 facets, 1 has 80, 2 has 320. |