Loading craft...
Loading craft...
A scroll and drag-driven SVG compass dial. Spin it, scroll it, watch the ticks pulse and links glow as they rotate through the active zone.
Stumbled on Jayesh's site: his navigation had this compass-style dial that I couldn't stop spinning. Decided to recreate it with my own taste: proportional geometry, a proximity glow that ripples through the tick marks, spring physics that feel like turning a real instrument, and a fully prop-driven API so it can live anywhere.
Not a 1:1 recreation: the physics, active-zone system, and link rendering are all my own implementation. Just the feeling of it.
| Props | Description | Default |
|---|---|---|
links | Array of `{ angle, label, href }`. `angle` is degrees clockwise from top (0 = 12 o-clock). Duplicating links at opposite angles creates a symmetric dial. | required |
activeZoneAngle | The compass bearing (degrees, 0=top) that acts as the active pointer. Links that rotate through this angle glow and ticks pulse outward. | required |
activeZoneThreshold | Half-width of the active zone cone in degrees. Smaller = tighter glow, larger = wider pulse area. | 15 |
roseRotation | Rotation of the static compass rose needle decoration. Set to 45 on desktop, 0 on mobile. | 45 |
tickCount | Number of tick marks around the dial. Higher values look denser but cost more renders. | 180 |
size | SVG viewBox size in px (square). The component fills its container — this only affects internal geometry proportions. | 756 |
colors | Object with `active`, `idle`, and `idleHover` Tailwind class strings for link text styling. | orange-300 active, foreground/50 idle |
showDetails | Renders a draggable debug HUD showing live rotation angle and which link is currently active. | false |