Browse components
Galaxy
A slowly spinning spiral galaxy of twinkling stars and glowing dust, with depth parallax under the cursor.
Galaxy
Installation
npx shadcn@latest add @glint-ui/galaxyFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/galaxy.json
Usage
import { Galaxy } from "@/components/ui/galaxy";
<div className="relative h-96 bg-black">
<Galaxy hue={225} arms={2} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| hue | number | 225 | Hue of the arms in degrees; the core takes the warm opposite. |
| density | number | 1 | Star density multiplier. |
| arms | number | 2 | Number of spiral arms. |
| speed | number | 1 | Rotation and twinkle speed. |
| twinkle | number | 0.6 | Twinkle amount. |
| scale | number | 1 | Zoom. |
| parallax | number | 1 | Cursor parallax strength. |
| className | string | — | Extra classes for the root element. |