Turntable review

A React block (a whole screen) in Beamline's Hotel & restaurant app.

A 3D asset reviewed on a turntable. The object large at the angle in view with front, side and back said, standing on a plate whose rim shows the twelve 30° sectors (looked at drawn solid, not yet dashed in the warning tone) and each note's pin, all turning with it; under it a strip of the twelve angles, each seen or not with its open notes dotted, pressing one turning the table there; notes by angle beside it, picking one turning the table there; new notes left at the angle in view; notes resolved and reopened; and which angles nobody has looked at yet, so a review covers the whole object. renderView brings the real asset (a render per angle, a 3D viewer frame or a drawing); without it a plain box of the model's proportions turns.

Use it for

Reviewing a 3D asset, prop or product model where notes belong to a viewing angle.
Any turnaround review where the reviewer must cover every side.

Not for

Notes on video time (cut-review).
A full 3D viewer with orbit controls.

Anatomy

viewer: name, version, angle and facing; the object at the angle (renderView or a plain box); the plate with the twelve sectors and note pins, turning with it; the strip of twelve angles; angle slider; what's not been looked at
notes: open count; each note's angle (turns the table), author, text, resolve; the note nearest the angle in view marked; a note at the angle in view
phone: the viewer, then the strip in two rows of six, then the notes

States

not looked at
every angle looked at
open note
resolved note
no notes

Keyboard

Arrow keys on the angle slider turn the table
Tab to a note's angle to turn there

Props

Prop	Type	Default	Description
`model` (required)	`TurntableModel`	—
`comments` (required)	`AngleComment[]`	—
`onCommentsChange`	`((c: AngleComment[]) => void)`	—
`author` (required)	`string`	—
`angle`	`number`	—
`defaultAngle`	`number`	—
`onAngleChange`	`((a: number) => void)`	—
`defaultSeen`	`number[]`	—	Sectors (of 30°) already looked at, by index 0–11.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`renderView`	`((angle: number, size: "stage" \| "thumb") => ReactNode)`	—	The asset at an angle (0 = its front): a render for that angle, a frame of a 3D viewer, or a drawing. Called for the stage and for each of the twelve angles in the strip ("thumb"). Omitted: a plain box of the model's proportions.

Built from

slider
textarea
button
badge

Dependencies

lucide-react

Import

import { TurntableReview } from "@beamline/turntable-review";

Get it

Turntable review is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent