xiry.

Development · Web app

webcodecs-scroll-sync

Synchronize video playback to page scroll using the WebCodecs API

From the Xiry library · Updated 10 October 2026

Visit github.com ↗

An open-source reference implementation that uses the browser's native WebCodecs API and mediabunny to decode video frames directly to a canvas tied to scroll position. It bypasses standard HTML video tag playback issues to enable smooth forward and reverse frame seeking on landing pages. Includes a framework-agnostic decoder class and an example React canvas component.

What it's for

  • Build high-performance scroll-driven video backgrounds for landing hero sections
  • Decode and seek MP4 frames smoothly in both forward and reverse directions without standard HTML video lag
  • Render synchronized video frames onto an HTML Canvas 2D context based on user interactions

Features

  • Hardware-accelerated video decoding via the browser WebCodecs API
  • In-browser container demuxing using mediabunny
  • Fast frame lookup using binary search algorithms
  • Dynamic frame buffering and automatic cleanup of unused video frames
  • Optimized bidirectional seeking for forward and backward scrolling
  • Example React component alongside framework-agnostic vanilla TypeScript integration

Pricing

Open source. Free, MIT licensed

Details

Type
Web app
Category
Development
Topic
Frontend Animation
Open source
Yes
Platforms
Web, Code library
For
Creative frontend developers and web designers building interactive hero animations
Alternative to
scrollytelling video players, HTML5 video element scrubbing
Tags
webcodecs, canvas, scrollytelling, video, react, typescript

Why it was saved

  • @konstipaulus, 10 August 2025: A working reference for scroll-synced WebCodecs hero video on landing pages.

Related

Updated