All projects · Marketing & Lead-Gen
Aureus Titanium Pen: Scroll-Controlled Video Animation
A luxury product landing page featuring an Apple-style scroll-controlled video animation that decodes the clue by converting video into an image…
A luxury product landing page featuring an Apple-style scroll-controlled video animation that decodes the clue by converting video into an image sequence preloaded on an HTML5 canvas, synchronizing 60fps playback with scroll position.
- Decodes the core clue ('A video is just a sequence of images waiting to be controlled') using preloaded HTML5 canvas sequence instead of choppy video scrubbing
- Buttery-smooth 60fps forward and backward scrubbing with Retina HiDPI auto-scaling and aspect-ratio containment
- Dynamic narrative cross-fade: 'Precision Redefined' luxury serif typography fades out seamlessly during initial scroll travel
- Smooth transition into 'Engineered Perfection' feature cards (Aerospace Titanium, Magnetic Mechanism, Swiss Precision Nib)
- Built-in telemetry HUD with live FPS, frame counter, scrub percentage slider, and autoplay toggle
Built with: HTML5 Canvas API, JavaScript (ES2022+), CSS3, WebP Image Sequence, Scroll-Driven Animation, RequestAnimationFrame, Playfair Display Typography