From 5435b867275b9b2c96f6802e753ef079cb036a6d Mon Sep 17 00:00:00 2001
From: Rodrigo <rodrigobelfiore@gmail.com>
Date: Tue, 5 Aug 2025 16:45:07 +0100
Subject: [PATCH 1/5] canvas renderer primitives (wip)

---
 .gitignore                                    |   3 +-
 apps/web/package.json                         |   2 +
 apps/web/src/app/editor/[project_id]/page.tsx |   4 +-
 apps/web/src/components/editor-header.tsx     |  25 ++---
 .../editor/renderer/canvas-preview-panel.tsx  | 104 ++++++++++++++++++
 .../editor/renderer/export-dialog.tsx         | 104 ++++++++++++++++++
 .../editor/renderer/scene-preview-canvas.tsx  |  41 +++++++
 apps/web/src/hooks/use-raf-loop.ts            |  20 ++++
 apps/web/src/lib/renderer/nodes/base-node.ts  |  29 +++++
 apps/web/src/lib/renderer/nodes/color-node.ts |  20 ++++
 apps/web/src/lib/renderer/nodes/scene-node.ts |  11 ++
 .../lib/renderer/nodes/time-offset-node.ts    |  16 +++
 .../src/lib/renderer/nodes/timecode-node.ts   |  20 ++++
 apps/web/src/lib/renderer/nodes/video-node.ts |  50 +++++++++
 apps/web/src/lib/renderer/scene-builder.ts    |  44 ++++++++
 apps/web/src/lib/renderer/scene-exporter.ts   |  80 ++++++++++++++
 apps/web/src/lib/renderer/scene-renderer.ts   |  64 +++++++++++
 apps/web/src/stores/renderer-store.ts         |  12 ++
 bun.lock                                      |   8 +-
 19 files changed, 639 insertions(+), 18 deletions(-)
 create mode 100644 apps/web/src/components/editor/renderer/canvas-preview-panel.tsx
 create mode 100644 apps/web/src/components/editor/renderer/export-dialog.tsx
 create mode 100644 apps/web/src/components/editor/renderer/scene-preview-canvas.tsx
 create mode 100644 apps/web/src/hooks/use-raf-loop.ts
 create mode 100644 apps/web/src/lib/renderer/nodes/base-node.ts
 create mode 100644 apps/web/src/lib/renderer/nodes/color-node.ts
 create mode 100644 apps/web/src/lib/renderer/nodes/scene-node.ts
 create mode 100644 apps/web/src/lib/renderer/nodes/time-offset-node.ts
 create mode 100644 apps/web/src/lib/renderer/nodes/timecode-node.ts
 create mode 100644 apps/web/src/lib/renderer/nodes/video-node.ts
 create mode 100644 apps/web/src/lib/renderer/scene-builder.ts
 create mode 100644 apps/web/src/lib/renderer/scene-exporter.ts
 create mode 100644 apps/web/src/lib/renderer/scene-renderer.ts
 create mode 100644 apps/web/src/stores/renderer-store.ts

diff --git a/.gitignore b/.gitignore
index 030fd134d..80450f69b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,4 +27,5 @@ node_modules
 *.env
 
 # cursor
-bun.lockb
\ No newline at end of file
+bun.lockb
+.DS_Store
\ No newline at end of file
diff --git a/apps/web/package.json b/apps/web/package.json
index d99476430..8007a6ac3 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -38,6 +38,7 @@
     "dotenv": "^16.5.0",
     "drizzle-orm": "^0.44.2",
     "embla-carousel-react": "^8.5.1",
+    "eventemitter3": "^5.0.1",
     "feed": "^5.1.0",
     "framer-motion": "^11.13.1",
     "input-otp": "^1.4.1",
@@ -65,6 +66,7 @@
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
     "unified": "^11.0.5",
+    "use-deep-compare-effect": "^1.8.1",
     "vaul": "^1.1.1",
     "zod": "^3.25.67",
     "zustand": "^5.0.2"
diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index cae8e779c..158c1c1bc 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -17,6 +17,7 @@ import { useProjectStore } from "@/stores/project-store";
 import { EditorProvider } from "@/components/editor-provider";
 import { usePlaybackControls } from "@/hooks/use-playback-controls";
 import { Onboarding } from "@/components/onboarding";
