diff_src.patch

diff --git a/src/main/index.ts b/src/main/index.ts
index f3e5e64..5dc49ff 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -1,6 +1,6 @@
 import { app, BrowserWindow, shell } from 'electron'
 import { join } from 'path'
-import { registerIpcHandlers } from './ipc-handlers'
+import { registerIpcHandlers, getCurrentRecordingSourceId } from './ipc-handlers'
 
 const isDev = process.env.NODE_ENV === 'development' || !app.isPackaged
 
@@ -12,6 +12,7 @@ function createWindow(): BrowserWindow {
     minHeight: 600,
     backgroundColor: '#0f0f0f',
     titleBarStyle: 'hiddenInset',
+    autoHideMenuBar: true,
     trafficLightPosition: { x: 16, y: 16 },
     icon: join(__dirname, '../../resources/icon.png'),
     webPreferences: {
@@ -26,7 +27,20 @@ function createWindow(): BrowserWindow {
   })
 
   win.once('ready-to-show', () => {
-    win.show()
+    if (process.platform === 'win32') {
+      // Workaround for Windows black screen on startup.
+      // We wait for the first frame to render, then force a DWM repaint with a resize toggle.
+      // We do NOT use setOpacity because it converts the window to a layered window,
+      // which breaks screen recorders capturing this app!
+      win.show()
+      setTimeout(() => {
+        const bounds = win.getBounds()
+        win.setBounds({ width: bounds.width + 1 })
+        win.setBounds(bounds)
+      }, 150)
+    } else {
+      win.show()
+    }
   })
 
   win.webContents.setWindowOpenHandler(({ url }) => {
@@ -41,6 +55,22 @@ function createWindow(): BrowserWindow {
     return { action: 'deny' }
   })
 
+  win.webContents.session.setDisplayMediaRequestHandler(
+    (request, callback) => {
+      const sourceId = getCurrentRecordingSourceId()
+      if (!request.videoRequested || !sourceId) {
+        callback({ video: undefined })
+        return
+      }
+      
+      callback({
+        video: { id: sourceId, name: 'Recording Source' },
+        ...(request.audioRequested && process.platform === 'win32' ? { audio: 'loopback' } : {})
+      })
+    },
+    { useSystemPicker: false }
+  )
+
   if (isDev) {
     win.loadURL(process.env['ELECTRON_RENDERER_URL'] || 'http://localhost:5173')
     win.webContents.openDevTools({ mode: 'detach' })
diff --git a/src/main/ipc-handlers.ts b/src/main/ipc-handlers.ts
index 0acbe3c..745b864 100644
--- a/src/main/ipc-handlers.ts
+++ b/src/main/ipc-handlers.ts
@@ -3,6 +3,7 @@ import { randomUUID } from 'crypto'
 import { getDesktopSources, generateAutoZoomKeyframes, saveVideoFile } from './recorder'
 import type { CaptureBounds, MouseEvent } from './recorder'
 
+
 // One-time tokens for secure file saving: token → { filePath, expiresAt }
 // 30 minutes: the save dialog is shown before rendering starts, so the token
 // must survive the full render + transcode + write cycle on slow hardware.
@@ -21,10 +22,15 @@ setInterval(() => {
 
 // Global mouse tracking state
 let mouseTrackingInterval: ReturnType<typeof setInterval> | null = null
+let currentRecordingSourceId: string | null = null
+
+export function getCurrentRecordingSourceId(): string | null {
+  return currentRecordingSourceId
+}
 let lastStablePos = { x: 0, y: 0 }
 let stableFrameCount = 0
 const STABLE_THRESHOLD_PX = 8   // pixels of movement to reset dwell counter
-const DWELL_FRAMES_REQUIRED = 5 // × 100 ms polling = 500 ms dwell → emit event
+const DWELL_FRAMES_REQUIRED = 30 // × 16 ms polling = 480 ms dwell → emit event
 
 function getCaptureBounds(sourceId: string, displayId?: string | null) {
   // Build a virtual desktop rectangle spanning all connected displays.
@@ -193,8 +199,8 @@ export function registerIpcHandlers(): void {
     return getCaptureBounds(sourceId, displayId)
   })
 
-  // Poll the global cursor position so clicks in other app windows are captured.
-  // A "dwell event" (cursor stable for ≥500 ms) is treated as a zoom anchor point.
+  // Poll the global cursor position at ~60Hz (16ms).
+  // Emits 'mouse-move' on every tick, and 'mouse-click' (as a zoom anchor) if dwelt.
   ipcMain.handle('start-mouse-tracking', (_event, recordingStartTime: number, captureBounds: CaptureBounds) => {
     if (mouseTrackingInterval) clearInterval(mouseTrackingInterval)
 
@@ -221,6 +227,13 @@ export function registerIpcHandlers(): void {
         return
       }
 
+      // Always send mouse-move for smooth tracking
+      sender.send('mouse-move', {
+        x: pos.x,
+        y: pos.y,
+        timestamp: Date.now() - recordingStartTime
+      })
+
       const dist = Math.hypot(pos.x - lastStablePos.x, pos.y - lastStablePos.y)
       if (dist < STABLE_THRESHOLD_PX) {
         stableFrameCount++
@@ -236,7 +249,7 @@ export function registerIpcHandlers(): void {
         stableFrameCount = 0
         lastStablePos = pos
       }
-    }, 100)
+    }, 16) // ~60 FPS
   })
 
   ipcMain.handle('stop-mouse-tracking', () => {
@@ -244,6 +257,13 @@ export function registerIpcHandlers(): void {
       clearInterval(mouseTrackingInterval)
       mouseTrackingInterval = null
     }
+    currentRecordingSourceId = null
   })
 
+  ipcMain.handle('set-recording-source', (_event, sourceId: string) => {
+    currentRecordingSourceId = sourceId
+  })
+
+
+
 }
diff --git a/src/preload/index.ts b/src/preload/index.ts
index dd968f3..11435d1 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -62,16 +62,21 @@ const api = {
     return () => ipcRenderer.removeListener('mouse-click', handler)
   },
 
-  transcodeVideo: (buffer: ArrayBuffer, options: { fps: number }, onProgress?: (progress: number) => void): Promise<ArrayBuffer> => {
-    if (onProgress) {
-      const handler = (_event: any, progress: number) => onProgress(progress)
-      ipcRenderer.on('transcode-progress', handler)
-      return ipcRenderer.invoke('transcode-video', buffer, options).finally(() => {
-        ipcRenderer.removeListener('transcode-progress', handler)
-      })
-    }
-    return ipcRenderer.invoke('transcode-video', buffer, options)
-  }
+  onMouseMove: (
+    callback: (data: { x: number; y: number; timestamp: number }) => void
+  ): (() => void) => {
+    const handler = (
+      _event: Electron.IpcRendererEvent,
+      data: { x: number; y: number; timestamp: number }
+    ) => callback(data)
+    ipcRenderer.on('mouse-move', handler)
+    return () => ipcRenderer.removeListener('mouse-move', handler)
+  },
+
+  setRecordingSource: (sourceId: string): Promise<void> =>
+    ipcRenderer.invoke('set-recording-source', sourceId)
+
+
 }
 
 contextBridge.exposeInMainWorld('electronAPI', api)
diff --git a/src/renderer/components/editor/BackgroundPanel.tsx b/src/renderer/components/editor/BackgroundPanel.tsx
index b603d9a..d4ebb4f 100644
--- a/src/renderer/components/editor/BackgroundPanel.tsx
+++ b/src/renderer/components/editor/BackgroundPanel.tsx
@@ -228,6 +228,31 @@ export default function BackgroundPanel() {
           )}
         </div>
       )}
+
+      {/* Cursor Smoothing */}
+      <div className="pt-4 border-t border-border space-y-3">
+        <div className="flex items-center gap-2">
+          <Palette size={15} className="text-accent opacity-0" />
+          <span className="text-sm font-semibold text-text-primary">Cursor Tracking</span>
+        </div>
+        <div className="space-y-1">
+          <div className="flex items-center justify-between">
+            <span className="label mb-0">Smoothing Factor</span>
+            <span className="text-xs text-text-secondary">
+              {Math.round((project.cursorSmoothing ?? 0.5) * 100)}%
+            </span>
+          </div>
+          <input
+            type="range"
+            min={0}
+            max={1}
+            step={0.05}
+            value={project.cursorSmoothing ?? 0.5}
+            onChange={(e) => useEditorStore.getState().setCursorSmoothing(parseFloat(e.target.value))}
+            className="w-full accent-accent cursor-pointer"
+          />
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/src/renderer/components/editor/ExportDialog.tsx b/src/renderer/components/editor/ExportDialog.tsx
index 27f60e5..78cee1f 100644
--- a/src/renderer/components/editor/ExportDialog.tsx
+++ b/src/renderer/components/editor/ExportDialog.tsx
@@ -1,10 +1,12 @@
-import { FFmpeg } from '@ffmpeg/ffmpeg'
-import { fetchFile } from '@ffmpeg/util'
+import { Muxer, ArrayBufferTarget } from 'mp4-muxer'
+import { Muxer as WebMMuxer, ArrayBufferTarget as WebMArrayBufferTarget } from 'webm-muxer'
 import { useState } from 'react'
 import { Download, X, Check } from 'lucide-react'
 import { useEditorStore } from '../../store/useEditorStore'
