Archon — Scroll-Driven Video Sequence
Cinematic scroll-driven demo where scrolling plays a 241-frame WebP image sequence frame-by-frame. GSAP ScrollTrigger scrubs the canvas, Lenis handles smooth inertia, with parallax text and animated sections below.
Scroll drives a 241-frame WebP sequence on a full-viewport canvas — creating the illusion of a video controlled entirely by scroll position. No video element, no autoplay. Pure canvas + GSAP scrub.
How the Scroll Video Works
241 frames (seq000.webp → seq240.webp) preload into an Image[] array on page load. A <canvas> covers the full hero. GSAP animates a state.frame counter from 0 to 240 tied to scroll via ScrollTrigger with scrub. Each update draws the current frame to canvas with cover-fit scaling.
Hero pins to the viewport for the full scroll distance of the sequence:
end: '+=' + (FRAME_COUNT - 100) * (isMobile ? 22 : 10)
// ~1410px desktop / ~3102px mobile scroll travel
Hero text (title, subtitle, CTA) scrolls at independent yPercent parallax rates over that same distance, creating depth separation from the canvas.
Sections (after pin releases)
| Section | Entrance animation |
|---|---|
| Protocols (4 cards) | 3D perspective rise + per-card flip stagger |
| Counters | Clip-path bottom wipe + animated count-up |
| Marquee | Infinite horizontal loop, cinematic zoom-out entrance |
| Big Lines | Per-line blur-drop reveal + amber underline draw |
Mobile Behavior
- Lenis smooth scroll with reduced multiplier (
0.4) on touch - Scroll travel per frame increased (×22 vs ×10 desktop) for thumb-scroll pacing
- Card grid collapses to single column
- Typography scales via
clamp() prefers-reduced-motion: all animations skip, loader hides instantly
Tech Stack
| Library | Version | Role |
|---|---|---|
| GSAP | 3.12.5 | Animation engine, ScrollTrigger, scrub |
| Lenis | 1.1.14 | Smooth scroll inertia |
| Cinzel + Rajdhani | — | Google Fonts |
| Dune_Rise.otf | — | Custom display heading font |
No build step. Single index.html + assets.
Frame Sequence Requirements
- Format: WebP
- Naming:
seq000.webp→seq240.webp(3-digit zero-padded) - Folder:
sequence/ - Frame count controlled by
FRAME_COUNT = 241in script