Scroll-Driven 3D Virtual Video Tour

A high-performance, scroll-bound 3D virtual tour engine engineered with Next.js 16, React 19, GSAP ScrollTrigger, and Lenis smooth scrolling—transforming 60 FPS cinematic drone footage into an interactive, frame-scrubbed mountain castle journey.

Overview & Architecture

An immersive Scroll-Bound 3D Virtual Video Experience allowing visitors to virtually walk and fly through Baguio’s Dragon Treasure Castle before visiting in person. Built using GSAP ScrollTrigger, Lenis Inertial Scrolling, and a Pre-Warmed Multi-Video Stack, the engine translates user scroll velocity directly into 60 FPS frame-accurate video playback across 6 distinct aerial and ground perspectives—complete with a dynamic glassmorphic morphing dock and adaptive mobile tiering.

1. Frame-Accurate Scroll Video Scrubbing

• Scroll-Bound Timeline Synchronization: Binds smooth wheel and touch scroll deltas directly to video timestamps (video.currentTime = progress * duration), creating the sensation of walking through the castle grounds at your own pace.

• Hardware-Accelerated fastSeek(): Utilizes browser-native keyframe seeking to achieve fluid 60 FPS video scrubbing without frame-drop or decoding stutter.

2. 6 Pre-Warmed Cinematic Perspectives

Zero-Buffering Multi-Video Stack: Keeps 6 camera angles mounted with pre-warmed decode states, enabling instant, flicker-free cross-fading:

• Grand Entrance Portal: Morning mist gliding over outer stone bastions.

• Highland Day Panorama: Sunlight illuminating courtyards and pine slopes.

• Nocturnal Night Illumination: Warm lanterns glowing under starlit mountain skies.

• Aerial Top Horizon: 360° bird’s-eye perspective above battlements.

• Front Masonry Close-Up: Detailed architectural views of gothic stone archways.

• Scenic Departure Flythrough: Winding mountain trail descending through the clouds.

3. Dual Tour Modes: Single View vs. Continuous Grand Circuit

• Continuous Grand Circuit Mode (3000vh Track): A seamless multi-chapter journey that automatically cross-fades between all 6 perspectives as the visitor scrolls down the page.

• Single Perspective Mode (1000vh Track): Deep-dive exploration focusing on one specific camera angle with instant reset controls.

4. Glassmorphic Morphing Tour Dock (CastleTourMorphingDock)

• Dynamic Floating Control Island: A responsive glassmorphic dock pinned to the bottom of the screen that dynamically morphs its layout to display the active chapter title, elevation badge, and real-time scrub progress (0% → 100%).

• Interactive Chapter Jumps: Allows visitors to click any landmark chapter to smoothly glide directly to that exact moment on the scroll timeline using custom cubic-bezier Lenis easing.

5. Network-Aware Prefetching & Adaptive Device Tiering

• Smart Preloading: Dynamically inserts <link rel="prefetch"> tags for adjacent video chapters on idle threads while respecting Save-Data and slow mobile connections (2G/3G).

• Responsive Resolution Serving: Automatically streams lightweight 720p 60fps files to mobile smartphones and crystal-clear 1080p 60fps video to desktop displays, preventing memory overflow on iOS Safari and Android Chrome.