Hero made by @ybouane.

@crazygl/hero-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.

Demo

Scroll Video

Install

npm install @crazygl/hero-scroll-video

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

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.