+import { getZoomTransformAtTime, getZoomTransformFromKeyframe, type ZoomTransform } from './zoomTransform'
+import { PixiRenderer } from '../../lib/PixiRenderer'
+import { StreamingVideoDecoder } from '../../lib/StreamingVideoDecoder'
 import type { EditorProject, ExportSettings, ZoomKeyframe } from '../../types'
-import { getZoomTransformAtTime, getZoomTransformFromKeyframe } from './zoomTransform'
 
 interface ExportDialogProps {
   onClose: () => void
@@ -26,7 +28,7 @@ type ExportFormatOption = {
   mimeTypes: string[]
 }
 
-type ZoomTransform = ReturnType<typeof getZoomTransformAtTime>
+
 
 const FORMAT_OPTIONS: ExportFormatOption[] = [
   {
@@ -55,14 +57,7 @@ const FORMAT_OPTIONS: ExportFormatOption[] = [
   }
 ]
 
-const MAX_MOTION_BLUR_PX = 1.5
-const MOTION_BLUR_SCALE_FACTOR = 1.2
-const MIN_VISIBLE_MOTION_BLUR_PX = 0.5
-const MIN_EXPORT_BITRATE = 8_000_000
-const MAX_EXPORT_BITRATE = 140_000_000
-const EXPORT_BITS_PER_PIXEL_PER_FRAME = 0.12
-const RENDER_PADDING_PX = 40
-const RECORDER_TIMESLICE_MS = 1000
+
 const MIN_EXPORT_DURATION_SECONDS = 0.05
 const MEDIA_EVENT_TIMEOUT_MS = 15000
 // ~0.5ms tolerance for floating-point time comparisons near trim boundaries.
@@ -84,9 +79,7 @@ function AspectRatioIcon({ ratio }: { ratio: string }) {
   )
 }
 
-function getZoomTransform(keyframes: ZoomKeyframe[], time: number): ZoomTransform {
-  return getZoomTransformAtTime(keyframes, time)
-}
+
 
 function createSequentialZoomTransformGetter(keyframes: ZoomKeyframe[]) {
   const sorted = [...keyframes].sort((a, b) => a.time - b.time)
@@ -154,70 +147,9 @@ function getFormatOption(format: ExportSettings['format']) {
   return FORMAT_OPTIONS.find((option) => option.value === format) ?? FORMAT_OPTIONS[0]
 }
 
-function getVideoOnlyMimeCandidates(mimeType: string) {
-  const [container, params] = mimeType.split(';')
-  if (!params || !params.includes('codecs=')) {
-    return [mimeType]
-  }
-
-  const match = params.match(/codecs=(?:"([^"]+)"|([^;]+))/i)
-  const codecsValue = (match?.[1] ?? match?.[2] ?? '').trim()
-  if (!codecsValue) {
-    return [container]
-  }
-
-  const codecList = codecsValue.split(',').map((codec) => codec.trim()).filter(Boolean)
-  const videoCodecPrefixes = ['vp8', 'vp9', 'av01', 'avc1', 'hev1', 'hvc1', 'theora', 'mp4v']
-  const videoCodecs = codecList.filter((codec) =>
-    videoCodecPrefixes.some((prefix) => codec.toLowerCase().startsWith(prefix))
-  )
-
-  if (videoCodecs.length === 0) {
-    return [container]
-  }
-
-  return [`${container};codecs=${videoCodecs.join(',')}`, container]
-}
-
-function getSupportedMimeTypeForStream(option: ExportFormatOption, hasAudioTrack: boolean) {
-  const candidates = hasAudioTrack
-    ? option.mimeTypes
-    : option.mimeTypes.flatMap((mimeType) => getVideoOnlyMimeCandidates(mimeType))
-  const uniqueCandidates = Array.from(new Set(candidates))
-  return uniqueCandidates.find((mimeType) => MediaRecorder.isTypeSupported(mimeType)) ?? null
-}
-
-function isFormatSupportedForExport(option: ExportFormatOption) {
-  const supportsWithAudio = getSupportedMimeTypeForStream(option, true) !== null
-  const supportsVideoOnly = getSupportedMimeTypeForStream(option, false) !== null
-  return (
-    supportsWithAudio
-    || supportsVideoOnly
-  )
-}
-
-function chooseMimeTypeForCanvasStream(option: ExportFormatOption, canvasStream: MediaStream) {
-  const audioTracks = canvasStream.getAudioTracks()
-  if (audioTracks.length > 0) {
-    const mimeTypeWithAudio = getSupportedMimeTypeForStream(option, true)
-    if (mimeTypeWithAudio) {
-      return mimeTypeWithAudio
-    }
-  }
-
-  const videoOnlyMimeType = getSupportedMimeTypeForStream(option, false)
-  if (!videoOnlyMimeType) {
-    return null
-  }
-
-  for (const track of audioTracks) {
-    canvasStream.removeTrack(track)
-    track.stop()
-  }
-
-  return videoOnlyMimeType
+function isFormatSupportedForExport(_option: ExportFormatOption) {
+  return true
 }
-
 function computeVisibleAnnotationsForTime(
   sortedAnnotations: EditorProject['annotations'],
   currentVisibleAnnotations: EditorProject['annotations'],
@@ -255,7 +187,7 @@ function waitForVideoEvent(
     return Promise.resolve()
   }
   return new Promise((resolve, reject) => {
-    let timeoutId: ReturnType<typeof window.setTimeout> | undefined
+    let timeoutId: number | undefined
 
     const clearListeners = () => {
       video.removeEventListener(eventName, onDone)
@@ -285,21 +217,6 @@ function waitForVideoEvent(
   })
 }
 
-async function ensureVideoReadyForFrame(video: HTMLVideoElement) {
-  if (video.readyState >= 2) return
-  await Promise.race([waitForVideoEvent(video, 'loadeddata'), waitForVideoEvent(video, 'canplay')])
-}
-
-async function seekTo(video: HTMLVideoElement, time: number) {
-  if (Math.abs(video.currentTime - time) < 0.001) {
-    await ensureVideoReadyForFrame(video)
-    return
-  }
-  const seekedPromise = waitForVideoEvent(video, 'seeked')
-  video.currentTime = time
-  await seekedPromise
-  await ensureVideoReadyForFrame(video)
-}
 
 // ---------------------------------------------------------------------------
 // Seek-based offline renderer helpers
@@ -363,191 +280,28 @@ async function loadBackgroundImage(project: EditorProject): Promise<HTMLImageEle
     image.onload = () => resolve(true)
     image.onerror = () => resolve(false)
     // Set src after listeners are attached to avoid missing a cached load event.
-    image.src = background.imageUrl
+    image.src = background.imageUrl || ''
   })
 
   return loaded ? image : null
 }
 
-function drawFrame(
-  ctx: CanvasRenderingContext2D,
-  project: EditorProject,
-  video: HTMLVideoElement,
-  renderTime: number,
-  width: number,
-  height: number,
-  bgImage: HTMLImageElement | null,
-  precomputed?: {
-    zoomTransform?: ZoomTransform
-    visibleAnnotations?: EditorProject['annotations']
-  }
-) {
-  const W = width
-  const H = height
-
-  ctx.setTransform(1, 0, 0, 1, 0, 0)
-  ctx.clearRect(0, 0, W, H)
-  ctx.imageSmoothingEnabled = true
-  ctx.imageSmoothingQuality = 'high'
-
-  const bg = project.background
-  if (bg.type === 'solid') {
-    ctx.fillStyle = bg.color || '#0f0f0f'
-    ctx.fillRect(0, 0, W, H)
-  } else if (bg.type === 'gradient' && bg.gradient) {
-    const { type, stops, angle = 0 } = bg.gradient
-    let grad: CanvasGradient
-    if (type === 'linear') {
-      const rad = (angle * Math.PI) / 180
-      const x1 = W / 2 - (Math.cos(rad) * W) / 2
-      const y1 = H / 2 - (Math.sin(rad) * H) / 2
-      const x2 = W / 2 + (Math.cos(rad) * W) / 2
-      const y2 = H / 2 + (Math.sin(rad) * H) / 2
-      grad = ctx.createLinearGradient(x1, y1, x2, y2)
-    } else {
-      grad = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.max(W, H) / 2)
-    }
-    stops.forEach((stop) => grad.addColorStop(stop.position, stop.color))
-    ctx.fillStyle = grad
-    ctx.fillRect(0, 0, W, H)
-  } else if (bg.type === 'image' && bgImage && bgImage.naturalWidth > 0) {
-    const imgRatio = bgImage.naturalWidth / bgImage.naturalHeight
-    const canvasRatio = W / H
-    let sx = 0
-    let sy = 0
-    let sw = bgImage.naturalWidth
-    let sh = bgImage.naturalHeight
-
-    if (imgRatio > canvasRatio) {
-      sw = bgImage.naturalHeight * canvasRatio
-      sx = (bgImage.naturalWidth - sw) / 2
-    } else {
-      sh = bgImage.naturalWidth / canvasRatio
-      sy = (bgImage.naturalHeight - sh) / 2
-    }
-
-    ctx.drawImage(bgImage, sx, sy, sw, sh, 0, 0, W, H)
-  } else {
-    ctx.fillStyle = '#1a1a1a'
-    ctx.fillRect(0, 0, W, H)
-  }
-
-  if (video.readyState < 2) return
-
-  const { scale, tx, ty, motionBlur } = precomputed?.zoomTransform ?? getZoomTransform(project.zoomKeyframes, renderTime)
-
-  const crop = project.cropSettings
-  const srcX = crop ? crop.x * video.videoWidth : 0
-  const srcY = crop ? crop.y * video.videoHeight : 0
-  const srcW = crop ? crop.width * video.videoWidth : video.videoWidth
-  const srcH = crop ? crop.height * video.videoHeight : video.videoHeight
-
-  const padding = RENDER_PADDING_PX
-  const availW = Math.max(1, W - padding * 2)
-  const availH = Math.max(1, H - padding * 2)
-  const ratio = srcW / srcH
-  let dw = availW
-  let dh = availW / ratio
-  if (dh > availH) {
-    dh = availH
-    dw = availH * ratio
-  }
-  const dx = (W - dw) / 2
-  const dy = (H - dh) / 2
-
-  ctx.save()
-  if (motionBlur) {
-    const blurPixels = Math.min(
-      MAX_MOTION_BLUR_PX,
-      Math.max(0, (scale - 1) * MOTION_BLUR_SCALE_FACTOR)
-    )
-    if (blurPixels >= MIN_VISIBLE_MOTION_BLUR_PX) {
-      ctx.filter = `blur(${blurPixels.toFixed(2)}px)`
-    }
-  }
-
-  ctx.translate(W / 2 + tx * dw, H / 2 + ty * dh)
-  ctx.scale(scale, scale)
-  ctx.translate(-W / 2, -H / 2)
-  ctx.drawImage(video, srcX, srcY, srcW, srcH, dx, dy, dw, dh)
-  ctx.restore()
 
-  const visibleAnnotations = precomputed?.visibleAnnotations
-    ?? project.annotations.filter(
-      (annotation) => renderTime >= annotation.time && renderTime <= annotation.time + annotation.duration
-    )
-
-  for (const annotation of visibleAnnotations) {
-    const ax = annotation.x * W
-    const ay = annotation.y * H
-    ctx.save()
-
-    if (annotation.type === 'text') {
-      ctx.font = `bold ${annotation.fontSize || 24}px -apple-system, sans-serif`
-      ctx.fillStyle = annotation.color
-      ctx.shadowColor = 'rgba(0,0,0,0.5)'
-      ctx.shadowBlur = 4
-      ctx.fillText(annotation.text || '', ax, ay)
-    } else if (annotation.type === 'arrow' && annotation.endX !== undefined && annotation.endY !== undefined) {
-      const ex = annotation.endX * W
-      const ey = annotation.endY * H
-      const sw = annotation.strokeWidth || 3
-      ctx.strokeStyle = annotation.color
-      ctx.lineWidth = sw
-      ctx.lineCap = 'round'
-      ctx.beginPath()
-      ctx.moveTo(ax, ay)
-      ctx.lineTo(ex, ey)
-      ctx.stroke()
-
-      const angle = Math.atan2(ey - ay, ex - ax)
-      const arrowLen = 16
-      ctx.beginPath()
-      ctx.moveTo(ex, ey)
-      ctx.lineTo(ex - arrowLen * Math.cos(angle - 0.4), ey - arrowLen * Math.sin(angle - 0.4))
-      ctx.moveTo(ex, ey)
-      ctx.lineTo(ex - arrowLen * Math.cos(angle + 0.4), ey - arrowLen * Math.sin(angle + 0.4))
-      ctx.stroke()
-    }
-
-    ctx.restore()
-  }
-}
 
 async function renderVideoWithEffects(
   project: EditorProject,
   settings: ExportSettings,
+  saveToken: string,
   onProgress?: (update: ExportProgressUpdate) => void
-): Promise<ArrayBuffer> {
-  const formatOption = getFormatOption(settings.format)
-
-  // Two video elements:
-  //   videoEl  — provides decoded frames for canvas drawing (muted, always paused)
-  //   audioEl  — plays in real-time to supply a live audio track to the stream
-  const videoEl = document.createElement('video')
-  const audioEl = document.createElement('video')
-
-  const cleanupEls = () => {
-    for (const el of [videoEl, audioEl]) {
-      el.pause()
-      el.removeAttribute('src')
-      el.load()
-    }
-  }
+): Promise<void> {
+  const decoder = new StreamingVideoDecoder()
 
   try {
-    // ------------------------------------------------------------------
     // 1. Load metadata
-    // ------------------------------------------------------------------
-    videoEl.src = project.videoUrl
-    videoEl.preload = 'auto'
-    videoEl.muted = true          // never plays audio — pure decode source
-    videoEl.playsInline = true
-    await waitForVideoEvent(videoEl, 'loadedmetadata')
-
-    const loadedVideoDuration = Number.isFinite(videoEl.duration) && videoEl.duration > 0 ? videoEl.duration : 0
-    const fallbackProjectDuration = Number.isFinite(project.duration) && project.duration > 0 ? project.duration : 0
-    const mediaDuration = loadedVideoDuration || fallbackProjectDuration
+    onProgress?.({ progress: 0, detail: 'Loading video metadata...' })
+    const metadata = await decoder.loadMetadata(project.videoUrl)
+    
+    const mediaDuration = metadata.duration
     if (mediaDuration <= 0) throw new Error('Unable to determine media duration for export')
 
     const startTime = Math.max(0, Math.min(mediaDuration, project.trimPoints.inPoint))
@@ -560,8 +314,8 @@ async function renderVideoWithEffects(
     const requestedDimensions = getDimensions(settings)
     const { width, height, wasClamped } = clampOutputToSourceDimensions(
       requestedDimensions,
-      videoEl.videoWidth,
-      videoEl.videoHeight
+      metadata.width,
+      metadata.height
     )
     if (wasClamped) {
       onProgress?.({
@@ -570,144 +324,137 @@ async function renderVideoWithEffects(
       })
     }
 
-    // ------------------------------------------------------------------
-    // 2. Canvas + captureStream
-    // ------------------------------------------------------------------
     const canvas = document.createElement('canvas')
     canvas.width = width
     canvas.height = height
-    const ctx = canvas.getContext('2d')
-    if (!ctx) throw new Error('Unable to initialize export renderer')
+    const renderer = new PixiRenderer()
+    await renderer.init(canvas, { width, height })
 
     const bgImage = await loadBackgroundImage(project)
 
-    // Prefer captureStream(0) + requestFrame() so we control when frames are
-    // pushed. Fall back to captureStream(fps) if requestFrame is unavailable.
-    let canvasStream = canvas.captureStream(0)
-    const stopCanvasStreamTracks = () => canvasStream.getTracks().forEach((t) => t.stop())
+    const frameDuration = 1 / settings.fps
+    const totalFrames = Math.ceil(totalDuration / frameDuration)
 
-    let videoTrack = canvasStream.getVideoTracks()[0] as CanvasCaptureMediaStreamTrack | undefined
-    if (!videoTrack) { stopCanvasStreamTracks(); throw new Error('Unable to initialize export video track') }
-
-    let requestFrame: (() => void) | null =
-      typeof videoTrack.requestFrame === 'function' ? () => videoTrack!.requestFrame() : null
-
-    if (!requestFrame) {
-      stopCanvasStreamTracks()
-      canvasStream = canvas.captureStream(settings.fps)
-      videoTrack = canvasStream.getVideoTracks()[0] as CanvasCaptureMediaStreamTrack | undefined
-      if (!videoTrack) throw new Error('Unable to initialize export video track (fallback)')
-      requestFrame = typeof videoTrack.requestFrame === 'function' ? () => videoTrack!.requestFrame() : null
-    }
+    const getSequentialZoomTransform = createSequentialZoomTransformGetter(project.zoomKeyframes)
+    const sortedAnnotations = [...project.annotations].sort((a, b) => a.time - b.time)
+    let nextAnnotationIndex = 0
+    let visibleAnnotations: EditorProject['annotations'] = []
 
-    // ------------------------------------------------------------------
-    // 3. Audio track — a separate real-time playback element
-    //    Plays silently alongside the seek loop so MediaRecorder captures
-    //    a live audio track. The user doesn’t hear it (volume = 0).
-    // ------------------------------------------------------------------
-    let hasAudio = false
-    if (typeof audioEl.captureStream === 'function') {
-      try {
-        audioEl.src = project.videoUrl
-        audioEl.preload = 'auto'
-        audioEl.muted = false
-        audioEl.volume = 0            // inaudible; stream still carries audio data
-        audioEl.playsInline = true
-        await waitForVideoEvent(audioEl, 'loadedmetadata')
-
-        const audioStream = audioEl.captureStream()
-        const audioTracks = audioStream.getAudioTracks()
-        if (audioTracks.length > 0) {
-          canvasStream = new MediaStream([
-            ...canvasStream.getVideoTracks(),
-            ...audioTracks
-          ])
-          hasAudio = true
-        }
-      } catch {
-        // No audio — continue with video-only export
-      }
+    // 2. Fetch original audio to get metadata for Muxer
+    onProgress?.({ progress: 0, detail: 'Extracting audio...' })
+    let audioBuffer: AudioBuffer | null = null
+    let sampleRate = 44100
+    let numberOfChannels = 2
+    
+    try {
+      const audioRes = await fetch(project.videoUrl)
+      const arrayBuffer = await audioRes.arrayBuffer()
+      const audioCtx = new window.AudioContext()
+      audioBuffer = await audioCtx.decodeAudioData(arrayBuffer)
+      sampleRate = audioBuffer.sampleRate
+      numberOfChannels = audioBuffer.numberOfChannels
+    } catch (e) {
+      console.warn('Failed to extract audio, proceeding with video only.', e)
     }
 
-    // ------------------------------------------------------------------
-    // 4. MediaRecorder
-    // ------------------------------------------------------------------
-    const selectedMimeType = chooseMimeTypeForCanvasStream(formatOption, canvasStream)
-    if (!selectedMimeType) throw new Error(`${formatOption.label} export is not supported`)
-    const mimeType = selectedMimeType
-
-    const pixelRate = width * height * settings.fps
-    const videoBitsPerSecond = Math.min(
-      MAX_EXPORT_BITRATE,
-      Math.max(MIN_EXPORT_BITRATE, Math.round(pixelRate * EXPORT_BITS_PER_PIXEL_PER_FRAME))
-    )
+    // 3. Initialize Muxer and Encoders
+    const isMp4 = settings.format === 'mp4'
+    const muxer = isMp4
+      ? new Muxer({
+          target: new ArrayBufferTarget(),
+          video: { codec: 'avc', width, height },
+          audio: audioBuffer ? { codec: 'aac', numberOfChannels, sampleRate } : undefined,
+          fastStart: 'in-memory'
+        })
+      : new WebMMuxer({
+          target: new WebMArrayBufferTarget(),
+          video: { codec: 'V_VP9', width, height },
+          audio: audioBuffer ? { codec: 'V_OPUS', numberOfChannels, sampleRate } : undefined
+        })
 
-    const recorder = new MediaRecorder(canvasStream, { mimeType, videoBitsPerSecond })
-    const recordedChunks: Blob[] = []
-
-    const exportBufferPromise = new Promise<ArrayBuffer>((resolve, reject) => {
-      recorder.ondataavailable = (e) => { if (e.data.size > 0) recordedChunks.push(e.data) }
-      recorder.onerror = () => reject(new Error('Export recording failed'))
-      recorder.onstop = async () => {
-        stopCanvasStreamTracks()
-        try {
-          resolve(await new Blob(recordedChunks, { type: mimeType }).arrayBuffer())
-        } catch (err) {
-          reject(new Error(`Export recording failed: ${String(err)}`))
+    let encoderError: Error | null = null
+    const videoEncoder = new VideoEncoder({
+      output: (chunk, meta) => {
+        if (isMp4) {
+          (muxer as Muxer<ArrayBufferTarget>).addVideoChunk(chunk, meta)
+        } else {
+          (muxer as WebMMuxer<WebMArrayBufferTarget>).addVideoChunk(chunk, meta)
         }
+      },
+      error: (e) => {
+        encoderError = e
       }
     })
 
-    // ------------------------------------------------------------------
-    // 5. Seek-based frame loop
-    //    The video is NEVER played. We seek to each frame’s exact timestamp,
-    //    wait for decoder confirmation, draw, push, advance. Frame-accurate.
-    // ------------------------------------------------------------------
-    let capturedRenderError: unknown = null
-    let recorderStarted = false
+    videoEncoder.configure({
+      codec: isMp4 ? 'avc1.4d002a' : 'vp09.00.10.08',
+      width,
+      height,
+      framerate: settings.fps,
+      bitrate: 8_000_000
+    })
 
-    try {
-      const frameDuration = 1 / settings.fps
-      const totalFrames = Math.ceil(totalDuration / frameDuration)
-
-      const getSequentialZoomTransform = createSequentialZoomTransformGetter(project.zoomKeyframes)
-      const sortedAnnotations = [...project.annotations].sort((a, b) => a.time - b.time)
-      let nextAnnotationIndex = 0
-      let visibleAnnotations: EditorProject['annotations'] = []
-
-      // Seek to startTime and draw frame 0 before starting the recorder,
-      // so the first push is ready immediately when recording begins.
-      await seekToFrame(videoEl, startTime)
-      drawFrame(ctx, project, videoEl, startTime, width, height, bgImage, {
-        zoomTransform: getSequentialZoomTransform(startTime),
-        visibleAnnotations: []
+    // 4. Encode audio if present
+    if (audioBuffer) {
+      const audioEncoder = new AudioEncoder({
+        output: (chunk, meta) => {
+          if (isMp4) {
+            (muxer as Muxer<ArrayBufferTarget>).addAudioChunk(chunk, meta)
+          } else {
+            (muxer as WebMMuxer<WebMArrayBufferTarget>).addAudioChunk(chunk, meta)
+          }
+        },
+        error: (e) => {
+          encoderError = e
+        }
+      })
+      
+      audioEncoder.configure({
+        codec: isMp4 ? 'mp4a.40.2' : 'opus',
+        sampleRate,
+        numberOfChannels,
+        bitrate: 128_000
       })
 
-      recorder.start(RECORDER_TIMESLICE_MS)
-      recorderStarted = true
-      onProgress?.({ progress: 0 })
-
-      // Start audio in sync with the recorder so the stream has audio from frame 1.
-      if (hasAudio) {
-        try {
-          audioEl.currentTime = startTime
-          await audioEl.play()
-        } catch {
-          // Audio play failed — continue video-only
+      const frameSize = isMp4 ? 1024 : 960
+      const startOffset = Math.floor(startTime * sampleRate)
+      const endOffset = Math.floor(endTime * sampleRate)
+      const trimAudioLength = endOffset - startOffset
+      
+      for (let offset = 0; offset < trimAudioLength; offset += frameSize) {
+        const chunkLength = Math.min(frameSize, trimAudioLength - offset)
+        const buffer = new Float32Array(chunkLength * numberOfChannels)
+        for (let channel = 0; channel < numberOfChannels; channel++) {
+          const channelData = audioBuffer.getChannelData(channel)
+          buffer.set(channelData.subarray(startOffset + offset, startOffset + offset + chunkLength), channel * chunkLength)
         }
+        
+        const timestamp = (offset / sampleRate) * 1_000_000
+        const audioData = new AudioData({
+          format: 'f32-planar',
+          sampleRate,
+          numberOfFrames: chunkLength,
+          numberOfChannels,
+          timestamp,
+          data: buffer
+        })
+        audioEncoder.encode(audioData)
+        audioData.close()
       }
+      
+      await audioEncoder.flush()
+    }
 
-      // Push frame 0 (already drawn above).
-      requestFrame?.()
+    if (encoderError) throw encoderError
 
-      // Iterate remaining frames: seek → decode confirm → draw → push.
-      for (let frameIndex = 1; frameIndex < totalFrames; frameIndex++) {
-        const frameTime = Math.min(
-          startTime + frameIndex * frameDuration,
-          endTime - END_FRAME_EPSILON_SECONDS
-        )
+    // 5. Render frames and encode video
+    let currentFrameIndex = 0;
 
-        await seekToFrame(videoEl, frameTime)
+    await decoder.decodeAll(
+      settings.fps,
+      { inPoint: startTime, outPoint: endTime },
+      async (frame: VideoFrame, exportTimestampUs: number, sourceTimestampMs: number) => {
+        const frameTime = sourceTimestampMs / 1000
 
         const annotationUpdate = computeVisibleAnnotationsForTime(
           sortedAnnotations,
@@ -718,37 +465,53 @@ async function renderVideoWithEffects(
         nextAnnotationIndex = annotationUpdate.nextAnnotationIndex
         visibleAnnotations = annotationUpdate.visibleAnnotations
 
-        drawFrame(ctx, project, videoEl, frameTime, width, height, bgImage, {
+        renderer.drawFrame(project, frameTime, frame, bgImage, width, height, {
           zoomTransform: getSequentialZoomTransform(frameTime),
           visibleAnnotations
         })
-        requestFrame?.()
 
-        onProgress?.({ progress: Math.min(0.99, frameIndex / totalFrames) })
+        const canvasFrame = new VideoFrame(canvas, { timestamp: exportTimestampUs })
+        const keyFrame = currentFrameIndex % (settings.fps * 2) === 0 // Keyframe every 2 seconds
+        
+        videoEncoder.encode(canvasFrame, { keyFrame })
+        canvasFrame.close()
+        frame.close() // Close the original frame from decoder
+
+        if (encoderError) throw encoderError
+
+        if (currentFrameIndex % 5 === 0) {
+          await new Promise(r => setTimeout(r, 0)) // Yield to UI
+        }
+        
+        currentFrameIndex++;
+        onProgress?.({ progress: (currentFrameIndex / totalFrames) * 0.9, detail: 'Encoding frames...' })
+      },
+      (warningMsg) => {
+        console.warn(warningMsg)
       }
+    )
 
-      // Let the recorder flush its final internal buffer before stopping.
-      await new Promise<void>((r) => setTimeout(r, 200))
-      if (recorder.state !== 'inactive') recorder.stop()
-      onProgress?.({ progress: 1 })
-    } catch (err) {
-      capturedRenderError = err
-    } finally {
-      audioEl.pause()
-      cleanupEls()
-      if (recorderStarted && recorder.state !== 'inactive') recorder.stop()
-      stopCanvasStreamTracks()
+    onProgress?.({ progress: 0.95, detail: 'Finalizing video...' })
+    await videoEncoder.flush()
+    if (isMp4) {
+      (muxer as Muxer<ArrayBufferTarget>).finalize()
+    } else {
+      (muxer as WebMMuxer<WebMArrayBufferTarget>).finalize()
     }
+    
+    const finalBuffer = isMp4 
+      ? (muxer as Muxer<ArrayBufferTarget>).target.buffer 
+      : (muxer as WebMMuxer<WebMArrayBufferTarget>).target.buffer
 
-    if (capturedRenderError) {
-      try { await exportBufferPromise } catch { /* ignore */ }
-      throw capturedRenderError
-    }
+    onProgress?.({ progress: 0.99, detail: 'Saving file...' })
+    renderer.destroy()
+    const res = await window.electronAPI.saveFile(saveToken, finalBuffer)
+    if (!res.success) throw new Error(res.error || 'Failed to save video')
+
+    onProgress?.({ progress: 1, detail: 'Export complete!' })
 
-    return exportBufferPromise
-  } catch (err) {
-    cleanupEls()
-    throw err
+  } finally {
+    decoder.destroy()
   }
 }
 
@@ -787,13 +550,7 @@ export default function ExportDialog({ onClose }: ExportDialogProps) {
         update({ format: filteredOption.value })
       }
 
-      // Determine the final extension up-front so the save dialog shows the right
-      // file type. For MP4 we optimistically use 'mp4'; if remux later fails we
-      // fall back to WebM but by then we already hold the token for the mp4 path
-      // — the token's TTL won't be threatened by a long render/transcode.
-      const mimeType = filteredOption.mimeTypes[0] || 'video/webm'
-      const willRemux = filteredOption.value === 'mp4' && mimeType.includes('webm')
-      const expectedExtension = willRemux ? 'mp4' : filteredOption.extension
+      const expectedExtension = filteredOption.extension
 
       // Show the save dialog BEFORE rendering so the token is locked in before
       // any long-running work starts. This prevents token expiry on slow hardware.
@@ -816,46 +573,17 @@ export default function ExportDialog({ onClose }: ExportDialogProps) {
 
       const saveToken = dialogResult.saveToken
 
-      setExportDetail(null)
-      const exportedBuffer = await renderVideoWithEffects(
+      setExportDetail('Rendering frames...')
+      await renderVideoWithEffects(
         project,
         { ...settings, format: filteredOption.value },
+        saveToken,
         ({ progress, detail }) => {
           setExportProgress(Math.max(0, Math.min(1, progress)))
           if (detail) setExportDetail(detail)
         }
       )
 
-      let finalBuffer = exportedBuffer
-
-      if (willRemux) {
-        setExportDetail('Remuxing WebM to MP4... This may take a moment.')
-        try {
-          const ffmpeg = new FFmpeg()
-          await ffmpeg.load()
-          await ffmpeg.writeFile('input.webm', await fetchFile(new Blob([exportedBuffer], { type: mimeType })))
-          await ffmpeg.exec(['-i', 'input.webm', '-c', 'copy', 'output.mp4'])
-          const data = await ffmpeg.readFile('output.mp4') as Uint8Array
-          // Avoid unnecessary copy if the Uint8Array spans the full ArrayBuffer.
-          // Otherwise, slice to ensure IPC writes only the relevant byte range.
-          finalBuffer =
-            data.byteOffset === 0 && data.byteLength === data.buffer.byteLength
-              ? data.buffer
-              : data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength)
-        } catch (e) {
-          console.error('MP4 Remux failed, saving as WebM fallback.', e)
-          setExportDetail('MP4 conversion failed, saving as WebM instead.')
-          // The token path will have a .mp4 extension, but the content will be
-          // valid WebM — better than losing the export entirely.
-        }
-      }
-
-      setExportDetail('Saving export...')
-      const saveResult = await window.electronAPI.saveFile(saveToken, finalBuffer)
-      if (!saveResult.success) {
-        throw new Error(saveResult.error || 'Failed to save exported file')
-      }
-
       setDone(true)
     } catch (err) {
       setError(`Export failed: ${err instanceof Error ? err.message : String(err)}`)
diff --git a/src/renderer/components/editor/VideoPreview.tsx b/src/renderer/components/editor/VideoPreview.tsx
index a35a020..27d2eda 100644
--- a/src/renderer/components/editor/VideoPreview.tsx
+++ b/src/renderer/components/editor/VideoPreview.tsx
@@ -1,230 +1,141 @@
 import { useEffect, useLayoutEffect, useRef, useCallback } from 'react'
 import { useEditorStore } from '../../store/useEditorStore'
-import { getZoomTransformAtTime } from './zoomTransform'
+import { PixiRenderer } from '../../lib/PixiRenderer'
 
 interface VideoPreviewProps {
   videoRef: React.RefObject<HTMLVideoElement>
 }
 
 const FALLBACK_CANVAS_DIMENSION = 1
-const MAX_MOTION_BLUR_PX = 1.5
-const MOTION_BLUR_SCALE_FACTOR = 1.2
-const MIN_VISIBLE_MOTION_BLUR_PX = 0.5
 
 export default function VideoPreview({ videoRef }: VideoPreviewProps) {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
   const animFrameRef = useRef<number>(0)
-  const renderFrameRef = useRef<() => void>(() => {})
-  // Stores CSS-space dimensions for drawing coordinates; backing canvas stays in pixel space.
-  const canvasMetricsRef = useRef({
-    width: FALLBACK_CANVAS_DIMENSION,
-    height: FALLBACK_CANVAS_DIMENSION,
-    devicePixelRatio: 1
-  })
-  // Cache the last-loaded background image so we don't reload on every frame
+  const rendererRef = useRef<PixiRenderer | null>(null)
   const bgImageRef = useRef<{ url: string; img: HTMLImageElement } | null>(null)
   const { project, currentTime, selectedTool, addAnnotation } = useEditorStore()
 
+  // Track if we need to force a redraw because of state changes
+  const forceRenderRef = useRef<() => void>(() => {})
+
   const renderFrame = useCallback(() => {
-    const canvas = canvasRef.current
     const video = videoRef.current
-    const ctx = canvas?.getContext('2d')
-    if (!canvas || !ctx || !project) return
-
-    const { width: W, height: H } = canvasMetricsRef.current
-    const scaleX = canvas.width / W
-    const scaleY = canvas.height / H
-    ctx.setTransform(1, 0, 0, 1, 0, 0)
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
-    ctx.setTransform(scaleX, 0, 0, scaleY, 0, 0)
-    ctx.imageSmoothingEnabled = true
-    ctx.imageSmoothingQuality = 'high'
-
-    // Use video.currentTime while playing for frame-accurate animation;
-    // fall back to the store's currentTime when paused/seeking.
+    const renderer = rendererRef.current
+    if (!renderer || !project) return
+
     const renderTime = video && !video.paused && !video.ended ? video.currentTime : currentTime
 
-    // Draw background
+    // Background caching logic
     const bg = project.background
-    if (bg.type === 'solid') {
-      ctx.fillStyle = bg.color || '#0f0f0f'
-      ctx.fillRect(0, 0, W, H)
-    } else if (bg.type === 'gradient' && bg.gradient) {
-      const { type, stops, angle = 0 } = bg.gradient
-      let grad: CanvasGradient
-      if (type === 'linear') {
-        const rad = (angle * Math.PI) / 180
-        const x1 = W / 2 - (Math.cos(rad) * W) / 2
-        const y1 = H / 2 - (Math.sin(rad) * H) / 2
-        const x2 = W / 2 + (Math.cos(rad) * W) / 2
-        const y2 = H / 2 + (Math.sin(rad) * H) / 2
-        grad = ctx.createLinearGradient(x1, y1, x2, y2)
-      } else {
-        grad = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.max(W, H) / 2)
-      }
-      stops.forEach((s) => grad.addColorStop(s.position, s.color))
-      ctx.fillStyle = grad
-      ctx.fillRect(0, 0, W, H)
-    } else if (bg.type === 'image' && bg.imageUrl) {
-      // Load/cache the background image; render it cover-fitted to the canvas
+    if (bg.type === 'image' && bg.imageUrl) {
       if (bgImageRef.current?.url !== bg.imageUrl) {
-        const img = new Image()
-        img.onload = () => renderFrameRef.current()
+        const img = new window.Image()
+        img.onload = () => forceRenderRef.current()
         img.src = bg.imageUrl
         bgImageRef.current = { url: bg.imageUrl, img }
       }
-      const bgImg = bgImageRef.current?.img
-      if (bgImg && bgImg.complete && bgImg.naturalWidth > 0) {
-        const imgRatio = bgImg.naturalWidth / bgImg.naturalHeight
-        const canvasRatio = W / H
-        let sx = 0
-        let sy = 0
-        let sw = bgImg.naturalWidth
-        let sh = bgImg.naturalHeight
-        if (imgRatio > canvasRatio) {
-          sw = bgImg.naturalHeight * canvasRatio
-          sx = (bgImg.naturalWidth - sw) / 2
-        } else {
-          sh = bgImg.naturalWidth / canvasRatio
-          sy = (bgImg.naturalHeight - sh) / 2
-        }
-        ctx.drawImage(bgImg, sx, sy, sw, sh, 0, 0, W, H)
-      } else {
-        ctx.fillStyle = '#1a1a1a'
-        ctx.fillRect(0, 0, W, H)
-      }
-    } else {
-      ctx.fillStyle = '#1a1a1a'
-      ctx.fillRect(0, 0, W, H)
     }
 
-    if (video && video.readyState >= 2) {
-      const zoom = getZoomTransformAtTime(project.zoomKeyframes, renderTime)
-      const { scale, tx, ty, motionBlur } = zoom
-
-      // Apply crop or use full video
-      const crop = project.cropSettings
-      const srcX = crop ? crop.x * video.videoWidth : 0
-      const srcY = crop ? crop.y * video.videoHeight : 0
-      const srcW = crop ? crop.width * video.videoWidth : video.videoWidth
-      const srcH = crop ? crop.height * video.videoHeight : video.videoHeight
-
-      // Fit video in canvas with padding
-      const padding = 40
-      const availW = W - padding * 2
-      const availH = H - padding * 2
-      const ratio = srcW / srcH
-      let dw = availW
-      let dh = availW / ratio
-      if (dh > availH) {
-        dh = availH
-        dw = availH * ratio
-      }
-      const dx = (W - dw) / 2
-      const dy = (H - dh) / 2
-
-      ctx.save()
-      if (motionBlur) {
-        const blurPixels = Math.min(
-          MAX_MOTION_BLUR_PX,
-          Math.max(0, (scale - 1) * MOTION_BLUR_SCALE_FACTOR)
-        )
-        if (blurPixels >= MIN_VISIBLE_MOTION_BLUR_PX) {
-          ctx.filter = `blur(${blurPixels.toFixed(2)}px)`
-        }
-      }
-      ctx.translate(W / 2 + tx * dw, H / 2 + ty * dh)
-      ctx.scale(scale, scale)
-      ctx.translate(-W / 2, -H / 2)
-      ctx.drawImage(video, srcX, srcY, srcW, srcH, dx, dy, dw, dh)
-      ctx.restore()
-
-      // Draw annotations
-      const visibleAnnotations = project.annotations.filter(
-        (a) => renderTime >= a.time && renderTime <= a.time + a.duration
-      )
-      for (const ann of visibleAnnotations) {
-        const ax = ann.x * W
-        const ay = ann.y * H
-        ctx.save()
-        if (ann.type === 'text') {
-          ctx.font = `bold ${ann.fontSize || 24}px -apple-system, sans-serif`
-          ctx.fillStyle = ann.color
-          ctx.shadowColor = 'rgba(0,0,0,0.5)'
-          ctx.shadowBlur = 4
-          ctx.fillText(ann.text || '', ax, ay)
-        } else if (ann.type === 'arrow' && ann.endX !== undefined && ann.endY !== undefined) {
-          const ex = ann.endX * W
-          const ey = ann.endY * H
-          const sw = ann.strokeWidth || 3
-          ctx.strokeStyle = ann.color
-          ctx.lineWidth = sw
-          ctx.lineCap = 'round'
-          ctx.beginPath()
-          ctx.moveTo(ax, ay)
-          ctx.lineTo(ex, ey)
-          ctx.stroke()
-          // Arrowhead
-          const angle = Math.atan2(ey - ay, ex - ax)
-          const arrowLen = 16
-          ctx.beginPath()
-          ctx.moveTo(ex, ey)
-          ctx.lineTo(ex - arrowLen * Math.cos(angle - 0.4), ey - arrowLen * Math.sin(angle - 0.4))
-          ctx.moveTo(ex, ey)
-          ctx.lineTo(ex - arrowLen * Math.cos(angle + 0.4), ey - arrowLen * Math.sin(angle + 0.4))
-          ctx.stroke()
-        }
-        ctx.restore()
-      }
-    }
+    const container = containerRef.current
+    const width = container ? container.clientWidth : 800
+    const height = container ? container.clientHeight : 450
+
+    renderer.draw(
+      project,
+      renderTime,
+      video!,
+      bgImageRef.current?.img || null,
+      width,
+      height
+    )
 
     if (video && !video.paused && !video.ended) {
-      animFrameRef.current = requestAnimationFrame(renderFrameRef.current)
+      animFrameRef.current = requestAnimationFrame(forceRenderRef.current)
     } else {
       animFrameRef.current = 0
     }
   }, [project, currentTime, videoRef])
 
   useEffect(() => {
-    renderFrameRef.current = renderFrame
+    forceRenderRef.current = renderFrame
     if (animFrameRef.current === 0) {
-      renderFrameRef.current()
+      forceRenderRef.current()
     }
   }, [renderFrame])
 
+  // Initialize PixiRenderer
+  useEffect(() => {
+    if (!containerRef.current) return
+    const renderer = new PixiRenderer()
+    rendererRef.current = renderer
+
+    const init = async () => {
+      await renderer.init(containerRef.current!, {
+        width: containerRef.current!.clientWidth || 800,
+        height: containerRef.current!.clientHeight || 450
+      })
+      if (videoRef.current) {
+        await renderer.loadVideo(videoRef.current)
+      }
+      forceRenderRef.current()
+    }
+    init()
+
+    return () => {
+      renderer.destroy()
+      rendererRef.current = null
+    }
+  }, []) // Empty deps so it runs once on mount
+
+  // Watch for the video element becoming ready to load it into Pixi
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video || !rendererRef.current) return
+
+    const handleLoadedMetadata = async () => {
+      if (rendererRef.current) {
+        await rendererRef.current.loadVideo(video)
+        forceRenderRef.current()
+      }
+    }
+
+    if (video.readyState >= 1) {
+      handleLoadedMetadata()
+    } else {
+      video.addEventListener('loadedmetadata', handleLoadedMetadata)
+    }
+
+    return () => {
+      video.removeEventListener('loadedmetadata', handleLoadedMetadata)
+    }
+  }, [videoRef, project?.videoUrl]) // Re-run if videoUrl changes
+
   useLayoutEffect(() => {
     const video = videoRef.current
-    const canvas = canvasRef.current
+    const container = containerRef.current
 
     const syncCanvasMetrics = () => {
-      const currentCanvas = canvasRef.current
-      if (!currentCanvas) return false
-
-      const rect = currentCanvas.getBoundingClientRect()
-      const devicePixelRatio = window.devicePixelRatio
+      if (!container) return false
+      const rect = container.getBoundingClientRect()
+      
       const baseCssWidth = Math.max(FALLBACK_CANVAS_DIMENSION, rect.width)
       const baseCssHeight = Math.max(FALLBACK_CANVAS_DIMENSION, rect.height)
-      const pixelWidth = Math.ceil(baseCssWidth * devicePixelRatio)
-      const pixelHeight = Math.ceil(baseCssHeight * devicePixelRatio)
-      const previousMetrics = canvasMetricsRef.current
-      const didCssMetricsChange =
-        previousMetrics.width !== baseCssWidth ||
-        previousMetrics.height !== baseCssHeight ||
-        previousMetrics.devicePixelRatio !== devicePixelRatio
-
-      canvasMetricsRef.current = { width: baseCssWidth, height: baseCssHeight, devicePixelRatio }
-      const didPixelSizeChange = currentCanvas.width !== pixelWidth || currentCanvas.height !== pixelHeight
-      if (didPixelSizeChange) {
-        currentCanvas.width = pixelWidth
-        currentCanvas.height = pixelHeight
+      
+      const pixelWidth = Math.floor(baseCssWidth)
+      const pixelHeight = Math.floor(baseCssHeight)
+
+      if (rendererRef.current && rendererRef.current.app) {
+        if (rendererRef.current.app.canvas.width !== pixelWidth || rendererRef.current.app.canvas.height !== pixelHeight) {
+          rendererRef.current.app.renderer.resize(pixelWidth, pixelHeight)
+          return true
+        }
       }
-
-      return didCssMetricsChange || didPixelSizeChange
+      return false
     }
 
     const startRenderLoop = () => {
       if (animFrameRef.current === 0) {
-        animFrameRef.current = requestAnimationFrame(renderFrameRef.current)
+        animFrameRef.current = requestAnimationFrame(forceRenderRef.current)
       }
     }
 
@@ -233,28 +144,28 @@ export default function VideoPreview({ videoRef }: VideoPreviewProps) {
         cancelAnimationFrame(animFrameRef.current)
         animFrameRef.current = 0
       }
-      renderFrameRef.current()
+      forceRenderRef.current()
     }
 
     syncCanvasMetrics()
+    renderSingleFrame()
 
     const hasResizeObserver = typeof ResizeObserver !== 'undefined'
     let resizeObserver: ResizeObserver | null = null
-    const handleCanvasResize = () => {
-      if (syncCanvasMetrics()) {
-        renderSingleFrame()
-      }
-    }
-    if (hasResizeObserver && canvas) {
+    
+    if (hasResizeObserver && container) {
       resizeObserver = new ResizeObserver(() => {
-        handleCanvasResize()
+        if (syncCanvasMetrics()) {
+          renderSingleFrame()
+        }
       })
-      resizeObserver.observe(canvas)
+      resizeObserver.observe(container)
     }
-    window.addEventListener('resize', handleCanvasResize)
 
-    // Render one frame immediately for initial state / when currentTime changes
-    renderSingleFrame()
+    const handleResize = () => {
+      if (syncCanvasMetrics()) renderSingleFrame()
+    }
+    window.addEventListener('resize', handleResize)
 
     if (video) {
       video.addEventListener('play', startRenderLoop)
@@ -270,7 +181,7 @@ export default function VideoPreview({ videoRef }: VideoPreviewProps) {
         video.removeEventListener('ended', renderSingleFrame)
         video.removeEventListener('seeked', renderSingleFrame)
       }
-      window.removeEventListener('resize', handleCanvasResize)
+      window.removeEventListener('resize', handleResize)
       resizeObserver?.disconnect()
       if (animFrameRef.current !== 0) {
         cancelAnimationFrame(animFrameRef.current)
@@ -279,10 +190,10 @@ export default function VideoPreview({ videoRef }: VideoPreviewProps) {
     }
   }, [videoRef])
 
-  const handleCanvasClick = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
+  const handleCanvasClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
     if (!project) return
-    const canvas = canvasRef.current!
-    const rect = canvas.getBoundingClientRect()
+    const container = containerRef.current!
+    const rect = container.getBoundingClientRect()
     const x = (e.clientX - rect.left) / rect.width
     const y = (e.clientY - rect.top) / rect.height
 
@@ -300,13 +211,12 @@ export default function VideoPreview({ videoRef }: VideoPreviewProps) {
     })
   }, [project, currentTime, addAnnotation])
 
-  // Only the text tool uses canvas click placement; arrow/crop tools are not yet supported
   const isPlacementTool = selectedTool === 'text'
 
   return (
     <div className="relative w-full bg-black rounded-xl overflow-hidden border border-border">
-      <canvas
-        ref={canvasRef}
+      <div
+        ref={containerRef}
         className="w-full aspect-video"
         onClick={isPlacementTool ? handleCanvasClick : undefined}
         style={{ cursor: isPlacementTool ? 'crosshair' : 'default' }}
diff --git a/src/renderer/pages/EditorPage.tsx b/src/renderer/pages/EditorPage.tsx
index f6f5550..439745b 100644
--- a/src/renderer/pages/EditorPage.tsx
+++ b/src/renderer/pages/EditorPage.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, useCallback } from 'react'
 import {
   Play, Pause, SkipBack, SkipForward, Download,
-  ChevronLeft, ZoomIn, Type, Image, Crop, MousePointer
+  ChevronLeft, ZoomIn, Type, Crop, MousePointer, Subtitles
 } from 'lucide-react'
 import { useEditorStore } from '../store/useEditorStore'
 import VideoPreview from '../components/editor/VideoPreview'
@@ -10,6 +10,7 @@ import ZoomEditor from '../components/editor/ZoomEditor'
 import AnnotationTools from '../components/editor/AnnotationTools'
 import BackgroundPanel from '../components/editor/BackgroundPanel'
 import ExportDialog from '../components/editor/ExportDialog'
+import CaptionsPanel from '../components/editor/CaptionsPanel'
 import type { RecordingResult } from '../types'
 
 interface EditorPageProps {
@@ -17,7 +18,7 @@ interface EditorPageProps {
   onBack: () => void
 }
 
-type RightPanel = 'zoom' | 'annotations' | 'background' | 'crop'
+type RightPanel = 'zoom' | 'annotations' | 'background' | 'crop' | 'captions'
 
 import { AnimatePresence, motion } from 'framer-motion'
 
@@ -32,6 +33,7 @@ export default function EditorPage({ result, onBack }: EditorPageProps) {
   if (selectedZoomId || selectedTool === 'zoom') rightPanel = 'zoom'
   else if (selectedAnnotationId || selectedTool === 'text') rightPanel = 'annotations'
   else if (selectedTool === 'crop') rightPanel = 'crop'
+  else if (selectedTool === 'captions') rightPanel = 'captions'
 
   useEffect(() => {
     loadProject({
@@ -160,6 +162,13 @@ export default function EditorPage({ result, onBack }: EditorPageProps) {
           >
             <Crop size={15} />
           </button>
+          <button
+            onClick={() => { setSelectedTool('captions'); }}
+            className={`p-1.5 rounded-md transition-colors ${selectedTool === 'captions' ? 'bg-bg-secondary text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'}`}
+            title="Auto Captions"
+          >
+            <Subtitles size={15} />
+          </button>
         </div>
 
         <div className="flex-1" />
@@ -210,6 +219,7 @@ export default function EditorPage({ result, onBack }: EditorPageProps) {
               {rightPanel === 'annotations' && 'Annotation Properties'}
               {rightPanel === 'background' && 'Project Settings'}
               {rightPanel === 'crop' && 'Crop Settings'}
+              {rightPanel === 'captions' && 'Auto Captions'}
             </h3>
           </div>
 
@@ -275,6 +285,11 @@ export default function EditorPage({ result, onBack }: EditorPageProps) {
               </div>
                 </motion.div>
               )}
+              {rightPanel === 'captions' && (
+                <motion.div key="captions" initial={{ opacity: 0, x: 10 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -10 }} transition={{ duration: 0.15 }} className="absolute inset-0 p-4">
+                  <CaptionsPanel />
+                </motion.div>
+              )}
             </AnimatePresence>
           </div>
         </div>
diff --git a/src/renderer/pages/RecordPage.tsx b/src/renderer/pages/RecordPage.tsx
index 5ca7f14..1071fde 100644
--- a/src/renderer/pages/RecordPage.tsx
+++ b/src/renderer/pages/RecordPage.tsx
@@ -3,16 +3,9 @@ import { Mic, Volume2, Zap, Video } from 'lucide-react'
 import SourceSelector from '../components/recording/SourceSelector'
 import RecordingControls from '../components/recording/RecordingControls'
 import RecordingPreview from '../components/recording/RecordingPreview'
-import type { CaptureBounds, DesktopSource, RecordingResult, ZoomKeyframe } from '../types'
+import type { CaptureBounds, DesktopSource, RecordingResult, ZoomKeyframe, MouseEventData } from '../types'
 import appLogo from '../assets/focra-logo.svg'
 
-interface MouseEventData {
-  x: number
-  y: number
-  timestamp: number
-  type: 'click' | 'move'
-}
-
 const TARGET_FRAME_RATE = 60
 const MIN_CAPTURE_WIDTH = 1280
 const MIN_CAPTURE_HEIGHT = 720
@@ -101,6 +94,7 @@ export default function RecordPage({ onRecordingComplete }: RecordPageProps) {
   const captureBoundsRef = useRef<CaptureBounds | null>(null)
   const recordingDimensionsRef = useRef<{ width: number; height: number } | null>(null)
   const finalizePromiseRef = useRef<Promise<void> | null>(null)
+  const unsubscribeMouseMoveRef = useRef<(() => void) | null>(null)
 
   // High-quality preview stream when a source is selected
   useEffect(() => {
@@ -164,6 +158,7 @@ export default function RecordPage({ onRecordingComplete }: RecordPageProps) {
   useEffect(() => {
     return () => {
       unsubscribeMouseClickRef.current?.()
+      unsubscribeMouseMoveRef.current?.()
     }
   }, [])
 
@@ -189,35 +184,34 @@ export default function RecordPage({ onRecordingComplete }: RecordPageProps) {
       else if (recordingResolution === '4k') { idealWidth = 3840; idealHeight = 2160; }
 
       const videoConstraints: any = {
-        mandatory: {
-          chromeMediaSource: 'desktop',
-          chromeMediaSourceId: selectedSource.id,
-          minFrameRate: 30,
-          maxFrameRate: 60
-        }
+        frameRate: { ideal: 60, max: 60 }
       }
 
       if (recordingResolution !== 'auto') {
-        videoConstraints.mandatory.minWidth = idealWidth
-        videoConstraints.mandatory.maxWidth = idealWidth
-        videoConstraints.mandatory.minHeight = idealHeight
-        videoConstraints.mandatory.maxHeight = idealHeight
+        videoConstraints.width = { ideal: idealWidth, max: idealWidth }
+        videoConstraints.height = { ideal: idealHeight, max: idealHeight }
       }
 
       let displayStream: MediaStream
       try {
-        displayStream = await navigator.mediaDevices.getUserMedia({
-          audio: systemAudioEnabled
-            ? { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: selectedSource.id } }
-            : false,
-          video: videoConstraints
+        await window.electronAPI.setRecordingSource(selectedSource.id)
+        
+        displayStream = await navigator.mediaDevices.getDisplayMedia({
+          audio: systemAudioEnabled,
+          video: {
+            ...videoConstraints,
+            cursor: 'never'
+          }
         })
       } catch (audioError) {
         if (systemAudioEnabled) {
           console.warn('System audio capture failed, retrying without system audio.', audioError)
-          displayStream = await navigator.mediaDevices.getUserMedia({
+          displayStream = await navigator.mediaDevices.getDisplayMedia({
             audio: false,
-            video: videoConstraints
+            video: {
+              ...videoConstraints,
+              cursor: 'never'
+            }
           })
           setSystemAudioEnabled(false)
           setError('System audio unavailable. Recording video only. Check audio permissions.')
@@ -336,20 +330,28 @@ export default function RecordPage({ onRecordingComplete }: RecordPageProps) {
       // app windows (i.e. the recorded screen) are captured for auto-zoom.
       if (autoZoomTrackingEnabled) {
         unsubscribeMouseClickRef.current?.()
+        unsubscribeMouseMoveRef.current?.()
         try {
           unsubscribeMouseClickRef.current = window.electronAPI.onMouseClick((data) => {
             if (mediaRecorderRef.current?.state === 'recording') {
-              // Normalize the timestamp to active recording time by subtracting any
-              // accumulated paused duration so keyframes align with the WebM timeline.
               const normalizedTimestamp = Math.max(0, data.timestamp - pausedDurationRef.current)
               mouseEventsRef.current.push({ ...data, timestamp: normalizedTimestamp, type: 'click' })
             }
           })
+          
+          unsubscribeMouseMoveRef.current = window.electronAPI.onMouseMove((data) => {
+            if (mediaRecorderRef.current?.state === 'recording') {
+              const normalizedTimestamp = Math.max(0, data.timestamp - pausedDurationRef.current)
+              mouseEventsRef.current.push({ ...data, timestamp: normalizedTimestamp, type: 'move' })
+            }
+          })
+          
           await window.electronAPI.startMouseTracking(recordingStartTime, captureBounds)
         } catch (mouseTrackingError) {
-          // Mouse tracking failed — tear down the recorder and all acquired resources
           unsubscribeMouseClickRef.current?.()
           unsubscribeMouseClickRef.current = null
+          unsubscribeMouseMoveRef.current?.()
+          unsubscribeMouseMoveRef.current = null
           window.electronAPI.stopMouseTracking()
           cancelRecordingResources()
           throw mouseTrackingError
@@ -415,6 +417,8 @@ export default function RecordPage({ onRecordingComplete }: RecordPageProps) {
     window.electronAPI.stopMouseTracking()
     unsubscribeMouseClickRef.current?.()
     unsubscribeMouseClickRef.current = null
+    unsubscribeMouseMoveRef.current?.()
+    unsubscribeMouseMoveRef.current = null
 
     const finalizeRecording = async () => {
       if (finalizePromiseRef.current) return finalizePromiseRef.current
@@ -476,7 +480,7 @@ export default function RecordPage({ onRecordingComplete }: RecordPageProps) {
           const captureWidth = Math.max(MIN_CAPTURE_DIMENSION, recordingDimensions?.width ?? captureBounds?.width ?? 0)
           const captureHeight = Math.max(MIN_CAPTURE_DIMENSION, recordingDimensions?.height ?? captureBounds?.height ?? 0)
 
-          onRecordingComplete({ videoUrl, videoBlob: blob, duration, zoomKeyframes, captureWidth, captureHeight })
+          onRecordingComplete({ videoUrl, videoBlob: blob, duration, zoomKeyframes, captureWidth, captureHeight, cursorEvents: mouseEventsRef.current })
 
           cancelRecordingResources()
         } finally {
diff --git a/src/renderer/store/useEditorStore.ts b/src/renderer/store/useEditorStore.ts
index d20ab24..14b674c 100644
--- a/src/renderer/store/useEditorStore.ts
+++ b/src/renderer/store/useEditorStore.ts
@@ -42,6 +42,7 @@ interface EditorActions {
   setBackground: (background: Background) => void
   setCrop: (crop: CropSettings | null) => void
   setExportSettings: (settings: ExportSettings) => void
+  setCursorSmoothing: (factor: number) => void
 }
 
 export const useEditorStore = create<EditorState & EditorActions>((set) => ({
@@ -161,5 +162,11 @@ export const useEditorStore = create<EditorState & EditorActions>((set) => ({
     set((state) => {
       if (!state.project) return state
       return { project: { ...state.project, exportSettings } }
+    }),
+
+  setCursorSmoothing: (cursorSmoothing) =>
+    set((state) => {
+      if (!state.project) return state
+      return { project: { ...state.project, cursorSmoothing } }
     })
 }))
diff --git a/src/renderer/types/electron.d.ts b/src/renderer/types/electron.d.ts
index f7ec1df..5f58c29 100644
--- a/src/renderer/types/electron.d.ts
+++ b/src/renderer/types/electron.d.ts
@@ -33,7 +33,6 @@ interface ElectronAPI {
   stopMouseTracking: () => Promise<void>
   /** Subscribe to dwell events emitted by the main process during recording. Returns an unsubscribe fn. */
   onMouseClick: (callback: (data: MouseClickData) => void) => () => void
-  transcodeVideo: (buffer: ArrayBuffer, options: { fps: number }, onProgress?: (progress: number) => void) => Promise<ArrayBuffer>
 }
 
 declare global {
diff --git a/src/renderer/types/index.ts b/src/renderer/types/index.ts
index 128bd7d..75b424b 100644
--- a/src/renderer/types/index.ts
+++ b/src/renderer/types/index.ts
@@ -9,6 +9,13 @@ export interface ZoomKeyframe {
   motionBlur: boolean
 }
 
+export interface MouseEventData {
+  x: number
+  y: number
+  timestamp: number
+  type: 'click' | 'move'
+}
+
 export interface Annotation {
   id: string
   type: 'text' | 'arrow'
@@ -22,6 +29,7 @@ export interface Annotation {
   endX?: number
   endY?: number
   strokeWidth?: number
+  annotationSource?: 'auto-caption' | 'manual'
 }
 
 export interface TrimPoints {
@@ -65,6 +73,8 @@ export interface EditorProject {
   exportSettings: ExportSettings
   captureWidth?: number
   captureHeight?: number
+  cursorEvents?: MouseEventData[]
+  cursorSmoothing?: number
 }
 
 export interface DesktopSource {
@@ -89,8 +99,9 @@ export interface RecordingResult {
   zoomKeyframes: ZoomKeyframe[]
   captureWidth: number
   captureHeight: number
+  cursorEvents: MouseEventData[]
 }
 
-export type Tool = 'select' | 'text' | 'arrow' | 'crop'
+export type Tool = 'select' | 'zoom' | 'text' | 'arrow' | 'crop' | 'captions'
 
 export type AppPage = 'record' | 'editor'
diff --git a/vite.config.ts b/vite.config.ts
index 7e5022a..c492c2d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,9 +15,24 @@ export default defineConfig({
     plugins: [externalizeDepsPlugin()]
   },
   renderer: {
+    worker: {
+      format: 'es',
+      rollupOptions: {
+        output: {
+          inlineDynamicImports: true
+        }
+      }
+    },
+    optimizeDeps: {
+      exclude: ['@xenova/transformers']
+    },
     resolve: {
       alias: {
-        '@': resolve('src/renderer')
+        '@': resolve('src/renderer'),
+        'fs': resolve('src/renderer/lib/vite-stubs/empty-node-module.ts'),
+        'path': resolve('src/renderer/lib/vite-stubs/empty-node-module.ts'),
+        'url': resolve('src/renderer/lib/vite-stubs/empty-node-module.ts'),
+        'onnxruntime-node': resolve('src/renderer/lib/vite-stubs/onnxruntime-node-stub.ts')
       }
     },
     plugins: [react()]