+import { CanvasPreviewPanel } from "@/components/editor/renderer/canvas-preview-panel";
 
 export default function Editor() {
   const {
@@ -189,7 +190,8 @@ export default function Editor() {
                   onResize={setPreviewPanel}
                   className="min-w-0 min-h-0 flex-1"
                 >
-                  <PreviewPanel />
+                  {/* <PreviewPanel /> */}
+                  <CanvasPreviewPanel />
                 </ResizablePanel>
 
                 <ResizableHandle withHandle />
diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index 77202c367..719afb9f1 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -29,6 +29,7 @@ import { useRouter } from "next/navigation";
 import { FaDiscord } from "react-icons/fa6";
 import { useTheme } from "next-themes";
 import { usePlaybackStore } from "@/stores/playback-store";
+import { ExportDialog } from "./editor/renderer/export-dialog";
 
 export function EditorHeader() {
   const { getTotalDuration } = useTimelineStore();
@@ -39,13 +40,6 @@ export function EditorHeader() {
   const router = useRouter();
   const { theme, setTheme } = useTheme();
 
-  const handleExport = () => {
-    // TODO: Implement export functionality
-    // NOTE: This is already being worked on
-    console.log("Export project");
-    window.open("https://youtube.com/watch?v=dQw4w9WgXcQ", "_blank");
-  };
-
   const handleNameSave = async (newName: string) => {
     console.log("handleNameSave", newName);
     if (activeProject && newName.trim() && newName !== activeProject.name) {
@@ -148,14 +142,15 @@ export function EditorHeader() {
   const rightContent = (
     <nav className="flex items-center gap-2">
       <KeyboardShortcutsHelp />
-      <Button
-        size="sm"
-        className="h-8 text-xs !bg-linear-to-r from-cyan-400 to-blue-500 text-white hover:opacity-85 transition-opacity"
-        onClick={handleExport}
-      >
-        <Download className="h-4 w-4" />
-        <span className="text-sm pr-1">Export</span>
-      </Button>
+      <ExportDialog>
+        <Button
+          size="sm"
+          className="h-8 text-xs !bg-linear-to-r from-cyan-400 to-blue-500 text-white hover:opacity-85 transition-opacity"
+        >
+          <Download className="h-4 w-4" />
+          <span className="text-sm pr-1">Export</span>
+        </Button>
+      </ExportDialog>
       <Button
         size="icon"
         variant="text"
diff --git a/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx b/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx
new file mode 100644
index 000000000..b419a5f16
--- /dev/null
+++ b/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx
@@ -0,0 +1,104 @@
+import { useCallback, useMemo, useRef } from "react";
+import useDeepCompareEffect from "use-deep-compare-effect";
+
+import { useRafLoop } from "@/hooks/use-raf-loop";
+import { SceneNode } from "@/lib/renderer/nodes/scene-node";
+import { TimeOffsetNode } from "@/lib/renderer/nodes/time-offset-node";
+import { TimecodeNode } from "@/lib/renderer/nodes/timecode-node";
+import { VideoNode } from "@/lib/renderer/nodes/video-node";
+import { SceneRenderer } from "@/lib/renderer/scene-renderer";
+import { useEditorStore } from "@/stores/editor-store";
+import { useMediaStore } from "@/stores/media-store";
+import { usePlaybackStore } from "@/stores/playback-store";
+import { useRendererStore } from "@/stores/renderer-store";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { TimelineElement } from "@/types/timeline";
+
+function useActiveElements(): TimelineElement[] {
+  const tracks = useTimelineStore((s) => s.tracks);
+  return tracks.flatMap((track) => track.elements);
+}
+
+function RendererSceneController() {
+  const setScene = useRendererStore((s) => s.setScene);
+  const mediaItems = useMediaStore((s) => s.mediaItems);
+  const elements = useActiveElements();
+
+  const getTotalDuration = useTimelineStore((s) => s.getTotalDuration);
+
+  useDeepCompareEffect(() => {
+    const scene = new SceneNode({ duration: getTotalDuration() });
+
+    for (const element of elements) {
+      if (element.type === "media") {
+        const media = mediaItems.find((m) => m.id === element.mediaId);
+        if (media && media.url) {
+          scene.add(
+            new TimeOffsetNode({ timeOffset: element.startTime }).add(
+              new VideoNode({ video: media.url })
+            )
+          );
+        }
+      }
+    }
+
+    scene.add(new TimecodeNode());
+    setScene(scene);
+  }, [elements, mediaItems, getTotalDuration]);
+
+  return null;
+}
+
+function PreviewCanvas() {
+  const ref = useRef<HTMLCanvasElement>(null);
+  const lastFrameRef = useRef(0);
+  const lastSceneRef = useRef<SceneNode | null>(null);
+
+  const { width, height } = useEditorStore((s) => s.canvasSize);
+
+  const renderer = useMemo(() => {
+    return new SceneRenderer({
+      width: width / 2,
+      height: height / 2,
+      fps: 30, // TODO: get fps from project
+    });
+  }, [width, height]);
+
+  const scene = useRendererStore((s) => s.scene);
+
+  const render = useCallback(() => {
+    if (ref.current && scene) {
+      const time = usePlaybackStore.getState().currentTime;
+      const frame = Math.floor(time * renderer.fps);
+
+      if (frame !== lastFrameRef.current || scene !== lastSceneRef.current) {
+        console.log("rendering", frame);
+        renderer.renderToCanvas(scene, frame, ref.current);
+        lastSceneRef.current = scene;
+        lastFrameRef.current = frame;
+      }
+    }
+  }, [renderer, scene]);
+
+  useRafLoop(render);
+
+  return (
+    <canvas
+      ref={ref}
+      width={width}
+      height={height}
+      className="max-w-full max-h-full block border"
+    />
+  );
+}
+
+export function CanvasPreviewPanel() {
+  return (
+    <div className="h-full w-full flex flex-col min-h-0 min-w-0 bg-panel rounded-sm relative">
+      <div className="flex flex-1 items-center justify-center min-h-0 min-w-0 p-2">
+        <PreviewCanvas />
+        <RendererSceneController />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/editor/renderer/export-dialog.tsx b/apps/web/src/components/editor/renderer/export-dialog.tsx
new file mode 100644
index 000000000..742b44049
--- /dev/null
+++ b/apps/web/src/components/editor/renderer/export-dialog.tsx
@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { SceneExporter } from "@/lib/renderer/scene-exporter";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+import { Button } from "@/components/ui/button";
+import { SceneNode } from "@/lib/renderer/nodes/scene-node";
+import { Progress } from "@/components/ui/progress";
+import { useRendererStore } from "@/stores/renderer-store";
+
+function downloadBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+}
+
+function ExportProgress({ progress }: { progress: number }) {
+  return (
+    <div className="w-full flex flex-col text-sm text-muted-foreground">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">Rendering video...</div>
+        <div className="text-xs text-muted-foreground">
+          {Math.round(progress * 100)}%
+        </div>
+      </div>
+      <Progress value={progress * 100} className="mt-2" />
+    </div>
+  );
+}
+
+export function ExportDialog({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isExporting, setIsExporting] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const scene = useRendererStore((s) => s.scene);
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
+    setError(null);
+    setProgress(0);
+  };
+
+  const handleExport = async () => {
+    if (!scene) {
+      return;
+    }
+
+    setIsExporting(true);
+
+    const exporter = new SceneExporter({
+      width: 600, // TODO: Use project's aspect ratio
+      height: 320, // TODO: Use project's aspect ratio
+      fps: 30, // TODO: Use project's frame rate
+    });
+
+    exporter.on("progress", (progress) => {
+      setProgress(progress);
+    });
+
+    exporter.on("complete", (blob) => {
+      downloadBlob(blob, `export-${Date.now()}.mp4`);
+      setIsOpen(false);
+    });
+
+    exporter.on("error", (error) => {
+      setError(error.message);
+    });
+
+    await exporter.export(scene);
+    setIsExporting(false);
+  };
+
+  return (
+    <Dialog modal open={isOpen} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Export Video</DialogTitle>
+        </DialogHeader>
+        <DialogDescription>Export the scene as a video file.</DialogDescription>
+        <div className="min-h-16 text-sm flex items-end">
+          {isExporting && <ExportProgress progress={progress} />}
+          {error && <div className="text-red-500">{error}</div>}
+        </div>
+        <DialogFooter>
+          <Button disabled={isExporting || !scene} onClick={handleExport}>
+            Export
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/components/editor/renderer/scene-preview-canvas.tsx b/apps/web/src/components/editor/renderer/scene-preview-canvas.tsx
new file mode 100644
index 000000000..dd0a7bf04
--- /dev/null
+++ b/apps/web/src/components/editor/renderer/scene-preview-canvas.tsx
@@ -0,0 +1,41 @@
+import { SceneRenderer } from "@/lib/renderer/scene-renderer";
+import { useEffect, useRef, useState } from "react";
+import { SceneNode } from "@/lib/renderer/nodes/scene-node";
+
+const PREVIEW_SIZE = { width: 600, height: 320 };
+const PREVIEW_FPS = 30;
+
+export function ScenePreviewCanvas({
+  frame,
+  scene,
+}: {
+  frame: number;
+  scene: SceneNode;
+}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const [renderer] = useState<SceneRenderer | null>(() => {
+    const renderer = new SceneRenderer({
+      width: PREVIEW_SIZE.width,
+      height: PREVIEW_SIZE.height,
+      fps: PREVIEW_FPS,
+    });
+
+    return renderer;
+  });
+
+  useEffect(() => {
+    if (renderer && scene && canvasRef.current) {
+      renderer.renderToCanvas(scene, frame, canvasRef.current);
+    }
+  }, [scene, renderer, frame]);
+
+  return (
+    <canvas
+      width={PREVIEW_SIZE.width}
+      height={PREVIEW_SIZE.height}
+      ref={canvasRef}
+      className="w-full h-full"
+    />
+  );
+}
diff --git a/apps/web/src/hooks/use-raf-loop.ts b/apps/web/src/hooks/use-raf-loop.ts
new file mode 100644
index 000000000..babb66dd7
--- /dev/null
+++ b/apps/web/src/hooks/use-raf-loop.ts
@@ -0,0 +1,20 @@
+import { useEffect, useRef } from "react";
+
+export function useRafLoop(callback: (time: number) => void) {
+  const requestRef = useRef<number>(0);
+  const previousTimeRef = useRef<number>(0);
+
+  useEffect(() => {
+    const loop = (time: number) => {
+      if (previousTimeRef.current !== undefined) {
+        const deltaTime = time - previousTimeRef.current;
+        callback(deltaTime);
+      }
+      previousTimeRef.current = time;
+      requestRef.current = requestAnimationFrame(loop);
+    };
+
+    requestRef.current = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(requestRef.current);
+  }, [callback]);
+}
diff --git a/apps/web/src/lib/renderer/nodes/base-node.ts b/apps/web/src/lib/renderer/nodes/base-node.ts
new file mode 100644
index 000000000..e2f2275ee
--- /dev/null
+++ b/apps/web/src/lib/renderer/nodes/base-node.ts
@@ -0,0 +1,29 @@
+import { SceneRenderer } from "../scene-renderer";
+
+export type BaseNodeParams = Record<string, unknown> | undefined;
+
+export class BaseNode<Params extends BaseNodeParams = BaseNodeParams> {
+  params: Params;
+
+  constructor(params?: Params) {
+    this.params = params ?? ({} as Params);
+  }
+
+  children: BaseNode[] = [];
+
+  add(child: BaseNode) {
+    this.children.push(child);
+    return this;
+  }
+
+  remove(child: BaseNode) {
+    this.children = this.children.filter((c) => c !== child);
+    return this;
+  }
+
+  async render(renderer: SceneRenderer, time: number): Promise<void> {
+    for (const child of this.children) {
+      await child.render(renderer, time);
+    }
+  }
+}
diff --git a/apps/web/src/lib/renderer/nodes/color-node.ts b/apps/web/src/lib/renderer/nodes/color-node.ts
new file mode 100644
index 000000000..44e0d631e
--- /dev/null
+++ b/apps/web/src/lib/renderer/nodes/color-node.ts
@@ -0,0 +1,20 @@
+import { SceneRenderer } from "../scene-renderer";
+import { BaseNode } from "./base-node";
+
+export type ColorNodeParams = {
+  color: string;
+};
+
+export class ColorNode extends BaseNode<ColorNodeParams> {
+  private color: string;
+
+  constructor(params: ColorNodeParams) {
+    super(params);
+    this.color = params.color;
+  }
+
+  async render(renderer: SceneRenderer, time: number) {
+    renderer.context.fillStyle = this.color;
+    renderer.context.fillRect(0, 0, renderer.width, renderer.height);
+  }
+}
diff --git a/apps/web/src/lib/renderer/nodes/scene-node.ts b/apps/web/src/lib/renderer/nodes/scene-node.ts
new file mode 100644
index 000000000..f60e4c4e2
--- /dev/null
+++ b/apps/web/src/lib/renderer/nodes/scene-node.ts
@@ -0,0 +1,11 @@
+import { BaseNode } from "./base-node";
+
+export type SceneNodeParams = {
+  duration: number;
+};
+
+export class SceneNode extends BaseNode<SceneNodeParams> {
+  get duration() {
+    return this.params.duration ?? 0;
+  }
+}
diff --git a/apps/web/src/lib/renderer/nodes/time-offset-node.ts b/apps/web/src/lib/renderer/nodes/time-offset-node.ts
new file mode 100644
index 000000000..7c6d6f49b
--- /dev/null
+++ b/apps/web/src/lib/renderer/nodes/time-offset-node.ts
@@ -0,0 +1,16 @@
+import { SceneRenderer } from "../scene-renderer";
+import { BaseNode } from "./base-node";
+
+export type TimeOffsetNodeParams = {
+  timeOffset?: number;
+};
+
+export class TimeOffsetNode extends BaseNode<TimeOffsetNodeParams> {
+  get timeOffset() {
+    return this.params.timeOffset ?? 0;
+  }
+
+  async render(renderer: SceneRenderer, time: number) {
+    await super.render(renderer, time - this.timeOffset);
+  }
+}
diff --git a/apps/web/src/lib/renderer/nodes/timecode-node.ts b/apps/web/src/lib/renderer/nodes/timecode-node.ts
new file mode 100644
index 000000000..5307857c8
--- /dev/null
+++ b/apps/web/src/lib/renderer/nodes/timecode-node.ts
@@ -0,0 +1,20 @@
+import { SceneRenderer } from "../scene-renderer";
+import { BaseNode } from "./base-node";
+
+export class TimecodeNode extends BaseNode {
+  async render(renderer: SceneRenderer, time: number) {
+    renderer.context.fillStyle = "white";
+    renderer.context.font = "16px Arial";
+
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time) % 60;
+    const frame = Math.floor(time * renderer.fps) % renderer.fps;
+
+    const minutesStr = minutes.toString().padStart(2, "0");
+    const secondsStr = seconds.toString().padStart(2, "0");
+    const frameStr = frame.toString().padStart(2, "0");
+
+    const text = `${minutesStr}:${secondsStr}:${frameStr}`;
+    renderer.context.fillText(text, 10, 20);
+  }
+}
diff --git a/apps/web/src/lib/renderer/nodes/video-node.ts b/apps/web/src/lib/renderer/nodes/video-node.ts
new file mode 100644
index 000000000..8bb197869
--- /dev/null
+++ b/apps/web/src/lib/renderer/nodes/video-node.ts
@@ -0,0 +1,50 @@
+import { SceneRenderer } from "../scene-renderer";
+import { BaseNode } from "./base-node";
+
+export type VideoNodeParams = {
+  video: HTMLVideoElement | string;
+};
+
+export class VideoNode extends BaseNode<VideoNodeParams> {
+  private videoElement: HTMLVideoElement;
+
+  constructor(params: VideoNodeParams) {
+    super(params);
+
+    if (typeof params.video === "string") {
+      this.videoElement = document.createElement("video");
+      this.videoElement.src = params.video;
+      this.videoElement.muted = true;
+    } else {
+      this.videoElement = params.video;
+    }
+  }
+
+  get duration() {
+    return this.videoElement.duration;
+  }
+
+  async seek(time: number) {
+    this.videoElement.currentTime = time;
+    return new Promise<void>((resolve) => {
+      this.videoElement.onseeked = () => resolve();
+    });
+  }
+
+  async render(renderer: SceneRenderer, time: number) {
+    await super.render(renderer, time);
+
+    if (time < 0 || time > this.duration) {
+      return;
+    }
+
+    await this.seek(time);
+    renderer.context.drawImage(
+      this.videoElement,
+      0,
+      0,
+      renderer.width,
+      renderer.height
+    );
+  }
+}
diff --git a/apps/web/src/lib/renderer/scene-builder.ts b/apps/web/src/lib/renderer/scene-builder.ts
new file mode 100644
index 000000000..df11b1e11
--- /dev/null
+++ b/apps/web/src/lib/renderer/scene-builder.ts
@@ -0,0 +1,44 @@
+import { SceneNode } from "./nodes/scene-node";
+import { ColorNode } from "./nodes/color-node";
+import { VideoNode } from "./nodes/video-node";
+import { TimeOffsetNode } from "./nodes/time-offset-node";
+import { TimecodeNode } from "./nodes/timecode-node";
+import { BaseNode } from "./nodes/base-node";
+
+// Registry of node constructors
+const nodeConstructors = {
+  scene: SceneNode,
+  color: ColorNode,
+  video: VideoNode,
+  timeOffset: TimeOffsetNode,
+  timecode: TimecodeNode,
+} as const;
+
+type NodeType = keyof typeof nodeConstructors;
+
+type NodeParams<T extends NodeType> = ConstructorParameters<
+  (typeof nodeConstructors)[T]
+>[0];
+
+type NodeDefinition<T extends NodeType = NodeType> = {
+  type: T;
+  params?: NodeParams<T>;
+  children?: NodeDefinition[];
+};
+
+export const buildNode = <T extends NodeType>(
+  definition: NodeDefinition<T>
+): BaseNode => {
+  const NodeConstructor = nodeConstructors[definition.type];
+  const node = new NodeConstructor(definition.params || ({} as any));
+  if (definition.children) {
+    for (const child of definition.children) {
+      node.add(buildNode(child));
+    }
+  }
+  return node;
+};
+
+export const buildScene = (definition: NodeDefinition<"scene">): SceneNode => {
+  return buildNode(definition) as SceneNode;
+};
diff --git a/apps/web/src/lib/renderer/scene-exporter.ts b/apps/web/src/lib/renderer/scene-exporter.ts
new file mode 100644
index 000000000..2190f0332
--- /dev/null
+++ b/apps/web/src/lib/renderer/scene-exporter.ts
@@ -0,0 +1,80 @@
+import EventEmitter from "eventemitter3";
+
+import {
+  Output,
+  Mp4OutputFormat,
+  BufferTarget,
+  CanvasSource,
+} from "mediabunny";
+
+import { SceneNode } from "./nodes/scene-node";
+import { SceneRenderer } from "./scene-renderer";
+
+type ExportParams = {
+  width: number;
+  height: number;
+  fps: number;
+  bitrate?: number;
+};
+
+const DEFAULT_BITRATE = 2_000_000;
+
+export type SceneExporterEvents = {
+  progress: [progress: number];
+  complete: [blob: Blob];
+  error: [error: Error];
+};
+
+export class SceneExporter extends EventEmitter<SceneExporterEvents> {
+  private renderer: SceneRenderer;
+  private bitrate: number;
+
+  constructor(params: ExportParams) {
+    super();
+    this.renderer = new SceneRenderer({
+      width: params.width,
+      height: params.height,
+      fps: params.fps,
+    });
+
+    this.bitrate = params.bitrate ?? DEFAULT_BITRATE;
+  }
+
+  async export(scene: SceneNode) {
+    const { fps } = this.renderer;
+    const frameCount = Math.ceil(scene.duration * fps);
+
+    const output = new Output({
+      format: new Mp4OutputFormat(),
+      target: new BufferTarget(),
+    });
+
+    const videoSource = new CanvasSource(this.renderer.canvas, {
+      codec: "avc",
+      bitrate: this.bitrate,
+    });
+
+    output.addVideoTrack(videoSource);
+
+    await output.start();
+
+    for (let i = 0; i < frameCount; i++) {
+      await this.renderer.render(scene, i);
+      await videoSource.add(i / fps, 1 / fps);
+      this.emit("progress", i / frameCount);
+    }
+
+    await output.finalize();
+    this.emit("progress", 1);
+
+    const buffer = output.target.buffer;
+    if (!buffer) {
+      this.emit("error", new Error("Failed to export video"));
+      return null;
+    }
+
+    const blob = new Blob([buffer], { type: "video/mp4" });
+    this.emit("complete", blob);
+    return blob;
+  }
+}
diff --git a/apps/web/src/lib/renderer/scene-renderer.ts b/apps/web/src/lib/renderer/scene-renderer.ts
new file mode 100644
index 000000000..e4047c178
--- /dev/null
+++ b/apps/web/src/lib/renderer/scene-renderer.ts
@@ -0,0 +1,64 @@
+import { BaseNode } from "./nodes/base-node";
+
+export type SceneRendererParams = {
+  width: number;
+  height: number;
+  fps: number;
+};
+
+export class SceneRenderer {
+  canvas: OffscreenCanvas;
+  context: OffscreenCanvasRenderingContext2D;
+
+  width: number;
+  height: number;
+  fps: number;
+
+  constructor(params: SceneRendererParams) {
+    this.width = params.width;
+    this.height = params.height;
+    this.fps = params.fps;
+
+    this.canvas = new OffscreenCanvas(params.width, params.height);
+
+    const context = this.canvas.getContext("2d");
+
+    if (!context) {
+      throw new Error("Failed to get canvas context");
+    }
+
+    this.context = context;
+  }
+
+  setSize(width: number, height: number) {
+    this.canvas = new OffscreenCanvas(width, height);
+    this.width = width;
+    this.height = height;
+  }
+
+  private clear() {
+    this.context.fillStyle = "black";
+    this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+
+  async render(node: BaseNode, frame: number) {
+    this.clear();
+    await node.render(this, frame / this.fps);
+  }
+
+  async renderToCanvas(
+    node: BaseNode,
+    frame: number,
+    canvas: HTMLCanvasElement
+  ) {
+    await this.render(node, frame);
+
+    const ctx = canvas.getContext("2d")!;
+
+    if (!ctx) {
+      throw new Error("Failed to get canvas context");
+    }
+
+    ctx.drawImage(this.canvas, 0, 0, canvas.width, canvas.height);
+  }
+}
diff --git a/apps/web/src/stores/renderer-store.ts b/apps/web/src/stores/renderer-store.ts
new file mode 100644
index 000000000..36d7db4fe
--- /dev/null
+++ b/apps/web/src/stores/renderer-store.ts
@@ -0,0 +1,12 @@
+import { create } from "zustand";
+import { SceneNode } from "@/lib/renderer/nodes/scene-node";
+
+interface RendererState {
+  scene: SceneNode | null;
+  setScene: (scene: SceneNode | null) => void;
+}
+
+export const useRendererStore = create<RendererState>((set) => ({
+  scene: null,
+  setScene: (scene: SceneNode | null) => set({ scene }),
+}));
diff --git a/bun.lock b/bun.lock
index 83da5eff4..41e7695cb 100644
--- a/bun.lock
+++ b/bun.lock
@@ -41,6 +41,7 @@
         "dotenv": "^16.5.0",
         "drizzle-orm": "^0.44.2",
         "embla-carousel-react": "^8.5.1",
+        "eventemitter3": "^5.0.1",
         "feed": "^5.1.0",
         "framer-motion": "^11.13.1",
         "input-otp": "^1.4.1",
@@ -68,6 +69,7 @@
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7",
         "unified": "^11.0.5",
+        "use-deep-compare-effect": "^1.8.1",
         "vaul": "^1.1.1",
         "zod": "^3.25.67",
         "zustand": "^5.0.2",
@@ -748,7 +750,7 @@
 
     "estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
 
-    "eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
+    "eventemitter3": ["eventemitter3@5.0.1", "", {}, "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="],
 
     "expect-type": ["expect-type@1.2.2", "", {}, "sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA=="],
 
@@ -1184,6 +1186,8 @@
 
     "use-callback-ref": ["use-callback-ref@1.3.3", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg=="],
 
+    "use-deep-compare-effect": ["use-deep-compare-effect@1.8.1", "", { "dependencies": { "@babel/runtime": "^7.12.5", "dequal": "^2.0.2" }, "peerDependencies": { "react": ">=16.13" } }, "sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q=="],
+
     "use-sidecar": ["use-sidecar@1.1.3", "", { "dependencies": { "detect-node-es": "^1.1.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ=="],
 
     "use-sync-external-store": ["use-sync-external-store@1.5.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A=="],
@@ -1256,6 +1260,8 @@
 
     "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
+    "recharts/eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
+
     "strip-literal/js-tokens": ["js-tokens@9.0.1", "", {}, "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ=="],
 
     "@esbuild-kit/core-utils/esbuild/@esbuild/android-arm": ["@esbuild/android-arm@0.18.20", "", { "os": "android", "cpu": "arm" }, "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw=="],

From 2091387433fa9a37972082cf1a29544071588fd9 Mon Sep 17 00:00:00 2001
From: Rodrigo <rodrigobelfiore@gmail.com>
Date: Mon, 25 Aug 2025 19:59:30 +0200
Subject: [PATCH 2/5] using canvas renderer

---
 apps/web/src/app/editor/[project_id]/page.tsx | 13 +++++++-----
 apps/web/src/components/editor-header.tsx     |  7 +++++--
 .../editor/renderer/canvas-preview-panel.tsx  | 13 ++++++++++--
 .../editor/renderer/scene-preview-canvas.tsx  | 20 ++++++++++++++-----
 4 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 89da5b9ec..43c212a04 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -10,7 +10,7 @@ import {
 import { MediaPanel } from "../../../components/editor/media-panel";
 import { PropertiesPanel } from "../../../components/editor/properties-panel";
 import { Timeline } from "../../../components/editor/timeline";
-import { PreviewPanel } from "../../../components/editor/preview-panel";
+// import { PreviewPanel } from "../../../components/editor/preview-panel";
 import { EditorHeader } from "@/components/editor-header";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
@@ -200,7 +200,7 @@ export default function Editor() {
                         onResize={setPreviewPanel}
                         className="min-w-0 min-h-0 flex-1"
                       >
-                        <PreviewPanel />
+                        <CanvasPreviewPanel />
                       </ResizablePanel>
 
                       <ResizableHandle withHandle />
@@ -276,7 +276,8 @@ export default function Editor() {
                         onResize={setPreviewPanel}
                         className="min-w-0 min-h-0 flex-1"
                       >
-                        <PreviewPanel />
+                        {/* <PreviewPanel /> */}
+                        <CanvasPreviewPanel />
                       </ResizablePanel>
                     </ResizablePanelGroup>
                   </ResizablePanel>
@@ -380,7 +381,8 @@ export default function Editor() {
                 onResize={setPreviewPanel}
                 className="min-w-0 min-h-0"
               >
-                <PreviewPanel />
+                {/* <PreviewPanel /> */}
+                <CanvasPreviewPanel />
               </ResizablePanel>
             </ResizablePanelGroup>
           ) : (
@@ -421,7 +423,8 @@ export default function Editor() {
                     onResize={setPreviewPanel}
                     className="min-w-0 min-h-0 flex-1"
                   >
-                    <PreviewPanel />
+                    {/* <PreviewPanel /> */}
+                    <CanvasPreviewPanel />
                   </ResizablePanel>
 
                   <ResizableHandle withHandle />
diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index ee5dfc178..006a1572d 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -20,7 +20,8 @@ import { useRouter } from "next/navigation";
 import { FaDiscord } from "react-icons/fa6";
 import { useTheme } from "next-themes";
 import { PanelPresetSelector } from "./panel-preset-selector";
-import { ExportButton } from "./export-button";
+// import { ExportButton } from "./export-button";
+import { ExportDialog } from "./editor/renderer/export-dialog";
 
 export function EditorHeader() {
   const { activeProject, renameProject, deleteProject } = useProjectStore();
@@ -116,7 +117,9 @@ export function EditorHeader() {
     <nav className="flex items-center gap-2">
       <PanelPresetSelector />
       <KeyboardShortcutsHelp />
-      <ExportButton />
+      <ExportDialog>
+        <Button>Export</Button>
+      </ExportDialog>
       <Button
         size="icon"
         variant="text"
diff --git a/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx b/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx
index b419a5f16..b33c7d906 100644
--- a/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx
+++ b/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx
@@ -7,12 +7,21 @@ import { TimeOffsetNode } from "@/lib/renderer/nodes/time-offset-node";
 import { TimecodeNode } from "@/lib/renderer/nodes/timecode-node";
 import { VideoNode } from "@/lib/renderer/nodes/video-node";
 import { SceneRenderer } from "@/lib/renderer/scene-renderer";
-import { useEditorStore } from "@/stores/editor-store";
 import { useMediaStore } from "@/stores/media-store";
 import { usePlaybackStore } from "@/stores/playback-store";
 import { useRendererStore } from "@/stores/renderer-store";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { TimelineElement } from "@/types/timeline";
+import { useProjectStore } from "@/stores/project-store";
+
+// TODO: get preview size in a better way
+function usePreviewSize() {
+  const { activeProject } = useProjectStore();
+  return {
+    width: activeProject?.canvasSize?.width || 600,
+    height: activeProject?.canvasSize?.height || 320,
+  };
+}
 
 function useActiveElements(): TimelineElement[] {
   const tracks = useTimelineStore((s) => s.tracks);
@@ -54,7 +63,7 @@ function PreviewCanvas() {
   const lastFrameRef = useRef(0);
   const lastSceneRef = useRef<SceneNode | null>(null);
 
-  const { width, height } = useEditorStore((s) => s.canvasSize);
+  const { width, height } = usePreviewSize();
 
   const renderer = useMemo(() => {
     return new SceneRenderer({
diff --git a/apps/web/src/components/editor/renderer/scene-preview-canvas.tsx b/apps/web/src/components/editor/renderer/scene-preview-canvas.tsx
index dd0a7bf04..f2b9655d6 100644
--- a/apps/web/src/components/editor/renderer/scene-preview-canvas.tsx
+++ b/apps/web/src/components/editor/renderer/scene-preview-canvas.tsx
@@ -1,10 +1,19 @@
 import { SceneRenderer } from "@/lib/renderer/scene-renderer";
 import { useEffect, useRef, useState } from "react";
 import { SceneNode } from "@/lib/renderer/nodes/scene-node";
+import { useProjectStore } from "@/stores/project-store";
 
-const PREVIEW_SIZE = { width: 600, height: 320 };
 const PREVIEW_FPS = 30;
 
+// TODO: get preview size in a better way
+function usePreviewSize() {
+  const { activeProject } = useProjectStore();
+  return {
+    width: activeProject?.canvasSize.width || 600,
+    height: activeProject?.canvasSize.height || 320,
+  };
+}
+
 export function ScenePreviewCanvas({
   frame,
   scene,
@@ -13,11 +22,12 @@ export function ScenePreviewCanvas({
   scene: SceneNode;
 }) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
+  const size = usePreviewSize();
 
   const [renderer] = useState<SceneRenderer | null>(() => {
     const renderer = new SceneRenderer({
-      width: PREVIEW_SIZE.width,
-      height: PREVIEW_SIZE.height,
+      width: size.width,
+      height: size.height,
       fps: PREVIEW_FPS,
     });
 
@@ -32,8 +42,8 @@ export function ScenePreviewCanvas({
 
   return (
     <canvas
-      width={PREVIEW_SIZE.width}
-      height={PREVIEW_SIZE.height}
+      width={size.width}
+      height={size.height}
       ref={canvasRef}
       className="w-full h-full"
     />

From 056ed2698cafaecdaf09a4d3baf79990d6a2fe17 Mon Sep 17 00:00:00 2001
From: Rodrigo <rodrigobelfiore@gmail.com>
Date: Thu, 28 Aug 2025 17:09:43 +0200
Subject: [PATCH 3/5] video export working

---
 apps/web/src/app/editor/[project_id]/page.tsx | 14 +++--
 .../editor/renderer/canvas-preview-panel.tsx  | 35 ++++---------
 .../editor/renderer/export-dialog.tsx         | 52 +++++++++++++++----
 .../editor/renderer/scene-preview-canvas.tsx  | 51 ------------------
 apps/web/src/lib/renderer/build-scene.ts      | 46 ++++++++++++++++
 .../lib/renderer/nodes/time-offset-node.ts    | 16 ------
 apps/web/src/lib/renderer/nodes/video-node.ts | 47 +++++++++++++----
 apps/web/src/lib/renderer/scene-builder.ts    | 44 ----------------
 apps/web/src/lib/renderer/scene-exporter.ts   | 15 +++++-
 9 files changed, 154 insertions(+), 166 deletions(-)
 delete mode 100644 apps/web/src/components/editor/renderer/scene-preview-canvas.tsx
 create mode 100644 apps/web/src/lib/renderer/build-scene.ts
 delete mode 100644 apps/web/src/lib/renderer/nodes/time-offset-node.ts
 delete mode 100644 apps/web/src/lib/renderer/scene-builder.ts

diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 43c212a04..b3144214f 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -10,14 +10,14 @@ import {
 import { MediaPanel } from "../../../components/editor/media-panel";
 import { PropertiesPanel } from "../../../components/editor/properties-panel";
 import { Timeline } from "../../../components/editor/timeline";
-// import { PreviewPanel } from "../../../components/editor/preview-panel";
 import { EditorHeader } from "@/components/editor-header";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
 import { EditorProvider } from "@/components/editor-provider";
 import { usePlaybackControls } from "@/hooks/use-playback-controls";
 import { Onboarding } from "@/components/onboarding";
-import { CanvasPreviewPanel } from "@/components/editor/renderer/canvas-preview-panel";
+// import { CanvasPreviewPanel as PreviewPanel } from "@/components/editor/renderer/canvas-preview-panel";
+import { PreviewPanel } from "@/components/editor/preview-panel";
 
 export default function Editor() {
   const {
@@ -200,7 +200,7 @@ export default function Editor() {
                         onResize={setPreviewPanel}
                         className="min-w-0 min-h-0 flex-1"
                       >
-                        <CanvasPreviewPanel />
+                        <PreviewPanel />
                       </ResizablePanel>
 
                       <ResizableHandle withHandle />
@@ -277,7 +277,7 @@ export default function Editor() {
                         className="min-w-0 min-h-0 flex-1"
                       >
                         {/* <PreviewPanel /> */}
-                        <CanvasPreviewPanel />
+                        <PreviewPanel />
                       </ResizablePanel>
                     </ResizablePanelGroup>
                   </ResizablePanel>
@@ -381,8 +381,7 @@ export default function Editor() {
                 onResize={setPreviewPanel}
                 className="min-w-0 min-h-0"
               >
-                {/* <PreviewPanel /> */}
-                <CanvasPreviewPanel />
+                <PreviewPanel />
               </ResizablePanel>
             </ResizablePanelGroup>
           ) : (
@@ -423,8 +422,7 @@ export default function Editor() {
                     onResize={setPreviewPanel}
                     className="min-w-0 min-h-0 flex-1"
                   >
-                    {/* <PreviewPanel /> */}
-                    <CanvasPreviewPanel />
+                    <PreviewPanel />
                   </ResizablePanel>
 
                   <ResizableHandle withHandle />
diff --git a/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx b/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx
index b33c7d906..8bebc5afc 100644
--- a/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx
+++ b/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx
@@ -3,16 +3,13 @@ import useDeepCompareEffect from "use-deep-compare-effect";
 
 import { useRafLoop } from "@/hooks/use-raf-loop";
 import { SceneNode } from "@/lib/renderer/nodes/scene-node";
-import { TimeOffsetNode } from "@/lib/renderer/nodes/time-offset-node";
-import { TimecodeNode } from "@/lib/renderer/nodes/timecode-node";
-import { VideoNode } from "@/lib/renderer/nodes/video-node";
 import { SceneRenderer } from "@/lib/renderer/scene-renderer";
 import { useMediaStore } from "@/stores/media-store";
 import { usePlaybackStore } from "@/stores/playback-store";
 import { useRendererStore } from "@/stores/renderer-store";
 import { useTimelineStore } from "@/stores/timeline-store";
-import { TimelineElement } from "@/types/timeline";
 import { useProjectStore } from "@/stores/project-store";
+import { buildScene } from "@/lib/renderer/build-scene";
 
 // TODO: get preview size in a better way
 function usePreviewSize() {
@@ -23,37 +20,23 @@ function usePreviewSize() {
   };
 }
 
-function useActiveElements(): TimelineElement[] {
-  const tracks = useTimelineStore((s) => s.tracks);
-  return tracks.flatMap((track) => track.elements);
-}
-
 function RendererSceneController() {
   const setScene = useRendererStore((s) => s.setScene);
+
+  const tracks = useTimelineStore((s) => s.tracks);
   const mediaItems = useMediaStore((s) => s.mediaItems);
-  const elements = useActiveElements();
 
   const getTotalDuration = useTimelineStore((s) => s.getTotalDuration);
 
   useDeepCompareEffect(() => {
-    const scene = new SceneNode({ duration: getTotalDuration() });
-
-    for (const element of elements) {
-      if (element.type === "media") {
-        const media = mediaItems.find((m) => m.id === element.mediaId);
-        if (media && media.url) {
-          scene.add(
-            new TimeOffsetNode({ timeOffset: element.startTime }).add(
-              new VideoNode({ video: media.url })
-            )
-          );
-        }
-      }
-    }
+    const scene = buildScene({
+      tracks,
+      mediaItems,
+      duration: getTotalDuration(),
+    });
 
-    scene.add(new TimecodeNode());
     setScene(scene);
-  }, [elements, mediaItems, getTotalDuration]);
+  }, [tracks, mediaItems, getTotalDuration]);
 
   return null;
 }
diff --git a/apps/web/src/components/editor/renderer/export-dialog.tsx b/apps/web/src/components/editor/renderer/export-dialog.tsx
index 742b44049..202aa014c 100644
--- a/apps/web/src/components/editor/renderer/export-dialog.tsx
+++ b/apps/web/src/components/editor/renderer/export-dialog.tsx
@@ -12,9 +12,11 @@ import {
 } from "@/components/ui/dialog";
 
 import { Button } from "@/components/ui/button";
-import { SceneNode } from "@/lib/renderer/nodes/scene-node";
 import { Progress } from "@/components/ui/progress";
-import { useRendererStore } from "@/stores/renderer-store";
+import { buildScene } from "@/lib/renderer/build-scene";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { useMediaStore } from "@/stores/media-store";
+import { useProjectStore } from "@/stores/project-store";
 
 function downloadBlob(blob: Blob, filename: string) {
   const url = URL.createObjectURL(blob);
@@ -43,27 +45,43 @@ export function ExportDialog({ children }: { children: React.ReactNode }) {
   const [isExporting, setIsExporting] = useState(false);
   const [progress, setProgress] = useState(0);
   const [error, setError] = useState<string | null>(null);
-  const scene = useRendererStore((s) => s.scene);
+
+  const [exporter, setExporter] = useState<SceneExporter | null>(null);
 
   const handleOpenChange = (open: boolean) => {
+    if (isExporting) {
+      return;
+    }
+
     setIsOpen(open);
     setError(null);
     setProgress(0);
   };
 
   const handleExport = async () => {
-    if (!scene) {
-      return;
-    }
-
+    setProgress(0);
     setIsExporting(true);
 
+    const project = useProjectStore.getState().activeProject;
+
+    const width = project?.canvasSize.width ?? 640;
+    const height = project?.canvasSize.height ?? 720;
+    const fps = project?.fps ?? 30;
+
+    const scene = buildScene({
+      tracks: useTimelineStore.getState().tracks,
+      mediaItems: useMediaStore.getState().mediaItems,
+      duration: useTimelineStore.getState().getTotalDuration(),
+    });
+
     const exporter = new SceneExporter({
-      width: 600, // TODO: Use project's aspect ratio
-      height: 320, // TODO: Use project's aspect ratio
-      fps: 30, // TODO: Use project's frame rate
+      width,
+      height,
+      fps,
     });
 
+    setExporter(exporter);
+
     exporter.on("progress", (progress) => {
       setProgress(progress);
     });
@@ -79,6 +97,13 @@ export function ExportDialog({ children }: { children: React.ReactNode }) {
 
     await exporter.export(scene);
     setIsExporting(false);
+    setExporter(null);
+  };
+
+  const handleCancel = () => {
+    exporter?.cancel();
+    setIsExporting(false);
+    setIsOpen(false);
   };
 
   return (
@@ -94,7 +119,12 @@ export function ExportDialog({ children }: { children: React.ReactNode }) {
           {error && <div className="text-red-500">{error}</div>}
         </div>
         <DialogFooter>
-          <Button disabled={isExporting || !scene} onClick={handleExport}>
+          {isExporting && (
+            <Button variant="outline" onClick={handleCancel}>
+              Cancel
+            </Button>
+          )}
+          <Button disabled={isExporting} onClick={handleExport}>
             Export
           </Button>
         </DialogFooter>
diff --git a/apps/web/src/components/editor/renderer/scene-preview-canvas.tsx b/apps/web/src/components/editor/renderer/scene-preview-canvas.tsx
deleted file mode 100644
index f2b9655d6..000000000
--- a/apps/web/src/components/editor/renderer/scene-preview-canvas.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { SceneRenderer } from "@/lib/renderer/scene-renderer";
-import { useEffect, useRef, useState } from "react";
-import { SceneNode } from "@/lib/renderer/nodes/scene-node";
-import { useProjectStore } from "@/stores/project-store";
-
-const PREVIEW_FPS = 30;
-
-// TODO: get preview size in a better way
-function usePreviewSize() {
-  const { activeProject } = useProjectStore();
-  return {
-    width: activeProject?.canvasSize.width || 600,
-    height: activeProject?.canvasSize.height || 320,
-  };
-}
-
-export function ScenePreviewCanvas({
-  frame,
-  scene,
-}: {
-  frame: number;
-  scene: SceneNode;
-}) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const size = usePreviewSize();
-
-  const [renderer] = useState<SceneRenderer | null>(() => {
-    const renderer = new SceneRenderer({
-      width: size.width,
-      height: size.height,
-      fps: PREVIEW_FPS,
-    });
-
-    return renderer;
-  });
-
-  useEffect(() => {
-    if (renderer && scene && canvasRef.current) {
-      renderer.renderToCanvas(scene, frame, canvasRef.current);
-    }
-  }, [scene, renderer, frame]);
-
-  return (
-    <canvas
-      width={size.width}
-      height={size.height}
-      ref={canvasRef}
-      className="w-full h-full"
-    />
-  );
-}
diff --git a/apps/web/src/lib/renderer/build-scene.ts b/apps/web/src/lib/renderer/build-scene.ts
new file mode 100644
index 000000000..4ffe9ce51
--- /dev/null
+++ b/apps/web/src/lib/renderer/build-scene.ts
@@ -0,0 +1,46 @@
+import { type TimelineTrack } from "@/types/timeline";
+import { type MediaItem } from "@/stores/media-store";
+
+import { SceneNode } from "./nodes/scene-node";
+import { VideoNode } from "./nodes/video-node";
+import { TimecodeNode } from "./nodes/timecode-node";
+
+export type BuildSceneParams = {
+  tracks: TimelineTrack[];
+  mediaItems: MediaItem[];
+  duration: number;
+};
+
+export function buildScene(params: BuildSceneParams) {
+  const { tracks, mediaItems, duration } = params;
+
+  const scene = new SceneNode({ duration });
+
+  const elements = tracks
+    .slice()
+    .reverse()
+    .filter((track) => track.muted !== true)
+    .flatMap((track) => track.elements);
+
+  for (const element of elements) {
+    if (element.type === "media") {
+      const media = mediaItems.find((m) => m.id === element.mediaId);
+      console.log(element);
+      if (media && media.url) {
+        scene.add(
+          new VideoNode({
+            video: media.url,
+            duration: element.duration,
+            timeOffset: element.startTime,
+            trimStart: element.trimStart,
+            trimEnd: element.trimEnd,
+          })
+        );
+      }
+    }
+  }
+
+  scene.add(new TimecodeNode());
+
+  return scene;
+}
diff --git a/apps/web/src/lib/renderer/nodes/time-offset-node.ts b/apps/web/src/lib/renderer/nodes/time-offset-node.ts
deleted file mode 100644
index 7c6d6f49b..000000000
--- a/apps/web/src/lib/renderer/nodes/time-offset-node.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { SceneRenderer } from "../scene-renderer";
-import { BaseNode } from "./base-node";
-
-export type TimeOffsetNodeParams = {
-  timeOffset?: number;
-};
-
-export class TimeOffsetNode extends BaseNode<TimeOffsetNodeParams> {
-  get timeOffset() {
-    return this.params.timeOffset ?? 0;
-  }
-
-  async render(renderer: SceneRenderer, time: number) {
-    await super.render(renderer, time - this.timeOffset);
-  }
-}
diff --git a/apps/web/src/lib/renderer/nodes/video-node.ts b/apps/web/src/lib/renderer/nodes/video-node.ts
index 8bb197869..dda6e2fa9 100644
--- a/apps/web/src/lib/renderer/nodes/video-node.ts
+++ b/apps/web/src/lib/renderer/nodes/video-node.ts
@@ -1,12 +1,20 @@
 import { SceneRenderer } from "../scene-renderer";
 import { BaseNode } from "./base-node";
 
+const VIDEO_EPSILON = 1 / 500;
+
 export type VideoNodeParams = {
   video: HTMLVideoElement | string;
+  duration: number;
+  timeOffset: number;
+  trimStart: number;
+  trimEnd: number;
 };
 
 export class VideoNode extends BaseNode<VideoNodeParams> {
-  private videoElement: HTMLVideoElement;
+  videoElement: HTMLVideoElement;
+
+  readyPromise: Promise<void>;
 
   constructor(params: VideoNodeParams) {
     super(params);
@@ -18,27 +26,48 @@ export class VideoNode extends BaseNode<VideoNodeParams> {
     } else {
       this.videoElement = params.video;
     }
-  }
 
-  get duration() {
-    return this.videoElement.duration;
+    this.readyPromise = new Promise((resolve) => {
+      this.videoElement.addEventListener("canplay", () => {
+        resolve();
+      });
+    });
   }
 
-  async seek(time: number) {
-    this.videoElement.currentTime = time;
+  async seek(videoTime: number) {
+    await this.readyPromise;
     return new Promise<void>((resolve) => {
-      this.videoElement.onseeked = () => resolve();
+      const handleSeeked = () => {
+        this.videoElement.removeEventListener("seeked", handleSeeked);
+        resolve();
+      };
+      this.videoElement.addEventListener("seeked", handleSeeked);
+      this.videoElement.currentTime = videoTime;
     });
   }
 
+  getVideoTime(time: number) {
+    return time - this.params.timeOffset + this.params.trimStart;
+  }
+
+  isInRange(time: number) {
+    const videoTime = this.getVideoTime(time);
+    return (
+      videoTime >= this.params.trimStart - VIDEO_EPSILON &&
+      videoTime < this.params.duration - this.params.trimEnd
+    );
+  }
+
   async render(renderer: SceneRenderer, time: number) {
     await super.render(renderer, time);
 
-    if (time < 0 || time > this.duration) {
+    if (!this.isInRange(time)) {
       return;
     }
 
-    await this.seek(time);
+    const videoTime = this.getVideoTime(time);
+    await this.seek(videoTime);
+
     renderer.context.drawImage(
       this.videoElement,
       0,
diff --git a/apps/web/src/lib/renderer/scene-builder.ts b/apps/web/src/lib/renderer/scene-builder.ts
deleted file mode 100644
index df11b1e11..000000000
--- a/apps/web/src/lib/renderer/scene-builder.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { SceneNode } from "./nodes/scene-node";
-import { ColorNode } from "./nodes/color-node";
-import { VideoNode } from "./nodes/video-node";
-import { TimeOffsetNode } from "./nodes/time-offset-node";
-import { TimecodeNode } from "./nodes/timecode-node";
-import { BaseNode } from "./nodes/base-node";
-
-// Registry of node constructors
-const nodeConstructors = {
-  scene: SceneNode,
-  color: ColorNode,
-  video: VideoNode,
-  timeOffset: TimeOffsetNode,
-  timecode: TimecodeNode,
-} as const;
-
-type NodeType = keyof typeof nodeConstructors;
-
-type NodeParams<T extends NodeType> = ConstructorParameters<
-  (typeof nodeConstructors)[T]
->[0];
-
-type NodeDefinition<T extends NodeType = NodeType> = {
-  type: T;
-  params?: NodeParams<T>;
-  children?: NodeDefinition[];
-};
-
-export const buildNode = <T extends NodeType>(
-  definition: NodeDefinition<T>
-): BaseNode => {
-  const NodeConstructor = nodeConstructors[definition.type];
-  const node = new NodeConstructor(definition.params || ({} as any));
-  if (definition.children) {
-    for (const child of definition.children) {
-      node.add(buildNode(child));
-    }
-  }
-  return node;
-};
-
-export const buildScene = (definition: NodeDefinition<"scene">): SceneNode => {
-  return buildNode(definition) as SceneNode;
-};
diff --git a/apps/web/src/lib/renderer/scene-exporter.ts b/apps/web/src/lib/renderer/scene-exporter.ts
index 2190f0332..e262505b2 100644
--- a/apps/web/src/lib/renderer/scene-exporter.ts
+++ b/apps/web/src/lib/renderer/scene-exporter.ts
@@ -17,18 +17,21 @@ type ExportParams = {
   bitrate?: number;
 };
 
-const DEFAULT_BITRATE = 2_000_000;
+const DEFAULT_BITRATE = 4_000_000;
 
 export type SceneExporterEvents = {
   progress: [progress: number];
   complete: [blob: Blob];
   error: [error: Error];
+  cancelled: [];
 };
 
 export class SceneExporter extends EventEmitter<SceneExporterEvents> {
   private renderer: SceneRenderer;
   private bitrate: number;
 
+  private cancelled = false;
+
   constructor(params: ExportParams) {
     super();
     this.renderer = new SceneRenderer({
@@ -40,6 +43,10 @@ export class SceneExporter extends EventEmitter<SceneExporterEvents> {
     this.bitrate = params.bitrate ?? DEFAULT_BITRATE;
   }
 
+  cancel() {
+    this.cancelled = true;
+  }
+
   async export(scene: SceneNode) {
     const { fps } = this.renderer;
     const frameCount = Math.ceil(scene.duration * fps);
@@ -59,6 +66,12 @@ export class SceneExporter extends EventEmitter<SceneExporterEvents> {
     await output.start();
 
     for (let i = 0; i < frameCount; i++) {
+      if (this.cancelled) {
+        await output.cancel();
+        this.emit("cancelled");
+        return;
+      }
+
       await this.renderer.render(scene, i);
       await videoSource.add(i / fps, 1 / fps);
       this.emit("progress", i / frameCount);

From 431683484f2bda759a882bd0ff8fc47ea8e06712 Mon Sep 17 00:00:00 2001
From: Rodrigo <rodrigobelfiore@gmail.com>
Date: Thu, 28 Aug 2025 17:31:19 +0200
Subject: [PATCH 4/5] render text

---
 apps/web/src/app/editor/[project_id]/page.tsx |  4 +-
 .../editor/renderer/canvas-preview-panel.tsx  | 11 ++--
 .../editor/renderer/export-dialog.tsx         |  4 ++
 apps/web/src/lib/renderer/build-scene.ts      | 25 +++++++++-
 apps/web/src/lib/renderer/nodes/text-node.ts  | 50 +++++++++++++++++++
 5 files changed, 88 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/src/lib/renderer/nodes/text-node.ts

diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index b3144214f..8573b5ecc 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -16,8 +16,8 @@ import { useProjectStore } from "@/stores/project-store";
 import { EditorProvider } from "@/components/editor-provider";
 import { usePlaybackControls } from "@/hooks/use-playback-controls";
 import { Onboarding } from "@/components/onboarding";
-// import { CanvasPreviewPanel as PreviewPanel } from "@/components/editor/renderer/canvas-preview-panel";
-import { PreviewPanel } from "@/components/editor/preview-panel";
+import { CanvasPreviewPanel as PreviewPanel } from "@/components/editor/renderer/canvas-preview-panel";
+// import { PreviewPanel } from "@/components/editor/preview-panel";
 
 export default function Editor() {
   const {
diff --git a/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx b/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx
index 8bebc5afc..f79692827 100644
--- a/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx
+++ b/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx
@@ -27,12 +27,17 @@ function RendererSceneController() {
   const mediaItems = useMediaStore((s) => s.mediaItems);
 
   const getTotalDuration = useTimelineStore((s) => s.getTotalDuration);
+  const { width, height } = usePreviewSize();
 
   useDeepCompareEffect(() => {
     const scene = buildScene({
       tracks,
       mediaItems,
       duration: getTotalDuration(),
+      canvasSize: {
+        width,
+        height,
+      },
     });
 
     setScene(scene);
@@ -50,8 +55,8 @@ function PreviewCanvas() {
 
   const renderer = useMemo(() => {
     return new SceneRenderer({
-      width: width / 2,
-      height: height / 2,
+      width,
+      height,
       fps: 30, // TODO: get fps from project
     });
   }, [width, height]);
@@ -70,7 +75,7 @@ function PreviewCanvas() {
         lastFrameRef.current = frame;
       }
     }
-  }, [renderer, scene]);
+  }, [renderer, scene, width, height]);
 
   useRafLoop(render);
 
diff --git a/apps/web/src/components/editor/renderer/export-dialog.tsx b/apps/web/src/components/editor/renderer/export-dialog.tsx
index 202aa014c..4e6de4b50 100644
--- a/apps/web/src/components/editor/renderer/export-dialog.tsx
+++ b/apps/web/src/components/editor/renderer/export-dialog.tsx
@@ -72,6 +72,10 @@ export function ExportDialog({ children }: { children: React.ReactNode }) {
       tracks: useTimelineStore.getState().tracks,
       mediaItems: useMediaStore.getState().mediaItems,
       duration: useTimelineStore.getState().getTotalDuration(),
+      canvasSize: {
+        width,
+        height,
+      },
     });
 
     const exporter = new SceneExporter({
diff --git a/apps/web/src/lib/renderer/build-scene.ts b/apps/web/src/lib/renderer/build-scene.ts
index 4ffe9ce51..f74921994 100644
--- a/apps/web/src/lib/renderer/build-scene.ts
+++ b/apps/web/src/lib/renderer/build-scene.ts
@@ -4,15 +4,17 @@ import { type MediaItem } from "@/stores/media-store";
 import { SceneNode } from "./nodes/scene-node";
 import { VideoNode } from "./nodes/video-node";
 import { TimecodeNode } from "./nodes/timecode-node";
+import { TextNode } from "./nodes/text-node";
 
 export type BuildSceneParams = {
+  canvasSize: { width: number; height: number };
   tracks: TimelineTrack[];
   mediaItems: MediaItem[];
   duration: number;
 };
 
 export function buildScene(params: BuildSceneParams) {
-  const { tracks, mediaItems, duration } = params;
+  const { tracks, mediaItems, duration, canvasSize } = params;
 
   const scene = new SceneNode({ duration });
 
@@ -38,6 +40,27 @@ export function buildScene(params: BuildSceneParams) {
         );
       }
     }
+
+    if (element.type === "text") {
+      console.log(element);
+      scene.add(
+        new TextNode({
+          text: element.content,
+          fontSize: element.fontSize,
+          fontFamily: element.fontFamily,
+          fontWeight: element.fontWeight === "bold" ? 700 : 400,
+          fontStyle: element.fontStyle === "italic" ? "italic" : "normal",
+          textAlign: element.textAlign,
+          textBaseline: "middle",
+          color: element.color,
+          opacity: element.opacity,
+          timeStart: element.startTime,
+          duration: element.duration - element.trimEnd - element.trimStart,
+          x: element.x + canvasSize.width / 2,
+          y: element.y + canvasSize.height / 2,
+        })
+      );
+    }
   }
 
   scene.add(new TimecodeNode());
diff --git a/apps/web/src/lib/renderer/nodes/text-node.ts b/apps/web/src/lib/renderer/nodes/text-node.ts
new file mode 100644
index 000000000..061f3c3dd
--- /dev/null
+++ b/apps/web/src/lib/renderer/nodes/text-node.ts
@@ -0,0 +1,50 @@
+import { SceneRenderer } from "../scene-renderer";
+import { BaseNode } from "./base-node";
+
+export type TextNodeParams = {
+  text: string;
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: number;
+  fontStyle: string;
+  textAlign: CanvasTextAlign;
+  textBaseline: CanvasTextBaseline;
+  color: string;
+  opacity: number;
+
+  x: number;
+  y: number;
+
+  timeStart: number;
+  duration: number;
+};
+
+export class TextNode extends BaseNode<TextNodeParams> {
+  isInRange(time: number) {
+    return (
+      time >= this.params.timeStart &&
+      time < this.params.timeStart + this.params.duration
+    );
+  }
+
+  async render(renderer: SceneRenderer, time: number) {
+    if (!this.isInRange(time)) {
+      return;
+    }
+
+    renderer.context.save();
+
+    renderer.context.font = `${this.params.fontStyle} ${this.params.fontWeight} ${this.params.fontSize}px ${this.params.fontFamily}`;
+    renderer.context.textAlign = this.params.textAlign;
+    renderer.context.textBaseline = this.params.textBaseline;
+    renderer.context.fillStyle = this.params.color;
+
+    const prevAlpha = renderer.context.globalAlpha;
+    renderer.context.globalAlpha = this.params.opacity;
+
+    renderer.context.fillText(this.params.text, this.params.x, this.params.y);
+
+    renderer.context.globalAlpha = prevAlpha;
+    renderer.context.restore();
+  }
+}

From 46141185b76dac3e97f5f76b0b002c04a9085661 Mon Sep 17 00:00:00 2001
From: Rodrigo <rodrigobelfiore@gmail.com>
Date: Fri, 29 Aug 2025 22:44:59 +0200
Subject: [PATCH 5/5] read video using mediabunny

---
 apps/web/package.json                         |   1 +
 .../editor/renderer/canvas-preview-panel.tsx  |   9 +-
 apps/web/src/lib/renderer/nodes/video-node.ts | 140 ++++++++++++++----
 bun.lock                                      |  19 ++-
 4 files changed, 131 insertions(+), 38 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 64de170df..06f1499dd 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -44,6 +44,7 @@
     "framer-motion": "^11.13.1",
     "input-otp": "^1.4.1",
     "lucide-react": "^0.468.0",
+    "mediabunny": "^1.11.2",
     "motion": "^12.18.1",
     "nanoid": "^5.1.5",
     "next": "^15.4.5",
diff --git a/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx b/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx
index f79692827..79b932cb9 100644
--- a/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx
+++ b/apps/web/src/components/editor/renderer/canvas-preview-panel.tsx
@@ -50,6 +50,7 @@ function PreviewCanvas() {
   const ref = useRef<HTMLCanvasElement>(null);
   const lastFrameRef = useRef(0);
   const lastSceneRef = useRef<SceneNode | null>(null);
+  const renderingRef = useRef(false);
 
   const { width, height } = usePreviewSize();
 
@@ -64,15 +65,17 @@ function PreviewCanvas() {
   const scene = useRendererStore((s) => s.scene);
 
   const render = useCallback(() => {
-    if (ref.current && scene) {
+    if (ref.current && scene && !renderingRef.current) {
       const time = usePlaybackStore.getState().currentTime;
       const frame = Math.floor(time * renderer.fps);
 
       if (frame !== lastFrameRef.current || scene !== lastSceneRef.current) {
-        console.log("rendering", frame);
-        renderer.renderToCanvas(scene, frame, ref.current);
+        renderingRef.current = true;
         lastSceneRef.current = scene;
         lastFrameRef.current = frame;
+        renderer.renderToCanvas(scene, frame, ref.current).then(() => {
+          renderingRef.current = false;
+        });
       }
     }
   }, [renderer, scene, width, height]);
diff --git a/apps/web/src/lib/renderer/nodes/video-node.ts b/apps/web/src/lib/renderer/nodes/video-node.ts
index dda6e2fa9..4b602617f 100644
--- a/apps/web/src/lib/renderer/nodes/video-node.ts
+++ b/apps/web/src/lib/renderer/nodes/video-node.ts
@@ -1,10 +1,19 @@
+import {
+  Input,
+  ALL_FORMATS,
+  BlobSource,
+  CanvasSink,
+  WrappedCanvas,
+} from "mediabunny";
+
 import { SceneRenderer } from "../scene-renderer";
 import { BaseNode } from "./base-node";
 
-const VIDEO_EPSILON = 1 / 500;
+const VIDEO_EPSILON = 1 / 1000;
+const TIME_FORWARD = 0.5;
 
 export type VideoNodeParams = {
-  video: HTMLVideoElement | string;
+  video: string;
   duration: number;
   timeOffset: number;
   trimStart: number;
@@ -12,38 +21,64 @@ export type VideoNodeParams = {
 };
 
 export class VideoNode extends BaseNode<VideoNodeParams> {
-  videoElement: HTMLVideoElement;
+  sink?: CanvasSink;
+  frameIterator?: AsyncGenerator<WrappedCanvas, void, unknown>;
+  currentFrame?: WrappedCanvas;
 
   readyPromise: Promise<void>;
 
   constructor(params: VideoNodeParams) {
     super(params);
+    this.readyPromise = this.load(params.video);
+  }
 
-    if (typeof params.video === "string") {
-      this.videoElement = document.createElement("video");
-      this.videoElement.src = params.video;
-      this.videoElement.muted = true;
-    } else {
-      this.videoElement = params.video;
+  async load(url: string) {
+    const blob = await fetch(url).then((res) => res.blob());
+    const source = new BlobSource(blob);
+    const input = new Input({
+      source,
+      formats: ALL_FORMATS,
+    });
+    const videoTrack = await input.getPrimaryVideoTrack();
+
+    if (!videoTrack) {
+      throw new Error("No video track found");
     }
 
-    this.readyPromise = new Promise((resolve) => {
-      this.videoElement.addEventListener("canplay", () => {
-        resolve();
-      });
+    if (!(await videoTrack.canDecode())) {
+      throw new Error("Unable to decode the video track.");
+    }
+
+    this.sink = new CanvasSink(videoTrack, {
+      poolSize: 2,
+      fit: "contain",
+      rotation: 90,
     });
   }
 
-  async seek(videoTime: number) {
-    await this.readyPromise;
-    return new Promise<void>((resolve) => {
-      const handleSeeked = () => {
-        this.videoElement.removeEventListener("seeked", handleSeeked);
-        resolve();
-      };
-      this.videoElement.addEventListener("seeked", handleSeeked);
-      this.videoElement.currentTime = videoTime;
-    });
+  async startFrameIterator(videoTime: number) {
+    console.log("starting frame iterator", videoTime);
+
+    if (!this.sink) {
+      throw new Error("Sink not initialized");
+    }
+
+    // Clear previous iterator
+    if (this.frameIterator) {
+      await this.frameIterator.return();
+    }
+
+    this.frameIterator = this.sink.canvases(videoTime);
+
+    // Return the first frame
+    const { value: frame } = await this.frameIterator.next();
+
+    if (!frame) {
+      throw new Error("No frame found");
+    }
+
+    this.currentFrame = frame;
+    return frame;
   }
 
   getVideoTime(time: number) {
@@ -58,6 +93,45 @@ export class VideoNode extends BaseNode<VideoNodeParams> {
     );
   }
 
+  async getFrameAt(videoTime: number) {
+    // If not iterator, start one
+    if (!this.frameIterator) {
+      return this.startFrameIterator(videoTime);
+    }
+
+    // If it's current frame, return it
+    if (
+      this.currentFrame &&
+      videoTime >= this.currentFrame.timestamp &&
+      videoTime < this.currentFrame.timestamp + this.currentFrame.duration
+    ) {
+      return this.currentFrame;
+    }
+
+    // If frame near in the iterator, iterate until it
+    if (
+      this.currentFrame &&
+      videoTime >= this.currentFrame.timestamp &&
+      videoTime < this.currentFrame.timestamp + TIME_FORWARD
+    ) {
+      while (true) {
+        const { value: frame } = await this.frameIterator.next();
+        if (!frame) {
+          break;
+        }
+
+        this.currentFrame = frame;
+
+        if (frame.timestamp >= videoTime) {
+          return frame;
+        }
+      }
+    }
+
+    // Otherwise, start a new iterator
+    return this.startFrameIterator(videoTime);
+  }
+
   async render(renderer: SceneRenderer, time: number) {
     await super.render(renderer, time);
 
@@ -65,15 +139,17 @@ export class VideoNode extends BaseNode<VideoNodeParams> {
       return;
     }
 
+    await this.readyPromise;
+
+    if (!this.sink) {
+      throw new Error("Sink not initialized");
+    }
+
     const videoTime = this.getVideoTime(time);
-    await this.seek(videoTime);
-
-    renderer.context.drawImage(
-      this.videoElement,
-      0,
-      0,
-      renderer.width,
-      renderer.height
-    );
+    const frame = await this.getFrameAt(videoTime);
+
+    if (frame) {
+      renderer.context.drawImage(frame.canvas, 0, 0);
+    }
   }
 }
diff --git a/bun.lock b/bun.lock
index 271888183..4e78286d5 100644
--- a/bun.lock
+++ b/bun.lock
@@ -48,6 +48,7 @@
         "framer-motion": "^11.13.1",
         "input-otp": "^1.4.1",
         "lucide-react": "^0.468.0",
+        "mediabunny": "^1.11.2",
         "motion": "^12.18.1",
         "nanoid": "^5.1.5",
         "next": "^15.4.5",
@@ -534,7 +535,7 @@
 
     "@tailwindcss/typography": ["@tailwindcss/typography@0.5.16", "", { "dependencies": { "lodash.castarray": "^4.4.0", "lodash.isplainobject": "^4.0.6", "lodash.merge": "^4.6.2", "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA=="],
 
-    "@types/bun": ["@types/bun@1.2.19", "", { "dependencies": { "bun-types": "1.2.19" } }, "sha512-d9ZCmrH3CJ2uYKXQIUuZ/pUnTqIvLDS0SK7pFmbx8ma+ziH/FRMoAq5bYpRG7y+w1gl+HgyNZbtqgMq4W4e2Lg=="],
+    "@types/bun": ["@types/bun@1.2.21", "", { "dependencies": { "bun-types": "1.2.21" } }, "sha512-NiDnvEqmbfQ6dmZ3EeUO577s4P5bf4HCTXtI6trMc6f6RzirY5IrF3aIookuSpyslFzrnvv2lmEWv5HyC1X79A=="],
 
     "@types/chai": ["@types/chai@5.2.2", "", { "dependencies": { "@types/deep-eql": "*" } }, "sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg=="],
 
@@ -560,6 +561,10 @@
 
     "@types/deep-eql": ["@types/deep-eql@4.0.2", "", {}, "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw=="],
 
+    "@types/dom-mediacapture-transform": ["@types/dom-mediacapture-transform@0.1.11", "", { "dependencies": { "@types/dom-webcodecs": "*" } }, "sha512-Y2p+nGf1bF2XMttBnsVPHUWzRRZzqUoJAKmiP10b5umnO6DDrWI0BrGDJy1pOHoOULVmGSfFNkQrAlC5dcj6nQ=="],
+
+    "@types/dom-webcodecs": ["@types/dom-webcodecs@0.1.13", "", {}, "sha512-O5hkiFIcjjszPIYyUSyvScyvrBoV3NOEEZx/pMlsu44TKzWNkLVBBxnxJz42in5n3QIolYOcBYFCPZZ0h8SkwQ=="],
+
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
 
     "@types/estree-jsx": ["@types/estree-jsx@1.0.5", "", { "dependencies": { "@types/estree": "*" } }, "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg=="],
@@ -898,6 +903,8 @@
 
     "mdast-util-to-string": ["mdast-util-to-string@4.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0" } }, "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg=="],
 
+    "mediabunny": ["mediabunny@1.11.2", "", { "dependencies": { "@types/dom-mediacapture-transform": "^0.1.11", "@types/dom-webcodecs": "0.1.13" } }, "sha512-dZpaq+YMKo5dUz6HlwWtZJfKPf3rZCq9BXurC7/zVmgjB3sTW5l32VT65gWm/ojv0vUwH+WbtolkmOQX1viz5g=="],
+
     "micromark": ["micromark@4.0.2", "", { "dependencies": { "@types/debug": "^4.0.0", "debug": "^4.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-core-commonmark": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-combine-extensions": "^2.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-encode": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-sanitize-uri": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA=="],
 
     "micromark-core-commonmark": ["micromark-core-commonmark@2.0.3", "", { "dependencies": { "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-destination": "^2.0.0", "micromark-factory-label": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-factory-title": "^2.0.0", "micromark-factory-whitespace": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-html-tag-name": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg=="],
@@ -1254,6 +1261,8 @@
 
     "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "@types/bun/bun-types": ["bun-types@1.2.21", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-sa2Tj77Ijc/NTLS0/Odjq/qngmEPZfbfnOERi0KRUYhT9R8M4VBioWVmMWE5GrYbKMc+5lVybXygLdibHaqVqw=="],
+
     "better-auth/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
 
     "motion/framer-motion": ["framer-motion@12.23.6", "", { "dependencies": { "motion-dom": "^12.23.6", "motion-utils": "^12.23.6", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-dsJ389QImVE3lQvM8Mnk99/j8tiZDM/7706PCqvkQ8sSCnpmWxsgX+g0lj7r5OBVL0U36pIecCTBoIWcM2RuKw=="],
@@ -1322,14 +1331,16 @@
 
     "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime/@tybys/wasm-util": ["@tybys/wasm-util@0.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ=="],
 
+    "@types/bun/bun-types/@types/node": ["@types/node@24.2.1", "", { "dependencies": { "undici-types": "~7.10.0" } }, "sha512-DRh5K+ka5eJic8CjH7td8QpYEV6Zo10gfRkjHCO3weqZHWDtAaSTFtl4+VMqOJ4N5jcuhZ9/l+yy8rVgw7BQeQ=="],
+
     "motion/framer-motion/motion-dom": ["motion-dom@12.23.6", "", { "dependencies": { "motion-utils": "^12.23.6" } }, "sha512-G2w6Nw7ZOVSzcQmsdLc0doMe64O/Sbuc2bVAbgMz6oP/6/pRStKRiVRV4bQfHp5AHYAKEGhEdVHTM+R3FDgi5w=="],
 
     "motion/framer-motion/motion-utils": ["motion-utils@12.23.6", "", {}, "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ=="],
 
-    "opencut/@types/node/undici-types": ["undici-types@7.10.0", "", {}, "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag=="],
-
     "next/postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
+    "opencut/@types/node/undici-types": ["undici-types@7.10.0", "", {}, "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag=="],
+
     "opencut/next/@next/env": ["@next/env@15.4.5", "", {}, "sha512-ruM+q2SCOVCepUiERoxOmZY9ZVoecR3gcXNwCYZRvQQWRjhOiPJGmQ2fAiLR6YKWXcSAh7G79KEFxN3rwhs4LQ=="],
 
     "opencut/next/@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@15.4.5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-84dAN4fkfdC7nX6udDLz9GzQlMUwEMKD7zsseXrl7FTeIItF8vpk1lhLEnsotiiDt+QFu3O1FVWnqwcRD2U3KA=="],
@@ -1350,6 +1361,8 @@
 
     "opencut/next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
 
+    "@types/bun/bun-types/@types/node/undici-types": ["undici-types@7.10.0", "", {}, "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag=="],
+
     "opencut/next/postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
   }
 }