Concentric glowing rings carrying orbiting glyph marks, each ring spinning at its own speed. The pointer tilts the whole system in 3D.
Arcane Gate
Unlocks for all players on November 14
npx shadcn@latest add https://hyperblur.dev/r/bg-rune-rings.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-rune-rings.tsx.
import { BgRuneRings } from "@/components/hyperblur/bg-rune-rings"
<div className="relative h-96"><BgRuneRings rings={6}><h1>Arcane</h1></BgRuneRings></div>| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#2f7bff" | Color of the core glow and the ring halo. |
| color | string | "#a9c8ff" | Color of the ring lines, glyphs and orbiting sparks. |
| background | string | "#05060a" | Fill color behind the rings. |
| rings | number | 5 | Number of rings, from 2 to 9. |
| tilt | number | 1 | Amount of 3D tilt. 0 shows the rings flat and facing you. |
| speed | number | 1 | Rotation speed of the rings. |
| children | ReactNode | Content rendered on top of the rings. |