Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
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: "https://example.com/ultraviolet.jpg", name: "Ultraviolet" },
{ image: "https://example.com/ember.jpg", name: "Ember" },
// ...
]}
/>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 | "#ffb23f" | Color used for the rotating indicator line and the center pill. |
backgroundColor | string | "#0a0a0a" | 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 sodium-amber #ffb23f on #0a0a0a reads like a darkroom safelight; pass your own values to match a brand palette.