KQ-1616 · TABLE/SPINNER

Table Spinner

Pictures lie flat on a round wooden turntable seen at an angle, built in CSS 3D. A drag turns the plate 1:1 under the finger, un-projected onto its plane, and a throw carries on by motion's inertia generator, slowing by friction with its resting angle snapped so a picture always stops at the front; arrow keys turn it a picture on the glide spring. As each picture comes round to the front it stands up off the plate, hinged on its outer edge, until it faces you, and lies back down as it moves on; a fast spin keeps them flat until it slows. The pictures are a radio group with one tab stop on the front picture: arrows turn, Home and End jump, and a press on a lying picture brings it round the short way.

KQ-1616 · TABLE/SPINNER

Fernworks Ceramics

Spring firing, eight pieces

1 of 8 · celadon bowl

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/table-spinner

Props

items: { src?: string; alt: string; caption?: string }[]; default eight drawn pieces of pottery; The pictures, laid round the plate in order (3 to 16).
value / defaultValue: number; default 0; The picture at the front, by index, controlled or initial.
onValueChange: (index: number) => void; default —; Fires from the throw, key or press that brought a new picture to the front.
tilt: number; default 60; How steeply you look down at the plate, degrees from face-on.
friction: number; default 0.5; How quickly a thrown plate slows, 0 (it coasts for turns) to 1 (it stops almost at once).
plateSize: number; default 0.9; How much of the box the plate fills, 0.5 to 1.
wood: "oak" | "walnut" | "ash" | "ebony"; default "oak"; The plate's timber.
stand: number; default 1; How far the front picture stands up, 0 (it stays flat) to 1 (it faces you).
autoTurn: number; default 0; Turn to the next picture by itself every this many ms while on screen and untouched; 0 never.
trigger: "inView" | "mount"; default "inView"; What starts the entrance spin.
captions: boolean; default true; Show the front picture's caption under the plate.
label: string; default "Turntable of pictures"; The turntable's accessible name.
disabled: boolean; default false; No spinning, pressing or keys.
className: string; default —; Sizes the turntable; it fills a 416px-tall box by default.

Prop	Type	Default	Description
items	{ src?: string; alt: string; caption?: string }[]	eight drawn pieces of pottery	The pictures, laid round the plate in order (3 to 16).
value / defaultValue	number	0	The picture at the front, by index, controlled or initial.
onValueChange	(index: number) => void	—	Fires from the throw, key or press that brought a new picture to the front.
tilt	number	60	How steeply you look down at the plate, degrees from face-on.
friction	number	0.5	How quickly a thrown plate slows, 0 (it coasts for turns) to 1 (it stops almost at once).
plateSize	number	0.9	How much of the box the plate fills, 0.5 to 1.
wood	"oak" \| "walnut" \| "ash" \| "ebony"	"oak"	The plate's timber.
stand	number	1	How far the front picture stands up, 0 (it stays flat) to 1 (it faces you).
autoTurn	number	0	Turn to the next picture by itself every this many ms while on screen and untouched; 0 never.
trigger	"inView" \| "mount"	"inView"	What starts the entrance spin.
captions	boolean	true	Show the front picture's caption under the plate.
label	string	"Turntable of pictures"	The turntable's accessible name.
disabled	boolean	false	No spinning, pressing or keys.
className	string	—	Sizes the turntable; it fills a 416px-tall box by default.