A real 3D product rotation that costs nothing at runtime. It is rendered once in Blender from an actual GLB model, then played back as a sprite sheet: one image, stepped frame by frame with background-position. No three.js, no WebGL, nothing to load or compile on the visitor's device.
What that buys you: about 260KB total, a single image request, smooth on low-end phones, and a real still frame, not a blank box, if a visitor has JavaScript disabled.
Three drive modes, picked with one property control.
AUTO SPIN
Continuous rotation. RPM and direction are both controls
SCROLL
One full turn per pass down the page. The object's angle tracks scroll position directly
POINTER
The frame follows the cursor left to right across the object, like a product photo you can nudge
Respects prefers-reduced-motion: auto spin holds a single still frame instead of animating, scroll and pointer stay active, because the visitor is driving those, not the page. Pauses itself off screen with an IntersectionObserver, so a spinning object never burns a frame nobody sees.
Property controls: Sprite Sheet (image), Frames, Columns, Drive (Auto, Scroll or Pointer), RPM, Reverse.
Bring your own sprite sheet: a grid of frames rendered from any 3D tool. Point the Frames and Columns controls at the grid and the component does the rest.
WHAT IT IS NOT
Not a live WebGL viewer. Rotation is fixed at render time: no relighting, no live re-texturing, no free orbit off the path it was rendered on. If a visitor needs to drag-orbit a true live 3D model from any angle, this is the wrong component; look for a three.js or model-viewer based one instead. What this trades away in freedom, it gets back in weight: no engine, no shaders, no runtime cost....
A real 3D product rotation that costs nothing at runtime. It is rendered once in Blender from an actual GLB model, then played back as a sprite sheet: one image, stepped frame by frame with background-position. No three.js, no WebGL, nothing to load or compile on the visitor's device.
What that buys you: about 260KB total, a single image request, smooth on low-end phones, and a real still frame, not a blank box, if a visitor has JavaScript disabled.
Three drive modes, picked with one property control.
AUTO SPIN
Continuous rotation. RPM and direction are both controls
SCROLL
One full turn per pass down the page. The object's angle tracks scroll position directly
POINTER
The frame follows the cursor left to right across the object, like a product photo you can nudge
Respects prefers-reduced-motion: auto spin holds a single still frame instead of animating, scroll and pointer stay active, because the visitor is driving those, not the page. Pauses itself off screen with an IntersectionObserver, so a spinning object never burns a frame nobody sees.
Property controls: Sprite Sheet (image), Frames, Columns, Drive (Auto, Scroll or Pointer), RPM, Reverse.
Bring your own sprite sheet: a grid of frames rendered from any 3D tool. Point the Frames and Columns controls at the grid and the component does the rest.
WHAT IT IS NOT
Not a live WebGL viewer. Rotation is fixed at render time: no relighting, no live re-texturing, no free orbit off the path it was rendered on. If a visitor needs to drag-orbit a true live 3D model from any angle, this is the wrong component; look for a three.js or model-viewer based one instead. What this trades away in freedom, it gets back in weight: no engine, no shaders, no runtime cost....
Majed Monem
