From e26e6c94be1e59660a4e3f4c7d8d8e06ca136d4e Mon Sep 17 00:00:00 2001 From: Jaume Sanchez Date: Mon, 27 Jul 2026 20:37:27 +0100 Subject: [PATCH] pages: serve the examples gallery at the site root for GitHub Pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Root index.html is now the gallery/landing page (links point into examples/…), so GitHub Pages serves it as the site index. - examples/index.html redirects to root, keeping old /examples/ links working. - .nojekyll so Pages serves ES modules (.mjs) untouched. Co-Authored-By: Claude Opus 4.8 --- .nojekyll | 0 examples/index.html | 454 ++------------------------------------------ index.html | 444 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 455 insertions(+), 443 deletions(-) create mode 100644 .nojekyll create mode 100644 index.html diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/examples/index.html b/examples/index.html index db90517..f1669bb 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,444 +1,12 @@ - - - CCapture — record canvas animations at a fixed framerate - - - - -
- CCapture · canvas capture, rebuilt for 2026 -

Record canvas animations
at a fixed framerate.

-

Your sketch renders as fast — or as slowly — as it needs to. - CCapture lies to it about what time it is, so the exported - video is perfectly smooth at exactly the framerate you asked for. 30, 60, 240 — - even a 4K frame that takes two seconds to draw.

-
- Browse examples ↓ - GitHub - Read the docs -
-
- -
- -
-

The least-intrusive API

-

One line in your render loop.

-
-
-

Make a recorder, start() it, and call - capture(canvas) once per frame. Drive motion from - performance.now() / the rAF timestamp like you already do — - CCapture warps that clock during capture so every frame lands on an exact - grid.

-
    -
  • No restructuring. No await, no fixed dt — drop it into the loop you have.
    • -
  • As fast as your machine. Capture is decoupled from wall-clock; it runs flat-out with bounded memory.
    • -
  • Self-finishing. Set a timeLimit or frameLimit and the file downloads itself.
    • -
-
-
-
sketch.js
-
import CCapture from "ccapture.js";
-
-const capturer = new CCapture({ format: "mp4", framerate: 60, timeLimit: 5 });
-capturer.start();
-
-function render() {
-  requestAnimationFrame(render);   // your normal loop
-  drawMyScene();                   // uses performance.now() — now warped
-  capturer.capture(canvas);        // ← the only line you add
-}
-render();
-
-
-
- - -
-

How it works

-

A virtual clock, and two halves you can use alone.

-

CCapture replaces the browser's notion of time with a clock that - advances one fixed step per captured frame — so anything driven by elapsed - time steps deterministically. It's three composable pieces:

-
-
- TimeWarp -

Owns time

-

Hooks performance.now, rAF, timers, Date and media - currentTime, advancing a virtual clock on demand. Knows nothing about canvases.

-
-
- FrameWrap -

Owns capture

-

Takes drawn frames, applies motion blur, enforces limits, and feeds a - pluggable encoder. Knows nothing about time.

-
-
- CCapture -

Plug & play

-

Composes the two and drives them — the unified recorder for the common - "record a live animation" case.

-
-
-
- - -
-

What's in the box

-

Modern encoders, real motion blur, sync.

-
-
-
-

WebCodecs, hardware-fast

-

MP4 (H.264/AV1) & WebM (VP9/VP8/AV1) via the browser's own encoder, - back-pressured so you run flat-out with bounded memory.

-
-
-
-

Motion blur, GPU or CPU

-

Averages N sub-frames per output frame — real shutter blur. Stays on the - GPU (WebGL2) when it can, no readback.

-
-
-
-

Any framerate, smooth

-

The virtual clock means a slow render still exports a flawless 30, 60 or - 240 fps file — no dropped or doubled frames.

-
-
-
-

Frame-accurate audio

-

Sample a track offline at each frame's exact time for visuals that line - up — and mux the audio right into the file.

-
-
-
-

Video, frame-stepped

-

Register a <video> and it seeks frame-by-frame in - lockstep — accurate, not a best-effort realtime grab.

-
-
-
-

Bring your own encoder

-

A tiny interface (frame-by-frame or batch) wraps anything — WASM codecs, - sprite sheets, an upload. Register it as a format.

-
-
-
-

ESM, UMD & TypeScript

-

Import as native modules with no build, drop in the <script> - global, or lean on the bundled .d.ts types.

-
-
-
-

Drop-in successor

-

Same start / capture / stop / save flow as CCapture 1.x, - rebuilt for today's browsers.

-
-
-
- - -
-

Formats

-

Pick an output; CCapture negotiates the codec.

-

