CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/scroll-video

Scroll Video

A muted video that scrubs frame-by-frame as the page scrolls past — frames are pre-decoded on load so scrubbing is instant even when the clip isn't keyframe-dense. Scroll up and down to move through the shot.

ReactVideoFont#video#scroll#scrub#cinematic#parallax#timeline#interactive

Usage

import ScrollVideo from '@crazygl/hero-scroll-video';

export default function Page() {
  return (
    <ScrollVideo
      video="https://crazygl.com/samples/drone-1.mp4"
      heading="Every frame, on scroll."
      subheading="Scroll to move through the shot."
      headingPosition="bottom-left"
    />
  );
}

For the smoothest fallback seeking, re-encode the clip with frequent keyframes, e.g.:

ffmpeg -i in.mp4 -g 6 -keyint_min 6 -sc_threshold 0 -c:v libx264 -crf 22 -an out.mp4

Customise

  • Video — video source, poster, and objectFit (cover / contain).
  • Scrub — smoothing playhead glide, reverse, and startAt / endAt to trim where the scroll maps in the clip.
  • Overlay — heading, subheading, headingPosition, textColor, scrim darkening, and fontFamily.

Best for

  • Cinematic product and travel landing pages
  • Brand storytelling and launch films
  • Drone / aerial showreels and agency portfolios
  • Any hero where scroll should drive a curated shot
01 · Install the package

One command, zero config.

npm install @crazygl/hero-scroll-video
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import ScrollVideo from '@crazygl/hero-scroll-video';

export default function Landing() {
  return (
    <ScrollVideo />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import ScrollVideo from '@crazygl/hero-scroll-video';

export default function Page() {
  return (
    <section>
      <ScrollVideo
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

On Scroll Typography

A headline whose transform is driven by scroll progress through the viewport — pick an animation flavour (scale / rotate / slide / blur / combo), tune the scroll window, and the headline does the rest.

Scroll Text Color

A heading whose colour sweeps from start to end as the user scrolls — uses background-clip:text for crisp gradient handover.

ASCII Video Displacement

A looping video converted live into ASCII art — each cell's brightness picks a glyph from a long density ramp so the moving footage reads as live ASCII. The pointer is a clarity lens: under the cursor the cells resolve into the real, sharp footage, so the image reads genuinely clearer exactly where you point.

Scroll Text FX

Each letter scales, rotates and brightens as it passes the scroll midpoint — an editorial mid-line emphasis effect.

Scroll Text Fade

A long block of copy that fades word-by-word as the visitor scrolls — early words go dim, current words pop, future words sit faded.

Scroll Flow Text FX

Stacked rows of large text drift left/right at offset speeds as the visitor scrolls — like a marquee orchestrated by the page itself.Live customizer

Scroll Video

VideoMP4/WebM. Re-encode with frequent keyframes for the smoothest scrubbing.PosterFitPlayhead glide0.16Higher = smoother but laggier; lower locks the playhead tight to scroll.ReverseStart at0Trim where in the clip scroll 0% lands.End at1HeadingSubheadingPositionText colourScrim0.28Darken the video so text stays legible.FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.