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
| 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. |