Device Spin 3D

ProNew

A phone or tablet with a metal frame, glass screen and camera bump that turns under studio lights; drag to spin it.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/device-spin-3d

Prop	Type	Default	Description
`device`	`"phone" \| "tablet"`	`"phone"`	Device shape.
`screen`	`string`	`-`	Screenshot URL shown on the screen; without it a themed sample app is drawn. Must be same-origin or served with CORS.
`mode`	`"sway" \| "turntable"`	`"sway"`	Rock back and forth, or spin all the way round.
`speed`	`number`	`1`	Motion speed multiplier.
`frameColor`	`string`	auto	Frame colour. Graphite on dark themes, silver on light ones.
`colors`	`[string, string, string]`	theme	Colours of the sample screen.
`draggable`	`boolean`	`true`	Drag horizontally to turn the device.
`label`	`string`	`"A phone turning in 3D"`	Accessible description.
`fallback`	`ReactNode`	gradient	Static frame shown while loading and when WebGL is unavailable.
`className`	`string`	`-`	Classes for the outer element.

three.js loads only when the component comes within 200px of the viewport, in its own chunk, so pages that do not show it never download it.
Rendering pauses while it is offscreen or the tab is hidden, and the pixel ratio is capped at 2.
With prefers-reduced-motion: reduce it renders a single still frame.
Without WebGL, or before the scene loads, a static gradient is shown instead.
Colours come from your theme's CSS variables and update when the theme changes.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/device-spin-3d

Prop	Type	Default	Description
`device`	`"phone" \| "tablet"`	`"phone"`	Device shape.
`screen`	`string`	`-`	Screenshot URL shown on the screen; without it a themed sample app is drawn. Must be same-origin or served with CORS.
`mode`	`"sway" \| "turntable"`	`"sway"`	Rock back and forth, or spin all the way round.
`speed`	`number`	`1`	Motion speed multiplier.
`frameColor`	`string`	auto	Frame colour. Graphite on dark themes, silver on light ones.
`colors`	`[string, string, string]`	theme	Colours of the sample screen.
`draggable`	`boolean`	`true`	Drag horizontally to turn the device.
`label`	`string`	`"A phone turning in 3D"`	Accessible description.
`fallback`	`ReactNode`	gradient	Static frame shown while loading and when WebGL is unavailable.
`className`	`string`	`-`	Classes for the outer element.

three.js loads only when the component comes within 200px of the viewport, in its own chunk, so pages that do not show it never download it.
Rendering pauses while it is offscreen or the tab is hidden, and the pixel ratio is capped at 2.
With prefers-reduced-motion: reduce it renders a single still frame.
Without WebGL, or before the scene loads, a static gradient is shown instead.
Colours come from your theme's CSS variables and update when the theme changes.