CCapture.js is a library to capture canvas-based animations at a fixed framerate.
The library solves the problem of recording smooth, deterministic video from animations that render at variable speeds. It works by replacing the browser's internal clock with a virtual clock that advances only when a frame is captured, decoupling animation timing from wall-clock time. This means an animation that takes two seconds to render a single frame will still produce a video at your specified framerate—30fps, 60fps, 240fps, or any rate you choose. The library is built from two composable pieces: TimeWarp, which controls time by hooking performance.now, requestAnimationFrame, setTimeout, setInterval, Date, and media currentTime; and FrameWrap, which handles canvas capture, applies motion blur, and feeds frames to pluggable encoders. CCapture combines both for a complete recording solution.
Developers should choose this tool when they need to export canvas animations as video files with guaranteed smooth playback regardless of render performance. It suits generative art, data visualizations, and any canvas-based animation where deterministic output matters more than real-time interaction. The library offers a minimal API—a single capture call inside an existing render loop—requiring no restructuring of animation code. It supports multiple output formats through pluggable encoders and includes built-in motion blur. The README distinguishes this as a ground-up rewrite of an earlier version, featuring ES modules, WebCodecs support, GPU motion blur, and async/await patterns.
The project shows active maintenance with regular commits addressing bug fixes and feature improvements. Development includes responsiveness to user-reported issues with timely resolution. The codebase maintains comprehensive documentation covering setup, API usage, and migration from earlier versions. TypeScript declarations are included for full type-checking support without requiring separate type packages.
