Sirv 360 Spin
A 360 spin is a sequence of frames (product rotated in steps) that Sirv assembles into an interactive drag-to-rotate viewer. Spins are Sirv's flagship media type: lighter and more engaging than video for rotating products.
Official Sources First
Check current Sirv docs before changing naming rules, option names, or defaults:
https://sirv.com/help/articles/how-spin-files-are-created/https://sirv.com/help/articles/sirv-spin/https://sirv.com/help/articles/images-for-a-360-spin/https://sirv.com/help/articles/hotspots-on-360-spin/https://sirv.com/help/articles/convert-video-to-spin/
Default Workflow
- Decide the source: photographed frame sequence, rendered frames, or an existing rotating video (convert with
video2spin).
- Choose frame count: 24-36 frames for smooth rotation at reasonable weight (36 is the usual sweet spot; 72+ glides but doubles weight; minimum 8, maximum 1000).
- Name files so Sirv auto-generates the
.spin: one folder per product spin, filenames with ascending numbers.
- Upload to Sirv - the
.spin file is created automatically; verify frame order and start frame.
- Embed with Sirv JS +
class="Sirv" markup; configure behavior via data-options or the .spin file.
- Verify: drag rotation, zoom, mobile swipe vs page scroll, load performance, and CLS.
Naming Conventions (what makes auto-generation work)
- Single-row spin (rotate around one axis): one ascending number sequence:
chair-01.jpg ... chair-36.jpg.
- Multi-row 3D spin (multiple camera heights): two number sequences - Sirv reads the first as row, second as column:
chair-r01-c01.jpg, chair-r01-c02.jpg, ... chair-r03-c36.jpg. The r/c (and s for spin number) prefixes are best practice for clarity.
- The
.spin filename comes from the folder name (one spin per folder) or the common filename stem (digits stripped).
- 8-1000 images per spin. Keep one spin per folder for predictable naming.
Source frames: shoot/render at 2500-4000px wide. Sirv resizes and compresses delivery automatically (aggressive ~60% quality for retina), so keep masters high quality.
Embedding
<link rel="preconnect" href="https://youraccount.sirv.com" crossorigin>
<link rel="dns-prefetch" href="https://scripts.sirv.com">
<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>
<div class="Sirv" data-src="https://youraccount.sirv.com/products/chair/chair.spin"></div>
Inside a product gallery, add the .spin as one data-src item among images/videos - see ../sirv-media-viewer/SKILL.md for gallery composition, thumbnails, and fullscreen.
Key Options
Set via data-options, the .spin file (JSON - also holds image list and hotspots), profiles, or SirvOptions:
| Option |
Default |
Purpose |
spin |
drag |
Interaction: drag or hover |
speed |
50 |
Drag sensitivity (0-100) |
autospin |
- |
once, twice, infinite, or off |
autospinSpeed |
3600 |
ms per full rotation |
autospinDirection |
- |
clockwise, anticlockwise, alternate |
autospinStart |
- |
load, hover, click (combinable) |
hint / hintText / mobileHintText |
true / "Drag to spin" / "Swipe to spin" |
Interaction hint |
zoom |
2.5 |
Click-to-zoom magnification (0 disables; activates when source exceeds display by 20%) |
fullscreen |
true |
Fullscreen button |
startColumn / startRow |
- |
Initial frame |
loopColumn / loopRow |
true / false |
Wrap past the last frame on each axis |
spinOnAnyDrag |
false |
Single-row spins: also react to vertical drags |
Mobile: keep spinOnAnyDrag:false (via data-mobile-options="spinOnAnyDrag:false;") so vertical swipes still scroll the page.
Video ↔ Spin Conversion
- Video → spin: UI (right-click video → Convert to spin) or API
POST /v2/files/video2spin. Choose duration, JPEG (faster) or PNG (sharper), and frame count from 18/24/36/72/120/180/360. Video max 512MB; compress to under 300MB first when near the limit. Hourly API limits by plan (Free 0, Business 200, Enterprise 400).
- Spin → video:
POST /v2/files/spin2video renders an MP4 for marketplaces/social that accept video but not embeds.
- API auth, job polling, and endpoint details:
../sirv-api/SKILL.md.
Red Flags
- Hand-building a drag-to-rotate widget when a
.spin + Sirv JS does it in two lines.
- Filenames without a clean ascending sequence - frames assemble out of order or the
.spin never generates.
- Two digit groups in single-row filenames (e.g.
2024-chair-01.jpg) - Sirv reads the first digits as the row. Keep dates out of frame filenames.
- 100+ frames "for smoothness" on a product page - weight without benefit; 36 is usually enough.
- Low-res source frames (under ~1500px) - zoom becomes useless.
- Embedding a spin above the fold without reserving layout space (CLS) or preconnecting to the Sirv domain.
- Editing generated
.spin JSON without checking current docs for valid settings/hotspot syntax.
Verification
- The
.spin URL loads in a browser and rotation follows drag direction in the right order (no jumps or reversals).
- First frame appears fast; preconnect hints present for above-fold spins; no CLS when the viewer initializes.
- Zoom activates and is sharp; fullscreen works; hint text shows once.
- Mobile: swipe rotates the spin, vertical swipe still scrolls the page.
- For multi-row spins: vertical drag changes rows as intended.
- For conversions: frame count and start frame match what was requested; spot-check frames for motion blur.
1---2name: sirv-360-spin3description: Create and embed Sirv 360 spins - interactive rotating product views. Use when creating a 360 spin, shooting or preparing spin frames, naming spin image sequences, configuring .spin files, embedding spins with Sirv, tuning spin options (autospin, zoom, hint, speed), building 3D multi-row spins, adding spin hotspots, converting video to spin or spin to video, or debugging a spin that won't rotate or generates wrongly. Triggers on 360 spin, product spin, 360 product photography, spin viewer, or rotating product view.4---56# Sirv 360 Spin78A 360 spin is a sequence of frames (product rotated in steps) that Sirv assembles into an interactive drag-to-rotate viewer. Spins are Sirv's flagship media type: lighter and more engaging than video for rotating products.910## Official Sources First1112Check current Sirv docs before changing naming rules, option names, or defaults:1314- `https://sirv.com/help/articles/how-spin-files-are-created/`15- `https://sirv.com/help/articles/sirv-spin/`16- `https://sirv.com/help/articles/images-for-a-360-spin/`17- `https://sirv.com/help/articles/hotspots-on-360-spin/`18- `https://sirv.com/help/articles/convert-video-to-spin/`1920## Default Workflow21221. Decide the source: photographed frame sequence, rendered frames, or an existing rotating video (convert with `video2spin`).232. Choose frame count: 24-36 frames for smooth rotation at reasonable weight (36 is the usual sweet spot; 72+ glides but doubles weight; minimum 8, maximum 1000).243. Name files so Sirv auto-generates the `.spin`: one folder per product spin, filenames with ascending numbers.254. Upload to Sirv - the `.spin` file is created automatically; verify frame order and start frame.265. Embed with Sirv JS + `class="Sirv"` markup; configure behavior via `data-options` or the `.spin` file.276. Verify: drag rotation, zoom, mobile swipe vs page scroll, load performance, and CLS.2829## Naming Conventions (what makes auto-generation work)3031- **Single-row spin (rotate around one axis):** one ascending number sequence: `chair-01.jpg` ... `chair-36.jpg`.32- **Multi-row 3D spin (multiple camera heights):** two number sequences - Sirv reads the **first as row, second as column**: `chair-r01-c01.jpg`, `chair-r01-c02.jpg`, ... `chair-r03-c36.jpg`. The `r`/`c` (and `s` for spin number) prefixes are best practice for clarity.33- The `.spin` filename comes from the folder name (one spin per folder) or the common filename stem (digits stripped).34- 8-1000 images per spin. Keep one spin per folder for predictable naming.3536Source frames: shoot/render at 2500-4000px wide. Sirv resizes and compresses delivery automatically (aggressive ~60% quality for retina), so keep masters high quality.3738## Embedding3940```html41<link rel="preconnect" href="https://youraccount.sirv.com" crossorigin>42<link rel="dns-prefetch" href="https://scripts.sirv.com">43<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>4445<div class="Sirv" data-src="https://youraccount.sirv.com/products/chair/chair.spin"></div>46```4748Inside a product gallery, add the `.spin` as one `data-src` item among images/videos - see `../sirv-media-viewer/SKILL.md` for gallery composition, thumbnails, and fullscreen.4950## Key Options5152Set via `data-options`, the `.spin` file (JSON - also holds image list and hotspots), profiles, or `SirvOptions`:5354| Option | Default | Purpose |55| --- | --- | --- |56| `spin` | `drag` | Interaction: `drag` or `hover` |57| `speed` | 50 | Drag sensitivity (0-100) |58| `autospin` | - | `once`, `twice`, `infinite`, or off |59| `autospinSpeed` | 3600 | ms per full rotation |60| `autospinDirection` | - | `clockwise`, `anticlockwise`, `alternate` |61| `autospinStart` | - | `load`, `hover`, `click` (combinable) |62| `hint` / `hintText` / `mobileHintText` | true / "Drag to spin" / "Swipe to spin" | Interaction hint |63| `zoom` | 2.5 | Click-to-zoom magnification (0 disables; activates when source exceeds display by 20%) |64| `fullscreen` | true | Fullscreen button |65| `startColumn` / `startRow` | - | Initial frame |66| `loopColumn` / `loopRow` | true / false | Wrap past the last frame on each axis |67| `spinOnAnyDrag` | false | Single-row spins: also react to vertical drags |6869Mobile: keep `spinOnAnyDrag:false` (via `data-mobile-options="spinOnAnyDrag:false;"`) so vertical swipes still scroll the page.7071## Video ↔ Spin Conversion7273- **Video → spin:** UI (right-click video → Convert to spin) or API `POST /v2/files/video2spin`. Choose duration, JPEG (faster) or PNG (sharper), and frame count from 18/24/36/72/120/180/360. Video max 512MB; compress to under 300MB first when near the limit. Hourly API limits by plan (Free 0, Business 200, Enterprise 400).74- **Spin → video:** `POST /v2/files/spin2video` renders an MP4 for marketplaces/social that accept video but not embeds.75- API auth, job polling, and endpoint details: `../sirv-api/SKILL.md`.7677## Red Flags7879- Hand-building a drag-to-rotate widget when a `.spin` + Sirv JS does it in two lines.80- Filenames without a clean ascending sequence - frames assemble out of order or the `.spin` never generates.81- Two digit groups in single-row filenames (e.g. `2024-chair-01.jpg`) - Sirv reads the first digits as the row. Keep dates out of frame filenames.82- 100+ frames "for smoothness" on a product page - weight without benefit; 36 is usually enough.83- Low-res source frames (under ~1500px) - zoom becomes useless.84- Embedding a spin above the fold without reserving layout space (CLS) or preconnecting to the Sirv domain.85- Editing generated `.spin` JSON without checking current docs for valid settings/hotspot syntax.8687## Verification8889- The `.spin` URL loads in a browser and rotation follows drag direction in the right order (no jumps or reversals).90- First frame appears fast; preconnect hints present for above-fold spins; no CLS when the viewer initializes.91- Zoom activates and is sharp; fullscreen works; hint text shows once.92- Mobile: swipe rotates the spin, vertical swipe still scrolls the page.93- For multi-row spins: vertical drag changes rows as intended.94- For conversions: frame count and start frame match what was requested; spot-check frames for motion blur.
igorvaryvoda