Codec strings are probed at runtime and odd/resized frames are - fitted to a valid coded size. WebCodecs is the default path; WebM falls back - to a legacy writer where it's missing.

-
- mp4H.264 / AV1 · WebCodecs - webmVP9 / VP8 / AV1 · WebCodecs - gif256-color · gifenc - gif-hqgifski (opt-in) - pngTAR sequence · alpha - jpgTAR sequence - webpTAR sequence · alpha -
-
- - -
-

See it work

-

Examples

-

Every example uses the same drop-in panel — pick a format, - framerate and motion blur, then record. Serve over HTTP - (npm run serve) and open this page; ES modules need it.

- -

Frameworks

-
- -
-
WebGL

Three.js

-

A WebGL scene captured to a smooth fixed-rate MP4.

- - -
-
p5.js

p5.js

-

An ordinary p5 sketch — captured with one extra line.

- - -
-
GSAP

GSAP timeline

-

A GSAP timeline scrubbed by the warped clock.

- -
- -

Raw graphics

-
- -
-
Canvas 2D

Basic 2D

-

A plain 2D-canvas sketch — the simplest starting point.

- - -
-
WebGL2

Raw WebGL2

-

A no-framework fragment shader (GPU motion blur).

- - -
-
WebGPU

WebGPU

-

A WGSL shader, captured the very same way.

- -
- -

Media & audio

-
- -
-
Audio + shader

Music video

-

Audio-reactive shader, motion blur, audio muxed in.

- - -
-
Audio

Audio-reactive

-

Frame-accurate spectrum bars, with the audio muxed in.

- - -
-
Video

Video sync

-

Frame-stepping a <video> in lockstep with capture.

- - -
-
Video + Audio

Video + overlay

-

Upload a video; record an audio-reactive overlay on it.

- -
- -

Techniques & combos

-
- -
-
Perf

Heavy scene

-

A slow raymarcher captured smoothly — render cost doesn't matter.

- - -
-
240 fps

Slow motion

-

Capture a fast motion at 240 fps, retime for crisp slow-mo.

- - -
-
Custom encoder

Sprite sheet

-

A bring-your-own encoder that tiles frames into one PNG grid.

- - -
-
Alpha

Transparent

-

PNG/WebP sequence with a transparent background for compositing.

- - -
-
Low-level API

Lockstep split

-

Two canvases, one shared TimeWarp → two frame-synced files.

- - -
-
Reference

Minimal demo

-

The smallest possible capture loop, no UI.

- -
-
-
- -
- MP4/WebM need WebCodecs · serve over HTTP for ES modules - - Docs · - GitHub · - MIT © Jaume Sanchez Elias - -
+ + +CCapture — Examples + + + + + + +

The examples now live at the CCapture home page…

diff --git a/index.html b/index.html new file mode 100644 index 0000000..9a286ad --- /dev/null +++ b/index.html @@ -0,0 +1,444 @@ + + + CCapture — record canvas animations at a fixed framerate + + + + +
+ CCapture · canvas capture, rebuilt for 2026 +

Record canvas animations
at a fixed framerate.

+

Your sketch renders as fast — or as slowly — as it needs to. + CCapture lies to it about what time it is, so the exported + video is perfectly smooth at exactly the framerate you asked for. 30, 60, 240 — + even a 4K frame that takes two seconds to draw.

+
+ Browse examples ↓ + GitHub + Read the docs +
+
+ +
+ +
+

The least-intrusive API

+

One line in your render loop.

+
+
+

Make a recorder, start() it, and call + capture(canvas) once per frame. Drive motion from + performance.now() / the rAF timestamp like you already do — + CCapture warps that clock during capture so every frame lands on an exact + grid.

+
    +
  • No restructuring. No await, no fixed dt — drop it into the loop you have.
    • +
  • As fast as your machine. Capture is decoupled from wall-clock; it runs flat-out with bounded memory.
    • +
  • Self-finishing. Set a timeLimit or frameLimit and the file downloads itself.
    • +
+
+
+
sketch.js
+
import CCapture from "ccapture.js";
+
+const capturer = new CCapture({ format: "mp4", framerate: 60, timeLimit: 5 });
+capturer.start();
+
+function render() {
+  requestAnimationFrame(render);   // your normal loop
+  drawMyScene();                   // uses performance.now() — now warped
+  capturer.capture(canvas);        // ← the only line you add
+}
+render();
+
+
+
+ + +
+

How it works

+

A virtual clock, and two halves you can use alone.

+

CCapture replaces the browser's notion of time with a clock that + advances one fixed step per captured frame — so anything driven by elapsed + time steps deterministically. It's three composable pieces:

