Scroll Video (Frames) free

Plays a video as the visitor scrolls, either as a pinned full-width scene or inside a single card. Works from numbered frames.

Scroll inside the preview to try it.

Customize

Picture address, with {n} where the frame number goes. Example: /frames/frame_{n}.webp

Text over the pictures (leave empty for none)

Progress bar colour

How many pictures you have

Number of your first picture (0 or 1 usually)

Zero padding. 3 turns frame 7 into 007

Section mode: how long the scene lasts (% of screen height)

Card mode: card height (px)

Card mode: corner roundness (px)

Easing. Lower is silkier, 1 follows the scroll exactly

section = pinned full-width scene, card = a framed card

cover fills the frame, contain shows the whole picture

Thin progress bar along the bottom

import ScrollFrames from './ScrollFrames';

<ScrollFrames />

Checking your access…

Dependencies: none