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.

Scroll Text FX

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

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 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.