# webcodecs-scroll-sync

> Synchronize video playback to page scroll using the WebCodecs API

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.

Website: https://github.com/diffusionstudio/webcodecs-scroll-sync

## What it is 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](https://xiry.app/topics/development.md)
- 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](https://x.com/konstipaulus/status/1954539977812980030): A working reference for scroll-synced WebCodecs hero video on landing pages.

## Related

- [Mediabunny](https://xiry.app/resources/mediabunny): Fast, dependency-free JavaScript media toolkit for browser-based video and audio processing (Web app, Open source)
- [@remotion/webcodecs](https://xiry.app/resources/remotion-webcodecs): In-browser video and audio conversion library powered by the WebCodecs API. (Web app, Freemium)
- [Apple-Style Scroll-Driven Canvas Animation Pipeline](https://xiry.app/resources/apple-style-scroll-driven-canvas-animation-pipeline): A workflow for building high-performance scroll-scrubbed canvas animations using WebP frames. (Tip, Free)
- [assistant-ui](https://xiry.app/resources/assistant-ui): Open-source TypeScript and React component library for building AI chat interfaces (Web app, Open source)
- [bazza/ui Data Table Filter](https://xiry.app/resources/bazza-ui-data-table-filter): Linear-style data table filtering component for React, shadcn/ui, and TanStack Table (Web app, Open source)
- [Better Upload](https://xiry.app/resources/better-upload): Open-source file upload library for React connecting to S3-compatible storage (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/webcodecs-scroll-sync

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.