KQ-1613 · SWEEP/STUDIO
Sweep Studio
A product shot you can handle: a phone standing on a turntable on a seamless studio sweep under a light rig, its screen real content. The phone is a CSS 3D body — screen face, back plate in its finish with a camera island, and an edge band of strips that rounds every corner — every face shaded from one turn value, with rim light flashing along the edges as they pass the lamps, a highlight sliding across the glass, a contact shadow turning on the plate and a mirrored copy in the glossy floor. Drag turns it 1:1, all the way round; released, the throw is projected and it eases back to face you at the nearest copy of its rest pose on springs.drift with the release velocity. The plate is a slider: arrow keys turn it 30° on springs.snap and it eases home after a hold; Home faces it, End shows the back.
Waylight 2 · launch
Your trips, at a glance
Good morning
Your trips
4 min
showing front · drag to turn it round
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/sweep-studio
Props
- children
- ReactNode
- default —
- What the screen shows; real content that stays readable while it faces you. Defaults to a transit app.
- lightRig
- "soft" | "rim" | "top" | "window"
- default "soft"
- The lights: a big softbox, two rim strips, a top spot, or window light.
- angle
- number
- default -18
- The pose it rests in, degrees; 0 is square on.
- finish
- "graphite" | "silver" | "sand" | "cobalt"
- default "graphite"
- The body's finish.
- autoTurn
- number
- default 0
- Degrees per second of a slow showcase turn; 0 rests in the pose.
- hold
- number
- default 900
- How long it holds a pose turned by the keys before easing back, ms.
- tilt
- number
- default 8
- How far above the eye sits, 0 to 20 degrees.
- gloss
- number
- default 0.5
- How glossy the floor is: the reflection's strength, 0 to 1.
- perspective
- number
- default 1400
- Distance of the eye from the phone, px.
- colors
- SweepStudioColors
- default —
- The sweep's colours: { wall, floor }; tokens by default.
- onSideChange
- (side: "front" | "edge" | "back") => void
- default —
- Fires as a turn brings the front, an edge or the back to face you.
- interactive
- boolean
- default true
- Drag and the keys turn it.
- label
- string
- default "Phone on a turntable"
- The studio's accessible name.
- className
- string
- default "h-[30rem] w-full"
- Sizes the studio; the phone scales to it.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | What the screen shows; real content that stays readable while it faces you. Defaults to a transit app. |
| lightRig | "soft" | "rim" | "top" | "window" | "soft" | The lights: a big softbox, two rim strips, a top spot, or window light. |
| angle | number | -18 | The pose it rests in, degrees; 0 is square on. |
| finish | "graphite" | "silver" | "sand" | "cobalt" | "graphite" | The body's finish. |
| autoTurn | number | 0 | Degrees per second of a slow showcase turn; 0 rests in the pose. |
| hold | number | 900 | How long it holds a pose turned by the keys before easing back, ms. |
| tilt | number | 8 | How far above the eye sits, 0 to 20 degrees. |
| gloss | number | 0.5 | How glossy the floor is: the reflection's strength, 0 to 1. |
| perspective | number | 1400 | Distance of the eye from the phone, px. |
| colors | SweepStudioColors | — | The sweep's colours: { wall, floor }; tokens by default. |
| onSideChange | (side: "front" | "edge" | "back") => void | — | Fires as a turn brings the front, an edge or the back to face you. |
| interactive | boolean | true | Drag and the keys turn it. |
| label | string | "Phone on a turntable" | The studio's accessible name. |
| className | string | "h-[30rem] w-full" | Sizes the studio; the phone scales to it. |