scroll-video

Scroll-Driven Video — Foundation

The core mechanism: extract a video into still frames, preload them into memory, and paint the correct frame onto a canvas as the user scrolls. Lenis smooths the scroll; GSAP ScrollTrigger drives the frame index. A circle-wipe reveals the canvas as the hero section scrolls away. Text sections float over the canvas, appearing and disappearing at defined scroll positions with staggered entrance animations.

---

Step 1: Analyze the Video

ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height,duration,r_frame_rate,nb_frames \
  -of csv=p=0 "<VIDEO_PATH>"

Determine resolution, duration, frame rate, total frames. Then decide:

• Target frame count: 150–300 for a smooth scroll experience
  • Short (<10s): extract at original fps, cap at ~300
  • Medium (10–30s): 10–15fps
  • Long (30s+): 5–10fps
• Output resolution: match aspect ratio, cap width at 1920px

---

Step 2: Extract Frames

mkdir -p frames
ffmpeg -i "<VIDEO_PATH>" \
  -vf "fps=<CALCULATED_FPS>,scale=<WIDTH>:-1" \
  -c:v libwebp -quality 80 \
  "frames/frame_%04d.webp"

Count the output: ls frames/ | wc -l

---

Step 3: Project Scaffold

project-root/
  index.html
  css/style.css
  js/app.js
  frames/frame_0001.webp ...

No bundler. Vanilla HTML/CSS/JS + CDN libraries only.

---

Step 4: HTML Structure

Minimal required structure — in this order:

<!-- 1. Hero: .hero-standalone (100vh, solid bg) -->
<!-- 2. Canvas: .canvas-wrap > canvas#canvas (fixed, full viewport) -->
<!-- 3. Scroll container: #scroll-container (800vh+) containing text sections -->

<section class="hero-standalone">
  <h1 class="hero-heading">Your Headline</h1>
</section>

<div class="canvas-wrap">
  <canvas id="canvas"></canvas>
</div>

<div id="scroll-container">

  <!-- Text section: appears at 20% scroll, leaves at 38% -->
  <!-- data-enter / data-leave are percentages of total scroll progress -->
  <!-- data-animation picks the entrance type (see 6e) -->
  <section class="scroll-section"
           data-enter="20" data-leave="38" data-animation="slide-left">
    <div class="section-inner">
      <span class="section-label">Label / category</span>
      <h2 class="section-heading">Your headline here</h2>
      <p class="section-body">Supporting text here.</p>
    </div>
  </section>

  <!-- Add more sections — stagger their enter/leave ranges so they don't overlap -->
  <section class="scroll-section"
           data-enter="42" data-leave="60" data-animation="fade-up">
    <div class="section-inner">
      <span class="section-label">Another label</span>
      <h2 class="section-heading">Second point</h2>
      <p class="section-body">More detail here.</p>
    </div>
  </section>

  <!-- Final section: data-persist keeps it visible at end of scroll -->
  <section class="scroll-section"
           data-enter="75" data-leave="95" data-animation="scale-up" data-persist="true">
    <div class="section-inner">
      <h2 class="section-heading">Closing statement or CTA</h2>
    </div>
  </section>

</div>