vidscroll
Video that plays as you scroll, frame by frame. Smooth with any MP4 or WebM, for React and plain HTML.
npm i vidscrollGet started
Hero.tsx
import { ScrollVideo, Section } from "vidscroll";
<ScrollVideo src="/hero.mp4" length="400vh">
<Section start={0} end={0.5}>
<h2>Scroll to play</h2>
</Section>
</ScrollVideo>Any MP4 works. Videos with sparse keyframes are re-encoded in the browser on the first visit, or ahead of time with npx vidscroll encode.
Why vidscroll
Scroll-driven video usually means choppy scrubbing, or exporting hundreds of images by hand. vidscroll plays the video file you already have, smoothly, and keeps your content in step with it.
- Smooth with any video
- Most exported videos are slow to scrub. vidscroll re-encodes them in the visitor's browser once and caches the result, or you prepare them ahead of time with
npx vidscroll encode. - No image sequences
- Use the MP4 or WebM you already have instead of exporting and loading a folder of frames. Image sequences still work when you need them.
- Content in sync
- Show text between two points, time captions to the footage, or drive any CSS from the scroll position, without writing scroll code.
- Loading handled
- A built-in loading screen with progress, a poster while the video loads, and clear console messages when a file is the problem.
- React and Next.js
- Components and hooks that work with server rendering. Give the video a
lengthand it has its final height from the start, so nothing below it jumps. - Or plain HTML
- A
<vid-scroll>element for any other page, installed from npm or loaded with one script tag.
Demos
Each one is built with the library and plain CSS.
A Small VigilA short poem over a cat watching the sunset. Lines rise in and dissolve one by one as you scroll, styled with nothing but CSS.
The CommuteA daydream in six scenes, framed like a film: an iris opening, subtitles timed in seconds, and chapters you can jump between while the video scrubs along.
Evening AlmanacLive readings that follow the sunset: the time, the sun's path, daylight left and the temperature, all computed from scroll position.
From a CDNTwo clips loaded from other websites, one with CORS and one without, each showing how the library ended up serving it.
In a pageTwo scroll videos placed between ordinary content. Each pins while you scroll through it, then the page carries on.- Without ReactA plain HTML page using the experimental <vid-scroll> custom element: sections as child elements, chapter buttons, no framework at all.