Product Guides

360° Spin Builder

Create 360-degree interactive product views. Upload a sequence of frames and let visitors drag to rotate the product from any angle.

How It Works

A 360° spin is a sequence of images (frames) taken from different angles around an object. The plugin displays one frame at a time and advances through the sequence as the user drags horizontally, creating the illusion of rotation.

For the best result, use 36 frames (10° intervals) or 72 frames (5° intervals). More frames = smoother rotation but larger total download size.

Setting Up

Create a new experience and choose 360° Spin.
In the builder, click Upload Frames to open the Asset Picker. Select all your frame images.
The builder will sort frames by filename and display the first frame on the canvas. Drag on the canvas to preview the rotation.

Configuration Options

Option	Default	Description
Autoplay	Off	Automatically rotate through frames on load.
Autoplay speed	50ms	Delay between frames during autoplay (lower = faster).
Drag speed	1x	How many frames to advance per pixel of drag movement.
Full-screen button	On	Show a full-screen toggle button.
Hint on start	On	Show a "Drag to rotate" hint on first load.
Infinite loop	On	Loop back to the first frame after the last.

Frame Naming Convention

Frames are sorted by filename. Use a consistent naming pattern with zero-padded numbers:

frame-001.jpg, frame-002.jpg, ..., frame-036.jpg
product-01.png, product-02.png, ..., product-72.png

Filename pattern must include {`{index}`}

The builder auto-detects the filename pattern from your frames. If the pattern is missing the {index} placeholder, you'll see a warning — this means the spin won't load frames correctly in the embed.

Consistent dimensions

All frames must have the same dimensions. Mixed sizes will cause visual jumping during rotation.

Tips

Start with 36 frames for a good balance of smoothness and file size.
The Filerobot CDN automatically applies lazy loading and optimization. No need to compress frames manually.
Enable autoplay for hero sections where you want to catch attention immediately.
Use the preview in the builder to test drag feel before publishing.

How It Works

For the best result, use 36 frames (10° intervals) or 72 frames (5° intervals). More frames = smoother rotation but larger total download size.

Configuration Options

Option	Default	Description
Autoplay	Off	Automatically rotate through frames on load.
Autoplay speed	50ms	Delay between frames during autoplay (lower = faster).
Drag speed	1x	How many frames to advance per pixel of drag movement.
Full-screen button	On	Show a full-screen toggle button.
Hint on start	On	Show a "Drag to rotate" hint on first load.
Infinite loop	On	Loop back to the first frame after the last.

Frame Naming Convention

Frames are sorted by filename. Use a consistent naming pattern with zero-padded numbers:

frame-001.jpg, frame-002.jpg, ..., frame-036.jpg

product-01.png, product-02.png, ..., product-72.png

Filename pattern must include {`{index}`}

Consistent dimensions

All frames must have the same dimensions. Mixed sizes will cause visual jumping during rotation.

Tips

Start with 36 frames for a good balance of smoothness and file size.

The Filerobot CDN automatically applies lazy loading and optimization. No need to compress frames manually.

Enable autoplay for hero sections where you want to catch attention immediately.

Use the preview in the builder to test drag feel before publishing.