| name | biznomad-video-scroll-website |
| description | Biznomad - Build Apple-grade video scroll-animated websites and scrollytelling experiences using GSAP ScrollTrigger, Lenis smooth scroll, Canvas image sequences, ALL-I encoded HTML5 video scrubbing, and sticky HUD overlays. |
Biznomad - Video Scroll Animated Websites (Apple-Grade Scrollytelling)
This skill provides complete architectural patterns, FFmpeg compression pipelines, and production JS/CSS code for building high-performance, video scroll-animated websites matching Apple, Stripe, Lusion, and Awwwards Site-of-the-Day standards.
Industry Research & Architectural Breakdown
When building scroll-driven video experiences, top tech and design agencies select from three primary rendering strategies:
| Strategy | Industry Reference | Best For | Pros | Cons |
|---|
| Canvas Image Sequence | Apple (MacBook, AirPods, iPhone) | Precision scrub, zero lag, frame perfection | 60–120fps butter-smooth, works on all mobile GPUs | Requires frame preloading (20–60MB array) |
| ALL-I Encoded HTML5 Video | Stripe, Nike, Tesla | Quick setup, low bandwidth single file | Single MP4 download, fast initialization | Requires low keyframe distance (-g 1) |
| WebGL Texture Shader | Lusion, Active Theory, Cuberto | 3D depth distortion, liquid glass effects | Ultra-creative, lighting & refraction control | Higher GPU overhead, shader complexity |
1. Video Preparation & FFmpeg Encoding Pipeline
To achieve instant, smooth frame scrubbing without stutter, the video MUST be encoded with a keyframe distance of 1 (every frame is an Intra-frame / Keyframe).
Option A: Prepare Video for HTML5 Video Scrubbing (ALL-I Encoding)
Run this FFmpeg command to generate an ultra-fast scrubbing MP4:
ffmpeg -i input.mp4 -vf "scale=1920:1080:force_original_aspect_ratio=decrease,pad=1920:1080:(ow-iw)/2:(oh-ih)/2" -c:v libx264 -preset slow -crf 18 -g 1 -keyint_min 1 -an -movflags +faststart output_scrub.mp4
Option B: Prepare Frame Sequence for Canvas Scrubbing (Apple Style)
Extract compressed 1080p WebP or JPEG frames:
mkdir -p frames
ffmpeg -i input.mp4 -vf "scale=1920:1080" -q:v 85 frames/frame_%04d.jpg
ffmpeg -i input.mp4 -vf "scale=1920:1080" -c:v libwebp -quality 85 frames/frame_%04d.webp
2. Technical Stack Configuration
- Smooth Scrolling Engine:
@studio-freight/lenis or Lenis (eliminates jitter and provides momentum scroll)
- Animation Driver:
GSAP 3.12+ with ScrollTrigger
- Rendering Layer:
<canvas> with 2D Context or <video> with currentTime sync
- Typography & HUD: Glassmorphic fixed overlay cards synced to frame timeline triggers
3. Production Architecture: Apple-Style Canvas Sequence (Recommended)
Below is the production-ready implementation of an Apple-style Canvas frame scroll sequence with preloader, smooth Lenis scroll, and floating scrollytelling copy layers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Apple-Style Video Scroll Showcase</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.1.9/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<style>
:root {
: ;
: ;
: ;
: ;
: (, , , );
: (, , , );
: (, , , );
}
* { : border-box; : ; : ; }
{
: (--bg);
: (--paper);
: , system-ui, -apple-system, sans-serif;
: hidden;
-webkit-: antialiased;
}
{
: fixed;
: ;
: ;
: ;
: flex;
: column;
: center;
: center;
: ;
: opacity ease, visibility ease;
}
{ : ; : hidden; }
{
: ;
: ;
: (, , , );
: ;
: hidden;
}
{
: ;
: ;
: (--accent);
: width linear;
}
{
: relative;
: ;
}
{
: sticky;
: ;
: ;
: ;
: hidden;
: flex;
: center;
: center;
}
{
: ;
: ;
: cover;
: block;
}
{
: absolute;
: ;
: none;
: ;
}
{
: absolute;
: ;
: (--panel);
: ();
-webkit-: ();
: solid (--line);
: ;
: ;
: ;
: ();
: opacity ease, transform ease;
}
{
: ;
: ();
}
{
: , monospace;
: (--accent);
: ;
: ;
: uppercase;
: ;
: ;
}
{
: ;
: ;
: -;
: ;
: ;
}
{
: (--dim);
: ;
: ;
}
{ : ; : ; }
{ : ; : ; }
{ : ; : ; }
{
: ;
: flex;
: center;
: center;
: center;
: ;
: solid (--line);
: ;
}
{
: (, , );
: ;
: -;
: ;
}
{
: inline-block;
: (--accent);
: ;
: ;
: ;
: ;
: none;
: (--accent-glow);
: transform ;
}
{ : (); }
LOADING EXPERIENCE
01 / ARCHITECTURE
Precision Engineered.
Every frame calculated in real-time. Unmatched visual velocity and fluid responsiveness.
02 / TELEMETRY
Real-Time Data Flow.
Sub-millisecond synchronization between user scroll input and canvas presentation.
03 / PERFORMANCE
120 FPS Mastery.
GPU accelerated canvas rendering with zero frame drop or scroll stuttering.
Ready to Launch.
EXPERIENCE THE FUTURE →
4. Alternative Architecture: Direct HTML5 Video Scrubbing
For projects using a single compressed .mp4 video with Intra-frame encoding (-g 1):
const video = document.getElementById('scrubVideo');
video.pause();
video.onloadedmetadata = function() {
gsap.to(video, {
currentTime: video.duration,
ease: "none",
scrollTrigger: {
trigger: "#videoStage",
start: "top top",
end: "bottom bottom",
scrub: 0.3
}
});
};
5. Golden Rules for Apple-Grade Quality
- Intra-frame Keyframes (
-g 1): Mandatory for HTML5 video scrub, otherwise scrub stutters on keyframe seeking intervals.
- Device Pixel Ratio (DPR): Always scale canvas resolution by
window.devicePixelRatio for razor-sharp Retina output.
- Aspect Ratio Cover Math: Calculate
offsetX and offsetY on canvas resize so frames maintain full-bleed object-fit cover.
- Lenis Scroll Interpolation: Never omit smooth scroll inertia (
Lenis). Pure native wheel events create discrete steps that degrade video scrubbing.
- Mobile Performance Fallback: On low-power mobile devices (
matchMedia('(prefers-reduced-motion: reduce)') or low bandwidth), offer automatic video playback or static poster frames instead of heavy scrub calculations.
