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 @compronents/circular-widget-dialInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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