A decorative backdrop of dotted orbits seen in perspective over a faint grid, with small nodes travelling along the rings. Pure CSS.
npx shadcn@latest add https://hyperblur.dev/r/hud-orbit-backdrop.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hud-orbit-backdrop.tsx.
import { HudOrbitBackdrop } from "@/components/hyperblur/hud-orbit-backdrop"
<HudOrbitBackdrop minHeight={360}><h2>Vector Lab</h2></HudOrbitBackdrop>| Prop | Type | Default | Description |
|---|---|---|---|
| rings | number | 5 | Number of concentric orbits, up to 12. |
| nodes | number | 6 | Number of travelling nodes. Every third one glows in the accent. |
| tilt | number | 68 | Tilt of the orbit plane in degrees. 0 is flat circles, 80 is nearly edge-on. |
| speed | number | 1 | Animation speed multiplier. |
| grid | boolean | true | Show the faint drifting grid behind the orbits. |
| accent | string | "#ff4d4d" | Hot ring, core glow and node color. |
| minHeight | number | 280 | Minimum height in pixels. |
| children | ReactNode | Content centered on top of the backdrop. |