Circular Widget Dial
A ring of image segments that never stops turning. The ring rotates one way, a thin indicator line sweeps the other, and whichever segment sits under the line becomes the desaturated full-bleed backdrop with its name on a chip in the middle. Wheeling over it spins both faster or throws them into reverse, and every value eases on a lerp so the dial coasts instead of snapping. SVG arcs built and clipped at runtime.
npx shadcn@latest add https://ui.aryank.space/r/circular-widget-dial.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| widgets | CircularWidget[] | 10 Blob-hosted segments | Image and name per ring segment. The ring divides evenly by however many are supplied. |
| accent / background | string | #ffff2b / #000 | Indicator and chip color, and the base color. |
| spinSpeed | number | 18 | Idle rotation speed in degrees per second. The ring counter-rotates at a quarter of it. |
widgetstextSegment images and their names.
accent / backgroundcolorIndicator and name-chip color, and the base color.
spinSpeedtextDegrees per second the indicator advances at rest.
gsap