Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
import { CircularWidgets } from "@/registry/tween/circular-widgets"
export function CircularWidgetsDemo() {
return (
<div className="mx-auto w-full max-w-3xl">
<CircularWidgets height="var(--preview-h, 640px)" />
</div>
)
}
import { CircularWidgets } from "@/components/ui/circular-widgets"<CircularWidgets
widgets={[
{ image: "/widgets/velvet.jpg", name: "Velvet" },
{ image: "/widgets/glass-relay.jpg", name: "Glass Relay" },
// ...
]}
/>Each entry becomes one segment of the ring; the section count is derived from the array length, so adding or removing widgets re-divides the dial automatically.
| Prop | Type | Default | Description |
|---|---|---|---|
widgets | CircularWidget[] | 10 defaults | One segment per item. { image, name }. Section count is derived. |
height | number | string | 640 | Box height. A number is interpreted as pixels. |
accentColor | string | "#ffff2b" | Color used for the rotating indicator line and the center pill. |
backgroundColor | string | "#000" | Box background. |
outerRadiusRatio | number | 0.4 | Outer ring radius as a fraction of min(width, height). |
innerRadiusRatio | number | 0.25 | Inner ring radius as a fraction of min(width, height). |
rotationSpeed | number | 18 | Indicator base rotation speed in degrees/second. |
spinnerSpeedFactor | number | 0.25 | Spinner speed multiplier relative to the indicator (opposite sign). |
wheelSensitivity | number | 0.05 | How strongly wheel deltas push the indicator and spinner. |
className | string | — | Extra classes appended to the outer container. |
Wheel input feeds the indicator and the spinner ring at opposite signs, so scrolling rotates the dial in one direction while the inner spinner counter-rotates. When input stops, both rings ease back to their idle rotation speeds rather than snapping to a halt.
accentColor and backgroundColor are pure props — no CSS overrides required. The default #ffff2b on #000 gives a high-contrast neon look; pass your own values to match a brand palette.