VOS Story

The experience runs on reusable GSAP components rather than isolated animations. I built scroll-triggered text reveals, character-by-character luxury typography, directional fade transitions, animated information callouts, 3D coin flips and viewport-controlled video playback — with staggered sequencing, blur removal, perspective transforms and custom easing to keep every transition smooth and intentional.

A custom SVG eclipse sequence uses GSAP's MotionPathPlugin to move glowing elements across orbital paths, adjusting its intensity for mobile and desktop and pausing automatically once it leaves the viewport.

The final scene pins a horizontal-scroll sequence, translating vertical page movement into a run of full-screen content and video panels. ScrollTrigger calculates the exact track width, pins the scene, and recalculates on resize to keep the experience consistent across devices.

The guardian cards use spring-based Motion values, 3D perspective, pointer-responsive rotation and dynamic glare gradients. Each card carries its own colour treatment while staying part of one cohesive component system, entering with a GSAP combination of opacity, vertical movement, scale, rotation and blur.

Beyond the cards, the interface layers in three-directional image marquees, animated shine borders, responsive information markers, hover transitions, coin artwork, cinematic letterbox reveals and layered top, bottom and side gradients — the details that connect full-screen video to text sections without abrupt visual boundaries.

The product cards at the close connect the experience back to commerce through direct product actions, turning an immersive UI into a functional customer journey.

Layouts adapt across mobile, tablet and desktop — fluid typography, one-to-four-column card grids, device-specific video positioning and responsive gradient dimensions. Lenis handles smooth scrolling, while GSAP contexts and lifecycle cleanup keep animations from leaking between scenes.

With 12 videos and 19 images to load, I built a custom preloading system: videos load sequentially so they don't overwhelm the network, images load in parallel, and Zustand tracks the global loading state behind a Motion-powered percentage loader.

Videos play automatically on entering the viewport and pause on leaving it. The implementation also handles mobile autoplay restrictions, inline playback, failed-playback retries and interaction-gated unlocking. Heavy interactive components are dynamically loaded, and responsive image sizing with lazy loading keeps rendering work down.