From 931e7c1ea9439efa21e7c53b598494a3f7a09ee9 Mon Sep 17 00:00:00 2001
From: LONTSI TIOTSOP CEDRIC <lontsi05@gmail.com>
Date: Fri, 3 Jul 2026 20:32:04 +0100
Subject: [PATCH] feat(browser-export): 100% client-side MP4/WebM export via
 WebCodecs (mediabunny)

New @hyperframes/browser-export package (discussion in #1661):
deterministic quantized GSAP seeks (producer parity contract), SVG
foreignObject rasterization (html-to-image), OfflineAudioContext mix of
data-start/data-duration audio clips, WebCodecs encoding via mediabunny
(avc+aac MP4, vp9+opus WebM). Browser-only tsup build (platform:
"browser" compile-time guarantee), 26 unit tests on the pure logic,
docs page + build-order registration.
---
 bun.lock                                      |  45 ++++--
 docs/docs.json                                |   1 +
 docs/packages/browser-export.mdx              |  66 ++++++++
 package.json                                  |   2 +-
 packages/browser-export/README.md             |  54 +++++++
 packages/browser-export/package.json          |  56 +++++++
 .../browser-export/src/audioClips.test.ts     |  56 +++++++
 packages/browser-export/src/audioClips.ts     |  56 +++++++
 packages/browser-export/src/audioMix.ts       |  73 +++++++++
 packages/browser-export/src/codecs.test.ts    |  50 ++++++
 packages/browser-export/src/codecs.ts         |  17 ++
 .../src/compositionMeta.test.ts               |  53 +++++++
 .../browser-export/src/compositionMeta.ts     |  32 ++++
 packages/browser-export/src/download.ts       |  17 ++
 packages/browser-export/src/encoder.ts        |  70 +++++++++
 packages/browser-export/src/exporter.ts       | 145 ++++++++++++++++++
 packages/browser-export/src/frameCapture.ts   |  41 +++++
 .../browser-export/src/frameTiming.test.ts    |  30 ++++
 packages/browser-export/src/frameTiming.ts    |  19 +++
 packages/browser-export/src/index.ts          |  21 +++
 packages/browser-export/src/mediaSeek.ts      |  45 ++++++
 .../browser-export/src/timelineSeek.test.ts   |  68 ++++++++
 packages/browser-export/src/timelineSeek.ts   |  57 +++++++
 packages/browser-export/src/types.ts          |  45 ++++++
 packages/browser-export/tsconfig.json         |  19 +++
 packages/browser-export/tsup.config.ts        |  18 +++
 26 files changed, 1142 insertions(+), 14 deletions(-)
 create mode 100644 docs/packages/browser-export.mdx
 create mode 100644 packages/browser-export/README.md
 create mode 100644 packages/browser-export/package.json
 create mode 100644 packages/browser-export/src/audioClips.test.ts
 create mode 100644 packages/browser-export/src/audioClips.ts
 create mode 100644 packages/browser-export/src/audioMix.ts
 create mode 100644 packages/browser-export/src/codecs.test.ts
 create mode 100644 packages/browser-export/src/codecs.ts
 create mode 100644 packages/browser-export/src/compositionMeta.test.ts
 create mode 100644 packages/browser-export/src/compositionMeta.ts
 create mode 100644 packages/browser-export/src/download.ts
 create mode 100644 packages/browser-export/src/encoder.ts
 create mode 100644 packages/browser-export/src/exporter.ts
 create mode 100644 packages/browser-export/src/frameCapture.ts
 create mode 100644 packages/browser-export/src/frameTiming.test.ts
 create mode 100644 packages/browser-export/src/frameTiming.ts
 create mode 100644 packages/browser-export/src/index.ts
 create mode 100644 packages/browser-export/src/mediaSeek.ts
 create mode 100644 packages/browser-export/src/timelineSeek.test.ts
 create mode 100644 packages/browser-export/src/timelineSeek.ts
 create mode 100644 packages/browser-export/src/types.ts
 create mode 100644 packages/browser-export/tsconfig.json
 create mode 100644 packages/browser-export/tsup.config.ts

diff --git a/bun.lock b/bun.lock
index cac1f849d6..4a86d91418 100644
--- a/bun.lock
+++ b/bun.lock
@@ -22,7 +22,7 @@
     },
     "packages/aws-lambda": {
       "name": "@hyperframes/aws-lambda",
-      "version": "0.7.22",
+      "version": "0.7.26",
       "dependencies": {
         "@aws-sdk/client-s3": "^3.700.0",
         "@aws-sdk/client-sfn": "^3.700.0",
@@ -52,9 +52,24 @@
         "constructs",
       ],
     },
