KQ-031 · ZOETROPE
Zoetrope
Spin the drum; every frame finds its detent — panels ride the inside of a cylinder with drag inertia, wheel steps, and angular-distance dimming.
KQ-031 · ZOETROPE
Drag · scroll · arrow keys
FRONT · KQ-031
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/zoetrope
Props
- children
- ReactNode
- default —
- Each direct child becomes a drum face (capped at twelve).
- index / defaultIndex / onIndexChange
- number / number / (index) => void
- default —
- Controlled or uncontrolled front panel; fires on every settled detent.
- itemWidth / itemHeight / perspective
- number
- default 160 / 200 / 1000
- Panel geometry; the ring radius derives from width and count.
- sensitivity
- number
- default 0.35
- Drag ratio in degrees per pixel.
- getLabel
- (index) => string
- default —
- Names panels for the live announcer.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Each direct child becomes a drum face (capped at twelve). |
| index / defaultIndex / onIndexChange | number / number / (index) => void | — | Controlled or uncontrolled front panel; fires on every settled detent. |
| itemWidth / itemHeight / perspective | number | 160 / 200 / 1000 | Panel geometry; the ring radius derives from width and count. |
| sensitivity | number | 0.35 | Drag ratio in degrees per pixel. |
| getLabel | (index) => string | — | Names panels for the live announcer. |