A tilted spiral galaxy of thousands of twinkling stars with a warm core and dark dust lanes, turning slowly. The pointer shifts the depth layers and parts the stars around it.
npx shadcn@latest add https://hyperblur.dev/r/bg-galaxy.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-galaxy.tsx.
import { BgGalaxy } from "@/components/hyperblur/bg-galaxy"
<div className="relative h-96 bg-black"><BgGalaxy /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| stars | number | 4200 | Number of stars, from 200 to 12000. |
| arms | number | 2 | Number of spiral arms. |
| twist | number | 3.4 | How tightly the arms wind, in radians from the core to the rim. |
| accent | string | "#7fb3ff" | Color of the outer arm stars and the faint halo. |
| coreColor | string | "#ffd7a3" | Color of the bright core and the bulge stars. |
| tilt | number | 0.56 | Vertical squash of the disk, from 0.15 (edge-on) to 1 (face-on). |
| parallax | number | 16 | How far the depth layers shift with the pointer, in pixels. |
| spread | number | 24 | How far stars move aside around the pointer, in pixels. |
| speed | number | 1 | Rotation and twinkle speed multiplier. |
| seed | number | 7 | Integer seed for the star layout. |
| children | ReactNode | Content rendered on top of the galaxy. |