Back to projects
Public Project
Vue 360 Product Viewer
Open-source Vue component for 360° product rotation — drag-to-scrub image sequences, touch support, and a configurable embed API.
VueJavaScriptInteractive UIProduct ViewerVercelOpen Source
Overview
A lightweight 360-degree product viewer built with Vue. Drag horizontally to scrub through an image sequence — useful for e-commerce product pages where a single photo isn't enough. Open source, with a live demo on Vercel.
Problem
Most product pages show one static image. 360 viewers that exist are often heavy, hard to embed, or janky on mobile. I wanted a small component with smooth scrubbing, touch support, and a simple API for dropping into a page.
Technical Approach
- Preload image sequences on mount so frame changes don't hit the network during drag
- Map horizontal drag delta to frame index, clamped to sequence bounds — mouse and touch use the same code path
- Throttle frame updates to animation frames to avoid repainting faster than the display can show
- Expose props for image URLs, sensitivity, and container sizing so consumers don't fork the component
Features
- Drag and touch scrubbing through image sequences
- Configurable rotation sensitivity and image set
- Responsive container that scales with its parent
- No external runtime dependencies beyond Vue
- Live demo deployed on Vercel
Tech Stack
- Vue 3 component with a props-based public API
- Vanilla JavaScript for drag math and frame indexing
- CSS for layout and touch-action handling
- Vercel for static demo hosting
Demo
Live at vue-360.vercel.app. The demo uses a sample product sequence — drag to rotate and verify frame transitions stay smooth on both desktop and mobile.