React 3D Model Viewer Frame
Letting a visitor turn a part over in their hands is worth more than any three renders of it. This is deliberately not WebGL — for a marketing page the job is a package a reader can orbit and a set of features that turn it to the right face and explain themselves, and CSS 3D does that in a few kilobytes with no engine to load.
Drag to orbit
KLV-7000 package
Installation
Props
| Prop | Type | Description |
|---|---|---|
| faces | { front, back, right, left, top, bottom } | The six faces, any ReactNode |
| size | number | Cube edge length in px (default 150) |
| features | ModelFeature[] | { id, label, description, rx, ry } orientation presets |
| caption | string | Heading for the feature rail |
Presets are what make it more than a fidget
Anyone can make a box spin. The value is in the feature list: each entry stores the orientation (rx, ry) at which that feature reads best, and clicking it animates the model there with a spring easing and names the thing you are now looking at. Turn the part to the marking; turn it to the ball grid; turn it to the side leads. The moment you grab the model, the preset releases and you have manual control again.
The mechanics are honest CSS: a perspective container, six faces positioned with translateZ(size/2) and per-face rotations, and one parent transform of rotateX rotateY. Pitch is clamped to ±90° so the model can't tumble past its poles into a disorienting upside-down state. Auto-spin runs off requestAnimationFrame and pauses itself the instant a pointer goes down.
On mobile the model captures vertical drags. That is the correct trade for an inspect-the-object interaction, but place it where it won't trap a scroll — give it room, or keep it off the critical scroll path of a long page.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.