Scroll Story Website

A high-end, immersive web experience featuring advanced scroll-driven animations and a high-performance 2D Canvas Image Sequence walkthrough.

Scroll Story Website explores cinematic interactive storytelling. It implements a high-fidelity building/residence walkthrough using optimized 2D canvas frame sequences mapped to custom scroll offsets.

Delivering high-fidelity building walkthroughs online often relies on heavy video assets that stutter on slow connections, block user interaction, and lack control hooks.

I engineered an optimized 2D canvas drawing loop running dynamic requestAnimationFrame rendering with custom ease-smoothing. The sequence decodes optimized WebP frames dynamically served via Cloudinary based on the user's viewport width.

Built with Next.js App Router, using GSAP ScrollTrigger to coordinate timeline milestones. The 2D sequence runs custom scroll interpolation and canvas requestAnimationFrame rendering loops.

Loading and buffering 768 image assets on cellular networks without causing render stutter or running out of browser RAM.

Integrated WebP compression routines on Cloudinary to dynamically serve compressed frames scaled to the viewport width, reducing initial download requirements by 90%.

Achieved fluid 60fps cinematic scrolling across mobile and desktop browsers with near-instant sequence buffering.

• Cinema-grade 768-frame 2D Canvas sequence walkthrough
• High-performance requestAnimationFrame (RAF) rendering loop with custom smooth-scroll easing
• GSAP ScrollTrigger timeline integration for custom scroll mapping
• Client settings panel to toggle smoothing parameters, text layers, and hotspots
• Cloudinary-integrated frames delivery pipeline returning optimized WebP files
• Immersive 2D Canvas walkthrough application
• Cloudinary frames pipeline utility script
• Integrated control dashboard panel and glassmorphic informational cards