360 spin viewer

A product image you drag left or right to see every angle, usually made from a sequence of turntable photos rather than a 3D model.

drag the product to turn it aroundspin the product photosee every anglerotating product picturethe picture you can turn like in a car advertphotos taken on a turntable360 spin veiwthe image you can rotate with the mouse

See it

Live demo coming soon

What it is

A 360 spin viewer scrubs through a sequence of product photographs captured at evenly spaced angles. Dragging left or right selects the previous or next frame, creating the feeling of rotating the object without loading a 3D model. Apple's QuickTime VR called these object movies in the 1990s.

Reach for it when shape and construction matter from every side: shoes, furniture, luggage, machinery, and collectibles. A turntable, fixed camera, locked lighting, and consistent framing matter more than a huge frame count.

Gotcha: 36 large images can outweigh the rest of the product page. Load the poster and nearby frames first, fetch the remainder after intent or idle time, and do not autoplay a perpetual spin. Keep ordinary gallery images and alt text available because the drag interaction itself is not an accessible replacement for product photography.

Ask AI for it

Build a 360 spin viewer from 36 numbered WebP frames photographed at 10-degree increments. Show frame 0 as the poster, preload the two frames on either side, and fetch the rest after pointer intent or requestIdleCallback. Use the Pointer Events API with setPointerCapture, map horizontal drag distance to frame index, wrap at both ends, and batch rendering through requestAnimationFrame. Add previous and next buttons for keyboard users, a text angle readout, object-fit: contain, and a reduced-data fallback that keeps only the poster image.

You might have meant

pdpproduct catalogproduct listing page