+
+
+ TimeWarp +

Owns time

+

Hooks performance.now, rAF, timers, Date and media + currentTime, advancing a virtual clock on demand. Knows nothing about canvases.

+
+
+ FrameWrap +

Owns capture

+

Takes drawn frames, applies motion blur, enforces limits, and feeds a + pluggable encoder. Knows nothing about time.

+
+
+ CCapture +

Plug & play

+

Composes the two and drives them — the unified recorder for the common + "record a live animation" case.

+
+
+
+ + +
+

What's in the box

+

Modern encoders, real motion blur, sync.

+
+
+
+

WebCodecs, hardware-fast

+

MP4 (H.264/AV1) & WebM (VP9/VP8/AV1) via the browser's own encoder, + back-pressured so you run flat-out with bounded memory.

+
+
+
+

Motion blur, GPU or CPU

+

Averages N sub-frames per output frame — real shutter blur. Stays on the + GPU (WebGL2) when it can, no readback.

+
+
+
+

Any framerate, smooth

+

The virtual clock means a slow render still exports a flawless 30, 60 or + 240 fps file — no dropped or doubled frames.

+
+
+
+

Frame-accurate audio

+

Sample a track offline at each frame's exact time for visuals that line + up — and mux the audio right into the file.

+
+
+
+

Video, frame-stepped

+

Register a <video> and it seeks frame-by-frame in + lockstep — accurate, not a best-effort realtime grab.

+
+
+
+

Bring your own encoder

+

A tiny interface (frame-by-frame or batch) wraps anything — WASM codecs, + sprite sheets, an upload. Register it as a format.

+
+
+
+

ESM, UMD & TypeScript

+

Import as native modules with no build, drop in the <script> + global, or lean on the bundled .d.ts types.

+
+
+
+

Drop-in successor

+

Same start / capture / stop / save flow as CCapture 1.x, + rebuilt for today's browsers.

+
+
+
+ + +
+

Formats

+

Pick an output; CCapture negotiates the codec.

+

Codec strings are probed at runtime and odd/resized frames are + fitted to a valid coded size. WebCodecs is the default path; WebM falls back + to a legacy writer where it's missing.

+
+ mp4H.264 / AV1 · WebCodecs + webmVP9 / VP8 / AV1 · WebCodecs + gif256-color · gifenc + gif-hqgifski (opt-in) + pngTAR sequence · alpha + jpgTAR sequence + webpTAR sequence · alpha +
+
+ + +
+

See it work

+

Examples

+

Every example uses the same drop-in panel — pick a format, + framerate and motion blur, then record. Serve over HTTP + (npm run serve) and open this page; ES modules need it.

+ +

Frameworks

+
+ +
+
WebGL

Three.js

+

A WebGL scene captured to a smooth fixed-rate MP4.

+ + +
+
p5.js

p5.js

+

An ordinary p5 sketch — captured with one extra line.

+ + +
+
GSAP

GSAP timeline

+

A GSAP timeline scrubbed by the warped clock.

+ +
+ +

Raw graphics

+
+ +
+
Canvas 2D

Basic 2D

+

A plain 2D-canvas sketch — the simplest starting point.

+ + +
+
WebGL2

Raw WebGL2

+

A no-framework fragment shader (GPU motion blur).

+ + +
+
WebGPU

WebGPU

+

A WGSL shader, captured the very same way.

+ +
+ +

Media & audio

+
+ +
+
Audio + shader

Music video

+

Audio-reactive shader, motion blur, audio muxed in.

+ + +
+
Audio

Audio-reactive

+

Frame-accurate spectrum bars, with the audio muxed in.

+ + +
+
Video

Video sync

+

Frame-stepping a <video> in lockstep with capture.

+ + +
+
Video + Audio

Video + overlay

+

Upload a video; record an audio-reactive overlay on it.

+ +
+ +

Techniques & combos

+
+ +
+
Perf

Heavy scene

+

A slow raymarcher captured smoothly — render cost doesn't matter.

+ + +
+
240 fps

Slow motion

+

Capture a fast motion at 240 fps, retime for crisp slow-mo.

+ + +
+
Custom encoder

Sprite sheet

+

A bring-your-own encoder that tiles frames into one PNG grid.

+ + +
+
Alpha

Transparent

+

PNG/WebP sequence with a transparent background for compositing.

+ + +
+
Low-level API

Lockstep split

+

Two canvases, one shared TimeWarp → two frame-synced files.

+ + +
+
Reference

Minimal demo

+

The smallest possible capture loop, no UI.

+ +
+
+
+ + +