Flythrough is a scroll-scrubbed video component for Framer that tells one story across several clips. Each chapter is pinned to your page's own sections: from #approach to #threshold the visitor scrubs through clip 1, from #inside to #light through clip 2, and so on. Between clips a scroll-linked crossfade hands one video to the next, so a long camera move can be built from short clips. A chapter rail shows where the visitor is and jumps to any chapter. The demo is a five-chapter walk at golden hour up to a timber-clad house, through the door and out to a pool and the view at sunset.

Encode: run the free flythrough-encode.sh script on each clip. It writes a keyframe every 6 frames, so every seek stays short, plus an optional 720 × 1280 phone version and a poster

Add clips: put each video (upload or URL), its portrait phone version and a poster into Clips

Pin chapters to sections: give each chapter a clip number, a From and To section id (or a % in Section mode) and the seconds it should cover

Page mode: a fixed layer behind your sections. Section mode: a pinned block of its own, with From and To in %

Chapters: clip, From → To, Start → End seconds, Label, Ease (Linear or Ease In Out), and a Still image for reduced motion. Several chapters can share one clip

Scroll-linked crossfade: the next clip fades in as you scroll across the chapter boundary, over a distance you set (Fade, px). Scroll back and it fades back

Smoothing: the video time is eased toward the scroll position (ms, 0 = direct). Page scroll itself is not hijacked, so anchor links, Framer scroll effects and the keyboard keep working

Trigger: where the playhead sits in the viewport (50% = the middle)

Chapter rail: left, right, bottom or off. Each chapter is a button with its label and a progress ring; click it (or Tab to it and press Enter) to jump there. On phones it becomes a compact bar under the nav. Colours, font and offset are controls

Phones: below the Mobile Breakpoint each clip switches to its Mobile Video and Mobile Poster

Fit (Cover or Contain), Focus X/Y, Tint over the video, Radius, Background

Keyframe Check (canvas only): with Show Warnings on, the canvas measures how fast each clip seeks and labels it Smooth, OK or Re-encode, with setup warnings. It never shows on the live site

Preview slider to scrub the canvas through the chapters while you design

At most two videos load a source at once; clips further along wait until they are next. The engine runs only while the layer is near the viewport and the tab is visible

Flythrough Loop: a lazy ambient loop for the quiet sections between chapters. It loads only when near the viewport (Load Margin), plays while in view and pauses outside

flythrough-encode.sh (free, ffmpeg): keyframe every N frames, --max-smooth (a keyframe on every frame), --mobile portrait crop or a separate portrait source, posters, image-sequence input, --reverse for the experimental Glide engine. Handbrake settings are on the guide page for people who prefer an app

The demo site: home with the five-chapter flythrough, a How it works section with the chapter table and every control, an /encode guide with the script, the measured seek table, a 404 page, and desktop, tablet and phone layouts

Ordinary export: 1.53 MB, median seek 24–29 ms, Keyframe Check says Re-encode

flythrough-encode.sh (keyframe every 6 frames): 2.07 MB, 7 ms, Smooth

flythrough-encode.sh --max-smooth: 5.18 MB, 7–9 ms, Smooth

Clips must be re-encoded with frequent keyframes, or scrubbing jumps. The free encode script does it in one line; Keyframe Check on the canvas tells you if a file still needs it

Expect about 1.6–4.9 MB per 1080p clip after encoding, depending on length and the keyframe setting

iPhone and iPad scrubbing is not frame-perfect: Safari seeks slower than desktop browsers, so the picture can lag behind a fast flick

The Glide engine (plays toward the target instead of seeking, needs Reverse clips) is experimental and off by default. Auto uses Seek

Video only, H.264 MP4. No image sequences, and no audio: clips play muted

Visitors who ask for reduced motion see the chapter stills or posters, crossfading per chapter, instead of video

Text is not part of the video. Your copy lives in normal Framer sections over the layer, so it stays selectable, translatable and indexable

In Page mode the layer fades out as the section after the last chapter enters the viewport

The demo footage is our own Blender render of a made-up house, and it is included in the remix. The studio and figures in the demo are made up

Place the Flythrough layer right after your nav so keyboard users reach the rail after the nav

Rail uses the Popover API; older browsers use a fallback