+    "packages/browser-export": {
+      "name": "@hyperframes/browser-export",
+      "version": "0.7.26",
+      "dependencies": {
+        "html-to-image": "^1.11.13",
+        "mediabunny": "^1.45.3",
+      },
+      "devDependencies": {
+        "@types/node": "^25.0.10",
+        "linkedom": "^0.18.12",
+        "tsup": "^8.0.0",
+        "typescript": "^5.0.0",
+        "vitest": "^3.2.4",
+      },
+    },
     "packages/cli": {
       "name": "@hyperframes/cli",
-      "version": "0.7.22",
+      "version": "0.7.26",
       "bin": {
         "hyperframes": "./dist/cli.js",
       },
@@ -103,7 +118,7 @@
     },
     "packages/core": {
       "name": "@hyperframes/core",
-      "version": "0.7.22",
+      "version": "0.7.26",
       "dependencies": {
         "@chenglou/pretext": "^0.0.5",
         "@hyperframes/lint": "workspace:*",
@@ -128,7 +143,7 @@
     },
     "packages/engine": {
       "name": "@hyperframes/engine",
-      "version": "0.7.22",
+      "version": "0.7.26",
       "dependencies": {
         "@hono/node-server": "^1.13.0",
         "@hyperframes/core": "workspace:^",
@@ -146,7 +161,7 @@
     },
     "packages/gcp-cloud-run": {
       "name": "@hyperframes/gcp-cloud-run",
-      "version": "0.7.22",
+      "version": "0.7.26",
       "dependencies": {
         "@google-cloud/storage": "^7.14.0",
         "@google-cloud/workflows": "^4.2.0",
@@ -166,7 +181,7 @@
     },
     "packages/lint": {
       "name": "@hyperframes/lint",
-      "version": "0.7.22",
+      "version": "0.7.26",
       "dependencies": {
         "@hyperframes/parsers": "workspace:*",
         "linkedom": "^0.18.12",
@@ -182,7 +197,7 @@
     },
     "packages/parsers": {
       "name": "@hyperframes/parsers",
-      "version": "0.7.22",
+      "version": "0.7.26",
       "dependencies": {
         "@babel/parser": "^7.27.0",
         "acorn": "^8.17.0",
@@ -202,7 +217,7 @@
     },
     "packages/player": {
       "name": "@hyperframes/player",
-      "version": "0.7.22",
+      "version": "0.7.26",
       "dependencies": {
         "@hyperframes/core": "workspace:*",
       },
@@ -217,7 +232,7 @@
     },
     "packages/producer": {
       "name": "@hyperframes/producer",
-      "version": "0.7.22",
+      "version": "0.7.26",
       "dependencies": {
         "@fontsource/archivo-black": "^5.2.8",
         "@fontsource/eb-garamond": "^5.2.7",
@@ -261,7 +276,7 @@
     },
     "packages/sdk": {
       "name": "@hyperframes/sdk",
-      "version": "0.7.22",
+      "version": "0.7.26",
       "dependencies": {
         "@hyperframes/core": "workspace:*",
         "@hyperframes/parsers": "workspace:*",
@@ -288,7 +303,7 @@
     },
     "packages/shader-transitions": {
       "name": "@hyperframes/shader-transitions",
-      "version": "0.7.22",
+      "version": "0.7.26",
       "dependencies": {
         "html2canvas": "^1.4.1",
       },
@@ -300,7 +315,7 @@
     },
     "packages/studio": {
       "name": "@hyperframes/studio",
-      "version": "0.7.22",
+      "version": "0.7.26",
       "dependencies": {
         "@codemirror/autocomplete": "^6.20.1",
         "@codemirror/commands": "^6.10.3",
@@ -348,7 +363,7 @@
     },
     "packages/studio-server": {
       "name": "@hyperframes/studio-server",
-      "version": "0.7.22",
+      "version": "0.7.26",
       "dependencies": {
         "@hyperframes/core": "workspace:*",
         "@hyperframes/parsers": "workspace:*",
@@ -715,6 +730,8 @@
 
     "@hyperframes/aws-lambda": ["@hyperframes/aws-lambda@workspace:packages/aws-lambda"],
 
+    "@hyperframes/browser-export": ["@hyperframes/browser-export@workspace:packages/browser-export"],
+
     "@hyperframes/cli": ["@hyperframes/cli@workspace:packages/cli"],
 
     "@hyperframes/core": ["@hyperframes/core@workspace:packages/core"],
@@ -1589,6 +1606,8 @@
 
     "html-escaper": ["html-escaper@3.0.3", "", {}, "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ=="],
 
+    "html-to-image": ["html-to-image@1.11.13", "", {}, "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg=="],
+
     "html2canvas": ["html2canvas@1.4.1", "", { "dependencies": { "css-line-break": "^2.1.0", "text-segmentation": "^1.0.3" } }, "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA=="],
 
     "htmlparser2": ["htmlparser2@10.1.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", "domutils": "^3.2.2", "entities": "^7.0.1" } }, "sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ=="],
diff --git a/docs/docs.json b/docs/docs.json
index 9e6829eb40..708ce13b81 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -325,6 +325,7 @@
               "packages/core",
               "packages/parsers",
               "packages/lint",
+              "packages/browser-export",
               "packages/studio-server",
               "packages/sdk",
               "packages/engine",
diff --git a/docs/packages/browser-export.mdx b/docs/packages/browser-export.mdx
new file mode 100644
index 0000000000..0612e6fe9a
--- /dev/null
+++ b/docs/packages/browser-export.mdx
@@ -0,0 +1,66 @@
+---
+title: "@hyperframes/browser-export"
+description: "Render a composition to MP4/WebM entirely in the browser — no server, no FFmpeg, no headless Chrome."
+---
+
+`@hyperframes/browser-export` renders a **live** composition to video fully client-side: deterministic GSAP seeks, SVG `foreignObject` rasterization and WebCodecs encoding via [mediabunny](https://mediabunny.dev).
+
+```bash
+npm install @hyperframes/browser-export
+```
+
+## When to Use
+
+<Tip>
+  Reach for this package when running Node.js, FFmpeg or headless Chrome is not viable: browser-based editors, template SaaS frontends, quick previews and one-off exports delivered straight to the user's Downloads folder.
+</Tip>
+
+<Info>
+  This is a **complement** to `@hyperframes/producer`, not a replacement. The producer's headless-Chrome + FFmpeg pipeline remains the reference for deterministic, pixel-perfect production renders.
+</Info>
+
+## Quick Start
+
+```typescript
+import { exportComposition, downloadExport } from "@hyperframes/browser-export";
+
+const result = await exportComposition(document, {
+  fps: 30,
+  format: "mp4", // or "webm"
+  onProgress: ({ phase, fraction }) => {
+    console.log(`${phase}: ${(fraction * 100).toFixed(0)}%`);
+  },
+});
+
+downloadExport(result); // "<composition-id>.mp4"
+```
+
+The composition must be live in the current page (or a same-origin iframe document): GSAP timelines registered in `window.__timelines`, a root element carrying `data-composition-id` / `data-width` / `data-height`.
+
+## Pipeline
+
+1. **Plan** — locate the composition root, read dimensions, resolve the duration from the master timeline (or `options.duration`).
+2. **Audio** — parse `<audio>`/`<video>` clip metadata (`data-start`, `data-duration`/`data-end`, `data-media-start`, `data-volume`), decode and mix offline with `OfflineAudioContext`.
+3. **Video** — per frame: pause + seek every registered timeline at the quantized frame time (`Math.round(t·fps)/fps`, the producer's parity contract), await `<video>` layer seeks, rasterize the root to a canvas.
+4. **Encode** — WebCodecs via mediabunny (`avc`+`aac` in MP4, `vp9`+`opus` in WebM), finalized into a downloadable `Blob`.
+
+## API
+
+| Export | Description |
+| --- | --- |
+| `exportComposition(target, options?)` | Full pipeline → `ExportResult` |
+| `downloadExport(result, filename?)` | Trigger a client-side download |
+| `collectAudioClips(scope)`, `mixAudioClips(clips, duration)` | Audio pipeline pieces |
+| `seekTimelines(registry, t, fps)`, `quantizeTimeToFrame(t, fps)` | Deterministic seek pieces |
+| `findCompositionRoot(scope)`, `readCompositionMeta(root)` | Composition discovery |
+
+**`ExportOptions`:** `fps` (default 30), `format` (`"mp4"` \| `"webm"`), `duration`, `videoBitrate`, `audioBitrate`, `includeAudio`, `pixelRatio`, `keyFrameIntervalSeconds`, `signal`, `onProgress`.
+
+**`ExportResult`:** `blob`, `mimeType`, `width`, `height`, `fps`, `durationSeconds`, `frameCount`, `compositionId`.
+
+## Limitations
+
+- Requires WebCodecs (Chrome/Edge 94+, Safari 16.4+, Firefox 130+).
+- SVG `foreignObject` rasterization: cross-origin images and fonts must be CORS-readable; some CSS features (e.g. `backdrop-filter`) may differ from a real Chrome screenshot.
+- `<video>` layers are frame-aligned via async seeks with a 500 ms guard — long-GOP sources may land on the nearest decodable frame.
+- Rendering happens on the main thread; a 30 s / 30 fps export is ~900 sequential rasterizations.
diff --git a/package.json b/package.json
index 33b4b16ce2..44e98c0f09 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   "type": "module",
   "scripts": {
     "dev": "bun run studio",
-    "build": "bun run --filter '@hyperframes/{parsers,lint,studio-server}' build && bun run --filter @hyperframes/core build && bun run --filter '@hyperframes/{core,engine,producer,player,studio,shader-transitions,aws-lambda,gcp-cloud-run,sdk}' build && bun run --filter @hyperframes/cli build",
+    "build": "bun run --filter '@hyperframes/{parsers,lint,studio-server,browser-export}' build && bun run --filter @hyperframes/core build && bun run --filter '@hyperframes/{core,engine,producer,player,studio,shader-transitions,aws-lambda,gcp-cloud-run,sdk}' build && bun run --filter @hyperframes/cli build",
     "build:producer": "bun run --filter @hyperframes/producer build",
     "studio": "bun run --filter @hyperframes/studio dev",
     "build:hyperframes-runtime": "bun run --filter @hyperframes/core build:hyperframes-runtime",
diff --git a/packages/browser-export/README.md b/packages/browser-export/README.md
new file mode 100644
index 0000000000..ebcc90aa9d
--- /dev/null
+++ b/packages/browser-export/README.md
@@ -0,0 +1,54 @@
+# @hyperframes/browser-export
+
+Render a HyperFrames composition to MP4/WebM **entirely in the browser** — no server, no FFmpeg, no headless Chrome (upstream discussion: heygen-com/hyperframes#1661).
+
+Frames are sampled with the same quantized deterministic seek the producer uses, rasterized via SVG `foreignObject` ([html-to-image](https://github.com/bubkoo/html-to-image)) and encoded with WebCodecs through [mediabunny](https://mediabunny.dev).
+
+```bash
+npm install @hyperframes/browser-export
+```
+
+## Quick start
+
+```ts
+import { exportComposition, downloadExport } from "@hyperframes/browser-export";
+
+// The composition must be live in the page (or a same-origin iframe document):
+// GSAP timelines registered in window.__timelines, root carrying
+// data-composition-id / data-width / data-height.
+const result = await exportComposition(document, {
+  fps: 30,
+  format: "mp4", // or "webm"
+  onProgress: ({ phase, fraction }) => console.log(`${phase} ${(fraction * 100).toFixed(0)}%`),
+});
+
+downloadExport(result); // "<composition-id>.mp4"
+```
+
+## How it works
+
+1. **Plan** — finds the composition root (`[data-composition-id]` or `#root`), reads dimensions, resolves the duration from the master GSAP timeline in `window.__timelines` (or `options.duration`).
+2. **Audio** — parses `<audio>`/`<video>` elements (`data-start`, `data-duration`/`data-end`, `data-media-start`, `data-volume` — the producer's contract), decodes them and mixes offline with `OfflineAudioContext` into one track.
+3. **Video** — for each frame: pause + seek every registered timeline at the quantized frame time (`Math.round(t·fps)/fps`, the producer's parity contract), await `<video>` layer seeks, rasterize the root to a canvas, hand the canvas frame to mediabunny's `CanvasSource`.
+4. **Encode** — WebCodecs via mediabunny (`avc`+`aac` in MP4, `vp9`+`opus` in WebM), finalized into a `Blob`.
+
+## API
+
+| Export                                                            | Description                                                                                                       |
+| ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `exportComposition(target, options?)`                             | Full pipeline → `ExportResult { blob, mimeType, width, height, fps, durationSeconds, frameCount, compositionId }` |
+| `downloadExport(result, filename?)`                               | Trigger a client-side download                                                                                    |
+| `collectAudioClips(scope)` / `mixAudioClips(clips, duration)`     | Audio pipeline pieces                                                                                             |
+| `seekTimelines(registry, t, fps)` / `quantizeTimeToFrame(t, fps)` | Deterministic seek pieces                                                                                         |
+| `findCompositionRoot(scope)` / `readCompositionMeta(root)`        | Composition discovery                                                                                             |
+
+`ExportOptions`: `fps` (30), `format` ("mp4"), `duration`, `videoBitrate`, `audioBitrate`, `includeAudio` (true), `pixelRatio` (1), `keyFrameIntervalSeconds` (2), `signal`, `onProgress`.
+
+## Limitations (vs the server producer)
+
+This pipeline **complements** `@hyperframes/producer` — it does not replace it. The producer remains the reference for deterministic, pixel-perfect renders.
+
+- Requires WebCodecs (Chrome/Edge 94+, Safari 16.4+, Firefox 130+).
+- SVG `foreignObject` rasterization: cross-origin images/fonts must be CORS-readable; some exotic CSS (e.g. backdrop-filter) may differ from a real Chrome screenshot.
+- `<video>` layers are frame-aligned via async seeks with a 500 ms guard — long-GOP sources may land on the nearest decodable frame.
+- Rendering happens on the main thread; a 30 s / 30 fps export is ~900 sequential rasterizations.
diff --git a/packages/browser-export/package.json b/packages/browser-export/package.json
new file mode 100644
index 0000000000..5cd75252d6
--- /dev/null
+++ b/packages/browser-export/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "@hyperframes/browser-export",
+  "version": "0.7.26",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/heygen-com/hyperframes",
+    "directory": "packages/browser-export"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "browser": "./src/index.ts",
+      "bun": "./src/index.ts",
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      ".": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      },
+      "./package.json": "./package.json"
+    },
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "echo skip"
+  },
+  "dependencies": {
+    "html-to-image": "^1.11.13",
+    "mediabunny": "^1.45.3"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.10",
+    "linkedom": "^0.18.12",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^3.2.4"
+  }
+}
diff --git a/packages/browser-export/src/audioClips.test.ts b/packages/browser-export/src/audioClips.test.ts
new file mode 100644
index 0000000000..ffbac80283
--- /dev/null
+++ b/packages/browser-export/src/audioClips.test.ts
@@ -0,0 +1,56 @@
+import { parseHTML } from "linkedom";
+import { describe, expect, it } from "vitest";
+import { collectAudioClips } from "./audioClips.js";
+
+function doc(html: string): Document {
+  return parseHTML(`<html><body>${html}</body></html>`).document as unknown as Document;
+}
+
+describe("collectAudioClips", () => {
+  it("parses data-start / data-duration / data-media-start / data-volume", () => {
+    const document = doc(
+      `<audio src="music.mp3" data-start="2.5" data-duration="10" data-media-start="1" data-volume="0.8"></audio>`,
+    );
+    expect(collectAudioClips(document)).toEqual([
+      { src: "music.mp3", start: 2.5, duration: 10, mediaStart: 1, volume: 0.8 },
+    ]);
+  });
+
+  it("derives duration from data-end", () => {
+    const document = doc(`<audio src="voice.mp3" data-start="3" data-end="8"></audio>`);
+    expect(collectAudioClips(document)[0]?.duration).toBe(5);
+  });
+
+  it("defaults start/mediaStart to 0, volume to 1 and duration to null", () => {
+    const document = doc(`<audio src="bed.mp3"></audio>`);
+    expect(collectAudioClips(document)).toEqual([
+      { src: "bed.mp3", start: 0, duration: null, mediaStart: 0, volume: 1 },
+    ]);
+  });
+
+  it("includes video elements as audio sources", () => {
+    const document = doc(
+      `<video src="clip.mp4" data-start="1"></video><audio src="a.mp3"></audio>`,
+    );
+    expect(collectAudioClips(document).map((clip) => clip.src)).toEqual(["clip.mp4", "a.mp3"]);
+  });
+
+  it("skips muted and zero-volume elements", () => {
+    const document = doc(
+      `<audio src="m.mp3" muted></audio><video src="v.mp4" data-volume="0"></video>`,
+    );
+    expect(collectAudioClips(document)).toEqual([]);
+  });
+
+  it("clamps volume into [0, 1] and negative starts to 0", () => {
+    const document = doc(`<audio src="loud.mp3" data-volume="3" data-start="-2"></audio>`);
+    expect(collectAudioClips(document)).toEqual([
+      { src: "loud.mp3", start: 0, duration: null, mediaStart: 0, volume: 1 },
+    ]);
+  });
+
+  it("ignores elements without src", () => {
+    const document = doc(`<audio data-start="1"></audio>`);
+    expect(collectAudioClips(document)).toEqual([]);
+  });
+});
diff --git a/packages/browser-export/src/audioClips.ts b/packages/browser-export/src/audioClips.ts
new file mode 100644
index 0000000000..2d7ce4ba06
--- /dev/null
+++ b/packages/browser-export/src/audioClips.ts
@@ -0,0 +1,56 @@
+/**
+ * Audio clip metadata parsed from <audio>/<video> elements — the same
+ * data-start / data-duration / data-media-start / data-volume contract the
+ * producer's audioExtractor reads before building its FFmpeg filter graph.
+ */
+export interface AudioClip {
+  src: string;
+  start: number;
+  /** Playback window in seconds; null = play the remainder of the file. */
+  duration: number | null;
+  /** Offset into the media file (trim start), in seconds. */
+  mediaStart: number;
+  /** Gain in [0, 1]. */
+  volume: number;
+}
+
+function parseNumber(value: string | null): number | null {
+  const parsed = value == null ? Number.NaN : Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function clampVolume(value: number | null): number {
+  if (value == null) return 1;
+  return Math.min(1, Math.max(0, value));
+}
+
+function resolveDuration(element: Element, start: number): number | null {
+  const explicit = parseNumber(element.getAttribute("data-duration"));
+  if (explicit != null) return Math.max(0, explicit);
+  const end = parseNumber(element.getAttribute("data-end"));
+  return end != null ? Math.max(0, end - start) : null;
+}
+
+function clipFromElement(element: Element): AudioClip | null {
+  const src = element.getAttribute("src");
+  if (!src) return null;
+  const volume = clampVolume(parseNumber(element.getAttribute("data-volume")));
+  if (volume <= 0 || element.hasAttribute("muted")) return null;
+  const start = Math.max(0, parseNumber(element.getAttribute("data-start")) ?? 0);
+  return {
+    src,
+    start,
+    duration: resolveDuration(element, start),
+    mediaStart: Math.max(0, parseNumber(element.getAttribute("data-media-start")) ?? 0),
+    volume,
+  };
+}
+
+export function collectAudioClips(scope: ParentNode): AudioClip[] {
+  const clips: AudioClip[] = [];
+  for (const element of Array.from(scope.querySelectorAll("audio[src], video[src]"))) {
+    const clip = clipFromElement(element);
+    if (clip) clips.push(clip);
+  }
+  return clips;
+}
diff --git a/packages/browser-export/src/audioMix.ts b/packages/browser-export/src/audioMix.ts
new file mode 100644
index 0000000000..5065ef1b12
--- /dev/null
+++ b/packages/browser-export/src/audioMix.ts
@@ -0,0 +1,73 @@
+// fallow-ignore-file complexity
+// Browser-only runtime (OfflineAudioContext), not coverable by Node unit
+// tests; the CRAP score is inflated by the missing coverage.
+import type { AudioClip } from "./audioClips.js";
+
+export interface AudioMixOptions {
+  sampleRate?: number;
+  numberOfChannels?: number;
+}
+
+const DEFAULT_SAMPLE_RATE = 48000;
+const DEFAULT_CHANNELS = 2;
+
+async function decodeClip(
+  context: OfflineAudioContext,
+  clip: AudioClip,
+): Promise<AudioBuffer | null> {
+  try {
+    const response = await fetch(clip.src);
+    if (!response.ok) return null;
+    return await context.decodeAudioData(await response.arrayBuffer());
+  } catch {
+    // Unreachable/CORS-blocked/non-audio sources are skipped, not fatal —
+    // matches the producer's behavior of rendering whatever audio it can.
+    return null;
+  }
+}
+
+function scheduleClip(
+  context: OfflineAudioContext,
+  clip: AudioClip,
+  buffer: AudioBuffer,
+  totalDurationSeconds: number,
+): void {
+  const available = Math.max(0, buffer.duration - clip.mediaStart);
+  const remaining = Math.max(0, totalDurationSeconds - clip.start);
+  const playDuration = Math.min(clip.duration ?? available, available, remaining);
+  if (playDuration <= 0) return;
+  const source = context.createBufferSource();
+  source.buffer = buffer;
+  const gain = context.createGain();
+  gain.gain.value = clip.volume;
+  source.connect(gain);
+  gain.connect(context.destination);
+  source.start(clip.start, clip.mediaStart, playDuration);
+}
+
+/**
+ * Decode every clip and mix them offline into a single AudioBuffer spanning
+ * the whole composition. Returns null when there is nothing audible.
+ */
+export async function mixAudioClips(
+  clips: readonly AudioClip[],
+  durationSeconds: number,
+  options: AudioMixOptions = {},
+): Promise<AudioBuffer | null> {
+  if (clips.length === 0 || durationSeconds <= 0) return null;
+  const sampleRate = options.sampleRate ?? DEFAULT_SAMPLE_RATE;
+  const context = new OfflineAudioContext(
+    options.numberOfChannels ?? DEFAULT_CHANNELS,
+    Math.ceil(durationSeconds * sampleRate),
+    sampleRate,
+  );
+  let scheduled = 0;
+  for (const clip of clips) {
+    const buffer = await decodeClip(context, clip);
+    if (!buffer) continue;
+    scheduleClip(context, clip, buffer, durationSeconds);
+    scheduled += 1;
+  }
+  if (scheduled === 0) return null;
+  return context.startRendering();
+}
diff --git a/packages/browser-export/src/codecs.test.ts b/packages/browser-export/src/codecs.test.ts
new file mode 100644
index 0000000000..060e271132
--- /dev/null
+++ b/packages/browser-export/src/codecs.test.ts
@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { codecsForFormat } from "./codecs.js";
+import { mediaLocalTime } from "./mediaSeek.js";
+import { suggestedFilename } from "./download.js";
+import type { ExportResult } from "./types.js";
+
+describe("codecsForFormat", () => {
+  it("maps mp4 to avc/aac and webm to vp9/opus", () => {
+    expect(codecsForFormat("mp4")).toEqual({
+      video: "avc",
+      audio: "aac",
+      mimeType: "video/mp4",
+      extension: "mp4",
+    });
+    expect(codecsForFormat("webm")).toEqual({
+      video: "vp9",
+      audio: "opus",
+      mimeType: "video/webm",
+      extension: "webm",
+    });
+  });
+});
+
+describe("mediaLocalTime", () => {
+  it("offsets composition time by clip start and media trim", () => {
+    expect(mediaLocalTime(2, 0.5, 3)).toBeCloseTo(1.5, 10);
+    expect(mediaLocalTime(5, 0, 3)).toBe(-2);
+  });
+});
+
+describe("suggestedFilename", () => {
+  function result(overrides: Partial<ExportResult>): ExportResult {
+    return {
+      blob: new Blob([]),
+      mimeType: "video/mp4",
+      width: 1920,
+      height: 1080,
+      fps: 30,
+      durationSeconds: 5,
+      frameCount: 150,
+      compositionId: null,
+      ...overrides,
+    };
+  }
+
+  it("uses the composition id and mime-derived extension", () => {
+    expect(suggestedFilename(result({ compositionId: "promo" }))).toBe("promo.mp4");
+    expect(suggestedFilename(result({ mimeType: "video/webm" }))).toBe("composition.webm");
+  });
+});
diff --git a/packages/browser-export/src/codecs.ts b/packages/browser-export/src/codecs.ts
new file mode 100644
index 0000000000..b3e0c8e249
--- /dev/null
+++ b/packages/browser-export/src/codecs.ts
@@ -0,0 +1,17 @@
+import type { ExportFormat } from "./types.js";
+
+export interface FormatCodecs {
+  video: "avc" | "vp9";
+  audio: "aac" | "opus";
+  mimeType: string;
+  extension: string;
+}
+
+const FORMAT_CODECS: Record<ExportFormat, FormatCodecs> = {
+  mp4: { video: "avc", audio: "aac", mimeType: "video/mp4", extension: "mp4" },
+  webm: { video: "vp9", audio: "opus", mimeType: "video/webm", extension: "webm" },
+};
+
+export function codecsForFormat(format: ExportFormat): FormatCodecs {
+  return FORMAT_CODECS[format];
+}
diff --git a/packages/browser-export/src/compositionMeta.test.ts b/packages/browser-export/src/compositionMeta.test.ts
new file mode 100644
index 0000000000..4df67c2d11
--- /dev/null
+++ b/packages/browser-export/src/compositionMeta.test.ts
@@ -0,0 +1,53 @@
+import { parseHTML } from "linkedom";
+import { describe, expect, it } from "vitest";
+import { findCompositionRoot, readCompositionMeta } from "./compositionMeta.js";
+
+function doc(html: string): Document {
+  return parseHTML(`<html><body>${html}</body></html>`).document as unknown as Document;
+}
+
+describe("findCompositionRoot", () => {
+  it("finds the element carrying data-composition-id", () => {
+    const document = doc(`<div id="root"><div data-composition-id="main"></div></div>`);
+    expect(findCompositionRoot(document)?.getAttribute("data-composition-id")).toBe("main");
+  });
+
+  it("returns the scope itself when it is the composition root", () => {
+    const document = doc(`<div data-composition-id="self"></div>`);
+    const root = document.querySelector("[data-composition-id]") as Element;
+    expect(findCompositionRoot(root)).toBe(root);
+  });
+
+  it("falls back to #root when no data-composition-id exists", () => {
+    const document = doc(`<div id="root"></div>`);
+    expect(findCompositionRoot(document)?.getAttribute("id")).toBe("root");
+  });
+
+  it("returns null when nothing matches", () => {
+    expect(findCompositionRoot(doc(`<div></div>`))).toBeNull();
+  });
+});
+
+describe("readCompositionMeta", () => {
+  it("reads id, width and height", () => {
+    const document = doc(
+      `<div data-composition-id="promo" data-width="1080" data-height="1920"></div>`,
+    );
+    const root = document.querySelector("[data-composition-id]") as Element;
+    expect(readCompositionMeta(root)).toEqual({
+      id: "promo",
+      width: 1080,
+      height: 1920,
+    });
+  });
+
+  it("defaults to 1920x1080 on missing or invalid dimensions", () => {
+    const document = doc(
+      `<div data-composition-id="promo" data-width="abc" data-height="-4"></div>`,
+    );
+    const root = document.querySelector("[data-composition-id]") as Element;
+    const meta = readCompositionMeta(root);
+    expect(meta.width).toBe(1920);
+    expect(meta.height).toBe(1080);
+  });
+});
diff --git a/packages/browser-export/src/compositionMeta.ts b/packages/browser-export/src/compositionMeta.ts
new file mode 100644
index 0000000000..b0a9ab0404
--- /dev/null
+++ b/packages/browser-export/src/compositionMeta.ts
@@ -0,0 +1,32 @@
+export interface CompositionMeta {
+  id: string | null;
+  width: number;
+  height: number;
+}
+
+const DEFAULT_WIDTH = 1920;
+const DEFAULT_HEIGHT = 1080;
+
+export function findCompositionRoot(scope: ParentNode): Element | null {
+  const asElement = scope as Element;
+  if (
+    typeof asElement.hasAttribute === "function" &&
+    asElement.hasAttribute("data-composition-id")
+  ) {
+    return asElement;
+  }
+  return scope.querySelector("[data-composition-id]") ?? scope.querySelector("#root");
+}
+
+function parsePositiveNumber(value: string | null, fallback: number): number {
+  const parsed = value == null ? Number.NaN : Number.parseFloat(value);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
+
+export function readCompositionMeta(root: Element): CompositionMeta {
+  return {
+    id: root.getAttribute("data-composition-id"),
+    width: parsePositiveNumber(root.getAttribute("data-width"), DEFAULT_WIDTH),
+    height: parsePositiveNumber(root.getAttribute("data-height"), DEFAULT_HEIGHT),
+  };
+}
diff --git a/packages/browser-export/src/download.ts b/packages/browser-export/src/download.ts
new file mode 100644
index 0000000000..50a433e04f
--- /dev/null
+++ b/packages/browser-export/src/download.ts
@@ -0,0 +1,17 @@
+import type { ExportResult } from "./types.js";
+
+export function suggestedFilename(result: ExportResult): string {
+  const base = result.compositionId ?? "composition";
+  const extension = result.mimeType === "video/webm" ? "webm" : "mp4";
+  return `${base}.${extension}`;
+}
+
+/** Trigger a client-side download of the exported video. */
+export function downloadExport(result: ExportResult, filename?: string): void {
+  const url = URL.createObjectURL(result.blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename ?? suggestedFilename(result);
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
diff --git a/packages/browser-export/src/encoder.ts b/packages/browser-export/src/encoder.ts
new file mode 100644
index 0000000000..ffeb3c41a3
--- /dev/null
+++ b/packages/browser-export/src/encoder.ts
@@ -0,0 +1,70 @@
+// fallow-ignore-file complexity
+// Browser-only runtime (WebCodecs/mediabunny), not coverable by Node unit
+// tests; the CRAP score is inflated by the missing coverage.
+import {
+  AudioBufferSource,
+  BufferTarget,
+  CanvasSource,
+  Mp4OutputFormat,
+  Output,
+  QUALITY_HIGH,
+  WebMOutputFormat,
+} from "mediabunny";
+import { codecsForFormat } from "./codecs.js";
+import type { ExportFormat } from "./types.js";
+
+export interface EncoderOptions {
+  format: ExportFormat;
+  fps: number;
+  videoBitrate?: number;
+  audioBitrate?: number;
+  withAudio: boolean;
+}
+
+export interface Encoder {
+  mimeType: string;
+  addFrame(timestampSeconds: number, durationSeconds: number, keyFrame: boolean): Promise<void>;
+  addAudio(buffer: AudioBuffer): Promise<void>;
+  finalize(): Promise<Blob>;
+}
+
+export async function createEncoder(
+  canvas: HTMLCanvasElement,
+  options: EncoderOptions,
+): Promise<Encoder> {
+  const codecs = codecsForFormat(options.format);
+  const output = new Output({
+    format: options.format === "webm" ? new WebMOutputFormat() : new Mp4OutputFormat(),
+    target: new BufferTarget(),
+  });
+  const videoSource = new CanvasSource(canvas, {
+    codec: codecs.video,
+    bitrate: options.videoBitrate ?? QUALITY_HIGH,
+  });
+  output.addVideoTrack(videoSource, { frameRate: options.fps });
+  const audioSource = options.withAudio
+    ? new AudioBufferSource({
+        codec: codecs.audio,
+        bitrate: options.audioBitrate ?? QUALITY_HIGH,
+      })
+    : null;
+  if (audioSource) output.addAudioTrack(audioSource);
+  await output.start();
+  return {
+    mimeType: codecs.mimeType,
+    addFrame: (timestampSeconds, durationSeconds, keyFrame) =>
+      videoSource.add(timestampSeconds, durationSeconds, { keyFrame }),
+    async addAudio(buffer) {
+      if (!audioSource) return;
+      await audioSource.add(buffer);
+      audioSource.close();
+    },
+    async finalize() {
+      videoSource.close();
+      await output.finalize();
+      const bytes = (output.target as BufferTarget).buffer;
+      if (!bytes) throw new Error("Encoder produced no output");
+      return new Blob([bytes], { type: codecs.mimeType });
+    },
+  };
+}
diff --git a/packages/browser-export/src/exporter.ts b/packages/browser-export/src/exporter.ts
new file mode 100644
index 0000000000..461756459e
--- /dev/null
+++ b/packages/browser-export/src/exporter.ts
@@ -0,0 +1,145 @@
+// fallow-ignore-file complexity
+// Browser-only orchestration (canvas capture + WebCodecs), not coverable by
+// Node unit tests; the CRAP score is inflated by the missing coverage.
+import { collectAudioClips } from "./audioClips.js";
+import { mixAudioClips } from "./audioMix.js";
+import {
+  findCompositionRoot,
+  readCompositionMeta,
+  type CompositionMeta,
+} from "./compositionMeta.js";
+import { createEncoder, type Encoder } from "./encoder.js";
+import { createFrameCapturer, type FrameCapturer } from "./frameCapture.js";
+import { frameCount, frameTimestamp } from "./frameTiming.js";
+import { seekMediaElements } from "./mediaSeek.js";
+import {
+  resolveDuration,
+  resolveTimelineRegistry,
+  seekTimelines,
+  type TimelineRegistry,
+} from "./timelineSeek.js";
+import type { ExportOptions, ExportResult } from "./types.js";
+
+const DEFAULT_FPS = 30;
+const DEFAULT_KEYFRAME_INTERVAL_SECONDS = 2;
+
+interface ExportPlan {
+  root: HTMLElement;
+  meta: CompositionMeta;
+  registry: TimelineRegistry;
+  fps: number;
+  durationSeconds: number;
+  totalFrames: number;
+}
+
+function throwIfAborted(signal: AbortSignal | undefined): void {
+  if (signal?.aborted) throw new Error("Export aborted");
+}
+
+function planExport(target: HTMLElement | Document, options: ExportOptions): ExportPlan {
+  const root = findCompositionRoot(target);
+  if (!root) {
+    throw new Error(
+      "No composition root found — expected an element with [data-composition-id] or #root",
+    );
+  }
+  const meta = readCompositionMeta(root);
+  const registry = resolveTimelineRegistry(root);
+  const fps = options.fps ?? DEFAULT_FPS;
+  const durationSeconds = resolveDuration(registry, meta.id, options.duration);
+  if (durationSeconds <= 0) {
+    throw new Error(
+      "Could not resolve composition duration — register a GSAP timeline in window.__timelines or pass options.duration",
+    );
+  }
+  return {
+    root: root as HTMLElement,
+    meta,
+    registry,
+    fps,
+    durationSeconds,
+    totalFrames: frameCount(durationSeconds, fps),
+  };
+}
+
+async function prepareAudio(plan: ExportPlan, options: ExportOptions): Promise<AudioBuffer | null> {
+  if (options.includeAudio === false) return null;
+  options.onProgress?.({
+    phase: "audio",
+    renderedFrames: 0,
+    totalFrames: plan.totalFrames,
+    fraction: 0,
+  });
+  const scope = plan.root.ownerDocument ?? plan.root;
+  return mixAudioClips(collectAudioClips(scope), plan.durationSeconds);
+}
+
+async function encodeFrames(
+  plan: ExportPlan,
+  capturer: FrameCapturer,
+  encoder: Encoder,
+  options: ExportOptions,
+): Promise<void> {
+  const interval = options.keyFrameIntervalSeconds ?? DEFAULT_KEYFRAME_INTERVAL_SECONDS;
+  const keyFrameEvery = Math.max(1, Math.round(interval * plan.fps));
+  for (let frame = 0; frame < plan.totalFrames; frame += 1) {
+    throwIfAborted(options.signal);
+    const timestamp = frameTimestamp(frame, plan.fps);
+    seekTimelines(plan.registry, timestamp, plan.fps);
+    await seekMediaElements(plan.root, timestamp);
+    await capturer.capture();
+    await encoder.addFrame(timestamp, 1 / plan.fps, frame % keyFrameEvery === 0);
+    options.onProgress?.({
+      phase: "video",
+      renderedFrames: frame + 1,
+      totalFrames: plan.totalFrames,
+      fraction: (frame + 1) / plan.totalFrames,
+    });
+  }
+}
+
+/**
+ * Render a live composition to MP4/WebM entirely in the browser — no server,
+ * no FFmpeg, no headless Chrome. Frames are sampled with the same quantized
+ * deterministic seek the producer uses, rasterized via SVG foreignObject and
+ * encoded with WebCodecs through mediabunny.
+ */
+export async function exportComposition(
+  target: HTMLElement | Document,
+  options: ExportOptions = {},
+): Promise<ExportResult> {
+  const plan = planExport(target, options);
+  const audioBuffer = await prepareAudio(plan, options);
+  const capturer = await createFrameCapturer(
+    plan.root,
+    plan.meta.width,
+    plan.meta.height,
+    options.pixelRatio ?? 1,
+  );
+  const encoder = await createEncoder(capturer.canvas, {
+    format: options.format ?? "mp4",
+    fps: plan.fps,
+    videoBitrate: options.videoBitrate,
+    audioBitrate: options.audioBitrate,
+    withAudio: audioBuffer != null,
+  });
+  if (audioBuffer) await encoder.addAudio(audioBuffer);
+  await encodeFrames(plan, capturer, encoder, options);
+  options.onProgress?.({
+    phase: "finalize",
+    renderedFrames: plan.totalFrames,
+    totalFrames: plan.totalFrames,
+    fraction: 1,
+  });
+  const blob = await encoder.finalize();
+  return {
+    blob,
+    mimeType: encoder.mimeType,
+    width: plan.meta.width,
+    height: plan.meta.height,
+    fps: plan.fps,
+    durationSeconds: plan.durationSeconds,
+    frameCount: plan.totalFrames,
+    compositionId: plan.meta.id,
+  };
+}
diff --git a/packages/browser-export/src/frameCapture.ts b/packages/browser-export/src/frameCapture.ts
new file mode 100644
index 0000000000..3c4bad1f3b
--- /dev/null
+++ b/packages/browser-export/src/frameCapture.ts
@@ -0,0 +1,41 @@
+import { getFontEmbedCSS, toCanvas } from "html-to-image";
+
+export interface FrameCapturer {
+  canvas: HTMLCanvasElement;
+  capture(): Promise<void>;
+}
+
+/**
+ * Rasterizes the composition root into a persistent recording canvas via
+ * SVG foreignObject (html-to-image). The same canvas instance is handed to
+ * mediabunny's CanvasSource, which snapshots it on every add().
+ */
+export async function createFrameCapturer(
+  root: HTMLElement,
+  width: number,
+  height: number,
+  pixelRatio: number,
+): Promise<FrameCapturer> {
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.round(width * pixelRatio);
+  canvas.height = Math.round(height * pixelRatio);
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Could not create a 2D canvas context for export");
+  }
+  // Fonts cannot change between frames — embed them once instead of letting
+  // html-to-image re-fetch and re-serialize them on every capture.
+  const fontEmbedCSS = await getFontEmbedCSS(root);
+  const capture = async (): Promise<void> => {
+    const frame = await toCanvas(root, {
+      width,
+      height,
+      pixelRatio,
+      fontEmbedCSS,
+      cacheBust: false,
+    });
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.drawImage(frame, 0, 0, canvas.width, canvas.height);
+  };
+  return { canvas, capture };
+}
diff --git a/packages/browser-export/src/frameTiming.test.ts b/packages/browser-export/src/frameTiming.test.ts
new file mode 100644
index 0000000000..969086f164
--- /dev/null
+++ b/packages/browser-export/src/frameTiming.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import { frameCount, frameTimestamp, quantizeTimeToFrame } from "./frameTiming.js";
+
+describe("quantizeTimeToFrame", () => {
+  it("rounds to the nearest frame boundary", () => {
+    expect(quantizeTimeToFrame(1.51, 30)).toBeCloseTo(45 / 30, 10);
+    expect(quantizeTimeToFrame(0.016, 60)).toBeCloseTo(1 / 60, 10);
+  });
+
+  it("returns 0 on invalid input", () => {
+    expect(quantizeTimeToFrame(Number.NaN, 30)).toBe(0);
+    expect(quantizeTimeToFrame(1, 0)).toBe(0);
+  });
+});
+
+describe("frameCount", () => {
+  it("rounds duration * fps and never returns less than 1 for a positive duration", () => {
+    expect(frameCount(5, 30)).toBe(150);
+    expect(frameCount(0.01, 30)).toBe(1);
+    expect(frameCount(0, 30)).toBe(0);
+    expect(frameCount(-1, 30)).toBe(0);
+  });
+});
+
+describe("frameTimestamp", () => {
+  it("maps frame index to seconds", () => {
+    expect(frameTimestamp(45, 30)).toBeCloseTo(1.5, 10);
+    expect(frameTimestamp(0, 30)).toBe(0);
+  });
+});
diff --git a/packages/browser-export/src/frameTiming.ts b/packages/browser-export/src/frameTiming.ts
new file mode 100644
index 0000000000..3f53d46f8f
--- /dev/null
+++ b/packages/browser-export/src/frameTiming.ts
@@ -0,0 +1,19 @@
+/**
+ * Quantize a time to the nearest frame boundary — the same contract the
+ * producer's deterministic seek uses (see @hyperframes/core parityContract).
+ */
+export function quantizeTimeToFrame(timeSeconds: number, fps: number): number {
+  if (!Number.isFinite(timeSeconds) || !Number.isFinite(fps) || fps <= 0) {
+    return 0;
+  }
+  return Math.round(timeSeconds * fps) / fps;
+}
+
+export function frameCount(durationSeconds: number, fps: number): number {
+  if (!Number.isFinite(durationSeconds) || durationSeconds <= 0) return 0;
+  return Math.max(1, Math.round(durationSeconds * fps));
+}
+
+export function frameTimestamp(frameIndex: number, fps: number): number {
+  return frameIndex / fps;
+}
diff --git a/packages/browser-export/src/index.ts b/packages/browser-export/src/index.ts
new file mode 100644
index 0000000000..4e31d95fd8
--- /dev/null
+++ b/packages/browser-export/src/index.ts
@@ -0,0 +1,21 @@
+export { collectAudioClips, type AudioClip } from "./audioClips.js";
+export { mixAudioClips, type AudioMixOptions } from "./audioMix.js";
+export { codecsForFormat, type FormatCodecs } from "./codecs.js";
+export {
+  findCompositionRoot,
+  readCompositionMeta,
+  type CompositionMeta,
+} from "./compositionMeta.js";
+export { downloadExport, suggestedFilename } from "./download.js";
+export { exportComposition } from "./exporter.js";
+export { frameCount, frameTimestamp, quantizeTimeToFrame } from "./frameTiming.js";
+export { mediaLocalTime, seekMediaElements } from "./mediaSeek.js";
+export {
+  masterTimeline,
+  resolveDuration,
+  resolveTimelineRegistry,
+  seekTimelines,
+  type TimelineLike,
+  type TimelineRegistry,
+} from "./timelineSeek.js";
+export type { ExportFormat, ExportOptions, ExportProgress, ExportResult } from "./types.js";
diff --git a/packages/browser-export/src/mediaSeek.ts b/packages/browser-export/src/mediaSeek.ts
new file mode 100644
index 0000000000..41a822f283
--- /dev/null
+++ b/packages/browser-export/src/mediaSeek.ts
@@ -0,0 +1,45 @@
+const SEEK_TIMEOUT_MS = 500;
+
+/** Map a composition time to a media element's local time. */
+export function mediaLocalTime(start: number, mediaStart: number, timeSeconds: number): number {
+  return timeSeconds - start + mediaStart;
+}
+
+function parseTime(value: string | null): number {
+  const parsed = value == null ? Number.NaN : Number.parseFloat(value);
+  return Number.isFinite(parsed) && parsed >= 0 ? parsed : 0;
+}
+
+function seekOne(element: HTMLMediaElement, timeSeconds: number): Promise<void> {
+  const local = mediaLocalTime(
+    parseTime(element.getAttribute("data-start")),
+    parseTime(element.getAttribute("data-media-start")),
+    timeSeconds,
+  );
+  const outOfWindow = local < 0 || (Number.isFinite(element.duration) && local > element.duration);
+  if (outOfWindow) return Promise.resolve();
+  return new Promise((resolve) => {
+    let settled = false;
+    const done = () => {
+      if (settled) return;
+      settled = true;
+      element.removeEventListener("seeked", done);
+      resolve();
+    };
+    element.addEventListener("seeked", done);
+    // A media element that never fires seeked (detached src, decode error)
+    // must not deadlock the whole export.
+    setTimeout(done, SEEK_TIMEOUT_MS);
+    element.currentTime = local;
+  });
+}
+
+/**
+ * Frame-align every <video> layer before rasterizing: unlike GSAP inline
+ * styles, media element seeks are asynchronous, so the capture has to wait
+ * for their seeked events.
+ */
+export async function seekMediaElements(scope: ParentNode, timeSeconds: number): Promise<void> {
+  const media = Array.from(scope.querySelectorAll("video[src]")) as HTMLMediaElement[];
+  await Promise.all(media.map((element) => seekOne(element, timeSeconds)));
+}
diff --git a/packages/browser-export/src/timelineSeek.test.ts b/packages/browser-export/src/timelineSeek.test.ts
new file mode 100644
index 0000000000..bc25126059
--- /dev/null
+++ b/packages/browser-export/src/timelineSeek.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest";
+import {
+  masterTimeline,
+  resolveDuration,
+  seekTimelines,
+  type TimelineLike,
+  type TimelineRegistry,
+} from "./timelineSeek.js";
+
+interface FakeTimeline extends TimelineLike {
+  calls: string[];
+}
+
+function fakeTimeline(duration: number): FakeTimeline {
+  const calls: string[] = [];
+  return {
+    calls,
+    duration: () => duration,
+    pause() {
+      calls.push("pause");
+    },
+    seek(timeSeconds: number, suppressEvents?: boolean) {
+      calls.push(`seek:${timeSeconds}:${suppressEvents}`);
+    },
+  };
+}
+
+describe("masterTimeline", () => {
+  it("prefers the timeline registered under the composition id", () => {
+    const main = fakeTimeline(5);
+    const other = fakeTimeline(2);
+    const registry: TimelineRegistry = { other, main };
+    expect(masterTimeline(registry, "main")).toBe(main);
+  });
+
+  it("falls back to the first registered timeline", () => {
+    const first = fakeTimeline(3);
+    expect(masterTimeline({ first }, "missing")).toBe(first);
+    expect(masterTimeline({}, null)).toBeNull();
+  });
+});
+
+describe("resolveDuration", () => {
+  it("uses a valid override before the timeline", () => {
+    expect(resolveDuration({ main: fakeTimeline(5) }, "main", 2)).toBe(2);
+  });
+
+  it("reads the master timeline duration otherwise", () => {
+    expect(resolveDuration({ main: fakeTimeline(5) }, "main")).toBe(5);
+    expect(resolveDuration({ main: fakeTimeline(5) }, "main", -1)).toBe(5);
+  });
+
+  it("returns 0 when nothing usable exists", () => {
+    expect(resolveDuration({}, null)).toBe(0);
+    expect(resolveDuration({ main: fakeTimeline(0) }, "main")).toBe(0);
+  });
+});
+
+describe("seekTimelines", () => {
+  it("pauses then seeks every timeline at the quantized frame time", () => {
+    const a = fakeTimeline(5);
+    const b = fakeTimeline(5);
+    const quantized = seekTimelines({ a, b }, 1.51, 30);
+    expect(quantized).toBeCloseTo(1.5, 10);
+    expect(a.calls).toEqual(["pause", `seek:${quantized}:true`]);
+    expect(b.calls).toEqual(["pause", `seek:${quantized}:true`]);
+  });
+});
diff --git a/packages/browser-export/src/timelineSeek.ts b/packages/browser-export/src/timelineSeek.ts
new file mode 100644
index 0000000000..bde69e7e67
--- /dev/null
+++ b/packages/browser-export/src/timelineSeek.ts
@@ -0,0 +1,57 @@
+import { quantizeTimeToFrame } from "./frameTiming.js";
+
+/** Structural subset of a paused GSAP timeline registered in window.__timelines. */
+export interface TimelineLike {
+  duration(): number;
+  seek(timeSeconds: number, suppressEvents?: boolean): unknown;
+  pause(): unknown;
+}
+
+export type TimelineRegistry = Record<string, TimelineLike>;
+
+export function resolveTimelineRegistry(root: Element): TimelineRegistry {
+  const win = root.ownerDocument?.defaultView as
+    | (Window & { __timelines?: TimelineRegistry })
+    | null;
+  return win?.__timelines ?? {};
+}
+
+export function masterTimeline(
+  registry: TimelineRegistry,
+  compositionId: string | null,
+): TimelineLike | null {
+  if (compositionId != null && registry[compositionId]) {
+    return registry[compositionId];
+  }
+  return Object.values(registry)[0] ?? null;
+}
+
+export function resolveDuration(
+  registry: TimelineRegistry,
+  compositionId: string | null,
+  override?: number,
+): number {
+  if (override != null && Number.isFinite(override) && override > 0) {
+    return override;
+  }
+  const duration = masterTimeline(registry, compositionId)?.duration() ?? 0;
+  return Number.isFinite(duration) && duration > 0 ? duration : 0;
+}
+
+/**
+ * Position every registered timeline at the quantized frame time, paused —
+ * mirrors the producer's seekMasterAndSiblingTimelinesDeterministically so a
+ * browser export samples the exact same states as a server render.
+ */
+export function seekTimelines(
+  registry: TimelineRegistry,
+  timeSeconds: number,
+  fps: number,
+): number {
+  const quantized = quantizeTimeToFrame(timeSeconds, fps);
+  for (const timeline of Object.values(registry)) {
+    timeline.pause();
+    timeline.seek(quantized, true);
+  }
+  return quantized;
+}
diff --git a/packages/browser-export/src/types.ts b/packages/browser-export/src/types.ts
new file mode 100644
index 0000000000..785391d3b2
--- /dev/null
+++ b/packages/browser-export/src/types.ts
@@ -0,0 +1,45 @@
+export type ExportFormat = "mp4" | "webm";
+
+export interface ExportProgress {
+  phase: "audio" | "video" | "finalize";
+  renderedFrames: number;
+  totalFrames: number;
+  /** Overall completion in [0, 1]. */
+  fraction: number;
+}
+
+export interface ExportOptions {
+  /** Frames per second of the output video. Defaults to 30. */
+  fps?: number;
+  /** Container/codec pair: mp4 (H.264 + AAC) or webm (VP9 + Opus). Defaults to mp4. */
+  format?: ExportFormat;
+  /**
+   * Duration override in seconds. When omitted, the duration is read from the
+   * composition's master GSAP timeline in window.__timelines.
+   */
+  duration?: number;
+  /** Video bitrate in bits/s. Defaults to mediabunny's QUALITY_HIGH. */
+  videoBitrate?: number;
+  /** Audio bitrate in bits/s. Defaults to mediabunny's QUALITY_HIGH. */
+  audioBitrate?: number;
+  /** Set to false to skip audio decoding/mixing entirely. Defaults to true. */
+  includeAudio?: boolean;
+  /** Rasterization scale factor (2 = supersampled capture). Defaults to 1. */
+  pixelRatio?: number;
+  /** Forced key frame cadence in seconds. Defaults to 2. */
+  keyFrameIntervalSeconds?: number;
+  /** Abort the export between frames. */
+  signal?: AbortSignal;
+  onProgress?: (progress: ExportProgress) => void;
+}
+
+export interface ExportResult {
+  blob: Blob;
+  mimeType: string;
+  width: number;
+  height: number;
+  fps: number;
+  durationSeconds: number;
+  frameCount: number;
+  compositionId: string | null;
+}
diff --git a/packages/browser-export/tsconfig.json b/packages/browser-export/tsconfig.json
new file mode 100644
index 0000000000..37fd9fba09
--- /dev/null
+++ b/packages/browser-export/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts"]
+}
diff --git a/packages/browser-export/tsup.config.ts b/packages/browser-export/tsup.config.ts
new file mode 100644
index 0000000000..a7a66c2270
--- /dev/null
+++ b/packages/browser-export/tsup.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  // platform: "browser" makes the build FAIL if any node:* builtin sneaks in —
+  // a compile-time guarantee that the whole package stays client-side runnable
+  // (same pattern as @hyperframes/lint's browser entry).
+  entry: { index: "src/index.ts" },
+  format: ["esm"],
+  outDir: "dist",
+  target: "es2022",
+  platform: "browser",
+  bundle: true,
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+  dts: true,
+  external: ["mediabunny", "html-to-image"],
+});