egaki 0.7.2 → 0.9.0

package/src/vite/angled-screen.tsx

@@ -1,7 +1,11 @@
 'use client'
 
 /**
- * AngledScreen — CSS 3D perspective wrapper with fake bokeh depth-of-field.
+ * BasicAngledScreen — CSS 3D perspective wrapper with fake bokeh depth-of-field.
+ *
+ * The shader-based version (true depth-of-field via WebGL) lives in
+ * angled-screen-shader.tsx and is exported as AngledScreen. This CSS version
+ * is kept as a lightweight fallback that works without HTML-in-canvas support.
  *
  * Wraps any children (images, videos, divs) in a 3D-transformed plane using
  * CSS `perspective` + `transform: rotateX/Y/Z`. Simulates depth-of-field
@@ -23,7 +27,7 @@
 import { type CSSProperties, type ReactNode } from 'react'
 import { useTweakpane } from './tweakpane-hook.tsx'
 
-export interface AngledScreenProps {
+export interface BasicAngledScreenProps {
   children: ReactNode
 
   // --- 3D transform ---
@@ -91,7 +95,12 @@ function autoDirection(rotateX: number, rotateY: number): 'top' | 'bottom' | 'le
   return rotateX > 0 ? 'bottom' : 'top'
 }
 
-export function AngledScreen(props: AngledScreenProps) {
+/**
+ * @deprecated Use `AngledScreen` (angled-screen-shader.tsx) instead — the
+ * WebGL version with true depth-of-field. This CSS version only remains as
+ * the automatic fallback for browsers without HTML-in-canvas support.
+ */
+export function BasicAngledScreen(props: BasicAngledScreenProps) {
   const {
     children,
     transformOrigin = '50% 50%',
@@ -102,7 +111,7 @@ export function AngledScreen(props: AngledScreenProps) {
     style,
   } = props
 
-  const tp = useTweakpane('AngledScreen', {
+  const tp = useTweakpane('BasicAngledScreen', {
     perspective: { value: props.perspective ?? 1200, min: 100, max: 3000, step: 10 },
     rotateX: { value: props.rotateX ?? 8, min: -90, max: 90, step: 0.5 },
     rotateY: { value: props.rotateY ?? -12, min: -90, max: 90, step: 0.5 },

package/src/vite/code-block.tsx

@@ -32,8 +32,8 @@
  * - Cloudflare frame:       https://github.com/raycast/ray-so/blob/main/app/(navigation)/(code)/components/frames/CloudflareFrame.tsx
  */
 
-import { createContext, useContext, useEffect, useMemo, useState, type CSSProperties, type ReactNode } from 'react'
-import { interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion'
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useState, type CSSProperties, type ReactNode } from 'react'
+import { interpolate, spring, useCurrentFrame, useDelayRender, useVideoConfig } from 'remotion'
 import { useTweakpane } from './tweakpane-hook.tsx'
 
 // ---------------------------------------------------------------------------
@@ -422,12 +422,30 @@ function detectLanguage(title?: string, language?: string): string {
 
 function useHighlightedHtml(code: string, lang: string, highlightLines: number[]): string {
   const [html, setHtml] = useState('')
-
-  useEffect(() => {
+  const { delayRender, continueRender } = useDelayRender()
+
+  // delayRender registered during the first render (useState initializer) and
+  // continued only AFTER the highlighted html has been committed to the DOM
+  // (layout effect below). Continuing from inside the shiki .then() is too
+  // early: React batches the setHtml update, so the renderer could capture the
+  // frame between continueRender and the commit, producing an empty block in
+  // screenshots/filmstrips/exports.
+  const [handle] = useState(() => delayRender('shiki highlight'))
+  useLayoutEffect(() => {
+    if (html) continueRender(handle)
+  }, [html, handle, continueRender])
+  // Unmount safety: never leave a dangling handle.
+  useLayoutEffect(() => {
+    return () => continueRender(handle)
+  }, [handle, continueRender])
+
+  useLayoutEffect(() => {
     let cancelled = false
 
     void getHighlighter().then((h) => {
-      if (cancelled) return
+      if (cancelled) {
+        return
+      }
 
       // Load language on demand if not already loaded
       const loaded = h.getLoadedLanguages()
@@ -449,9 +467,13 @@ function useHighlightedHtml(code: string, lang: string, highlightLines: number[]
         }],
       })
       if (!cancelled) setHtml(result)
+    }).catch(() => {
+      continueRender(handle)
     })
 
-    return () => { cancelled = true }
+    return () => {
+      cancelled = true
+    }
   }, [code, lang, highlightLines.join(',')])
 
   return html

package/src/vite/layout-editor.tsx

@@ -687,7 +687,7 @@ export function LayoutEditor({ playerContainerRef, playerRef, editing, onEditing
     <div data-layout-editor-toolbar className='flex items-center gap-1.5 text-[13px]'>
       <ToolbarButton onClick={() => onEditingChange(!editing)} active={editing}
         title={editing ? 'Exit editing mode' : 'Edit layout — click to select, drag to move, corners to scale, double-click text to edit'}>
-        {editing ? '✦ Editing' : '✦ Edit Layout'}
+        {editing ? 'Editing' : 'Edit'}
       </ToolbarButton>
 
       {editing && changesCount > 0 && (

package/src/vite/mdx-video.test.tsx

@@ -14,7 +14,6 @@ import { mdxParse, extractImports, resolveModulePath } from 'safe-mdx/parse'
 import type { EagerModules } from 'safe-mdx/parse'
 import { MdastToJsx } from 'safe-mdx'
 import { splitIntoSections, calculateTotalDuration, resolveAutoDurations, parseFrontmatter, aspectRatioFromDimensions, buildMdxScope } from './mdx-parse.ts'
-import { findChangedSectionIndex } from './vite-plugin.ts'
 import { computeEffectiveDuration } from './media-duration-store.ts'
 import { findServerNodes, blankServerContents, collectServerImportSources, wrapGenerateNodes, collectServerFileImportNames } from './server-mdx.ts'
 import { stableJsonKey, hashKey, promptPrefix } from './server-components.tsx'
@@ -28,6 +27,7 @@ describe('MDX_BUILTIN_COMPONENTS', () => {
         "Audio",
         "Background",
         "BandsShader",
+        "BasicAngledScreen",
         "Blur",
         "BlurReveal",
         "CodeBlock",
@@ -1978,99 +1978,6 @@ describe('computeEffectiveDuration with startInFrames', () => {
   })
 })
 
-describe('findChangedSectionIndex', () => {
-  const base = [
-    '---',
-    'fps: 30',
-    'bpm: 120',
-    '---',
-    '',
-    '# Intro duration=3s',
-    '',
-    'Hello world',
-    '',
-    '# Middle duration=2s',
-    '',
-    'Some content here',
-    '',
-    '# Outro duration=1s',
-    '',
-    'Goodbye',
-  ].join('\n')
-
-  test('identical content returns null', () => {
-    expect(findChangedSectionIndex(base, base)).toBe(null)
-  })
-
-  test('editing first section returns 0', () => {
-    const edited = base.replace('Hello world', 'Hello EDITED')
-    expect(findChangedSectionIndex(base, edited)).toBe(0)
-  })
-
-  test('editing second section returns 1', () => {
-    const edited = base.replace('Some content here', 'New content')
-    expect(findChangedSectionIndex(base, edited)).toBe(1)
-  })
-
-  test('editing last section returns 2', () => {
-    const edited = base.replace('Goodbye', 'See ya')
-    expect(findChangedSectionIndex(base, edited)).toBe(2)
-  })
-
-  test('adding a new section returns its index', () => {
-    const added = base + '\n\n# Bonus duration=1s\n\nExtra stuff'
-    expect(findChangedSectionIndex(base, added)).toBe(3)
-  })
-
-  test('deleting last section returns null (skip deletions)', () => {
-    const deleted = base.replace('\n# Outro duration=1s\n\nGoodbye', '')
-    expect(findChangedSectionIndex(base, deleted)).toBe(null)
-  })
-
-  test('deleting middle section returns null (skip deletions)', () => {
-    const deleted = base.replace('\n# Middle duration=2s\n\nSome content here\n', '\n')
-    expect(findChangedSectionIndex(base, deleted)).toBe(null)
-  })
-
-  test('editing heading text returns that section index', () => {
-    const edited = base.replace('# Middle duration=2s', '# Middle Renamed duration=2s')
-    expect(findChangedSectionIndex(base, edited)).toBe(1)
-  })
-
-  test('preamble-only change returns null', () => {
-    const withPreamble = '<Audio src="/bg.mp3" />\n\n' + base.split('\n').slice(4).join('\n')
-    const oldPreamble = '---\nfps: 30\nbpm: 120\n---\n\n' + withPreamble
-    const newPreamble = oldPreamble.replace('/bg.mp3', '/new-bg.mp3')
-    expect(findChangedSectionIndex(oldPreamble, newPreamble)).toBe(null)
-  })
-
-  test('frontmatter-only change returns null', () => {
-    const edited = base.replace('fps: 30', 'fps: 60')
-    expect(findChangedSectionIndex(base, edited)).toBe(null)
-  })
-
-  test('editing heading duration returns that section index', () => {
-    const edited = base.replace('duration=3s', 'duration=4s')
-    expect(findChangedSectionIndex(base, edited)).toBe(0)
-  })
-
-  test('editing heading transition returns that section index', () => {
-    const old = '# Intro duration=3s transition=10\n\nHello'
-    const edited = '# Intro duration=3s transition=20\n\nHello'
-    expect(findChangedSectionIndex(old, edited)).toBe(0)
-  })
-
-  test('broken MDX returns null (does not throw)', () => {
-    const valid = '# Intro duration=3s\n\nHello world'
-    const broken = '# Intro duration=3s\n\n<Component'
-    expect(findChangedSectionIndex(valid, broken)).toBe(null)
-  })
-
-  test('both sources broken returns null', () => {
-    expect(findChangedSectionIndex('<Foo', '<Bar')).toBe(null)
-  })
-})
-
 // ---------------------------------------------------------------------------
 // Parse error recovery
 // ---------------------------------------------------------------------------

package/src/vite/mdx-video.tsx

@@ -29,7 +29,8 @@ import {
   StaggeredFadeUp,
   ShimmerSweep,
 } from './components.tsx'
-import { AngledScreen } from './angled-screen.tsx'
+import { BasicAngledScreen } from './angled-screen.tsx'
+import { AngledScreen } from './angled-screen-shader.tsx'
 import { CodeBlock, CODE_THEMES } from './code-block.tsx'
 import { BandsShader } from './bands-shader.tsx'
 import { WaveGradientShader } from './wave-gradient-shader.tsx'
@@ -924,6 +925,7 @@ export {
   StaggeredFadeUp,
   ShimmerSweep,
   AngledScreen,
+  BasicAngledScreen,
   CodeBlock,
   CODE_THEMES,
   BandsShader,
@@ -953,6 +955,7 @@ export const MDX_BUILTIN_COMPONENTS = {
   Background,
   LayoutTransition,
   AngledScreen,
+  BasicAngledScreen,
   BandsShader,
   WaveGradientShader,
   LiquidGradientShader,

package/src/vite/player-page.tsx

@@ -27,7 +27,7 @@ import { renderInBrowser } from './render-client.ts'
 import { createSpiceflowFetch } from 'spiceflow/client'
 import type { app } from './app.tsx'
 import { egakiStore } from './store.ts'
-import { useGenerationStatus, useGenerationErrors, type GenerationStatus } from './store-hooks.ts'
+import { useGenerationStatus, useGenerationErrors, useSidebarOpen, type GenerationStatus } from './store-hooks.ts'
 import { egakiSDK } from './sdk.ts'
 import { LayoutEditor, type SectionMeta } from './layout-editor.tsx'
 import { TweakpaneRoot, SIDEBAR_WIDTH } from './tweakpane-hook.tsx'
@@ -42,20 +42,6 @@ import {
 import { SectionIndexContext } from './media-duration-store.ts'
 import type { VideoFrontmatter } from './mdx-parse.ts'
 
-// ---------------------------------------------------------------------------
-// HMR scene-changed: store pending seek at module scope so it survives
-// component remounts caused by rsc:update (spiceflow payload swap).
-// The vite plugin sends egaki:scene-changed with { sectionIndex } when
-// the user edits a specific section of the entry MDX.
-// ---------------------------------------------------------------------------
-let pendingSceneSeek: { sectionIndex: number; file: string } | null = null
-/** Cancels the auto-pause listener from a previous scene-seek, so a new
- *  HMR during playback doesn't leave stale listeners that pause the wrong scene. */
-let cancelPreviousAutoPlay: (() => void) | null = null
-/** Monotonic counter to invalidate stale requestAnimationFrame callbacks
- *  when rapid successive HMR edits arrive before the first rAF fires. */
-let sceneSeekVersion = 0
-
 // ---------------------------------------------------------------------------
 // Generation progress client — fetches /api/generation-progress on page
 // load and on every rsc:update using the typed Spiceflow fetch client.
@@ -131,9 +117,6 @@ function connectToProgress() {
 if (typeof window !== 'undefined') connectToProgress()
 
 if (import.meta.hot) {
-  import.meta.hot.on('egaki:scene-changed', (data: { sectionIndex: number; file: string }) => {
-    pendingSceneSeek = data
-  })
   // Reconnect on rsc:update — new generations may have started from
   // MDX edits that trigger server-side rendering of <Server> blocks.
   import.meta.hot.on('rsc:update', () => {
@@ -488,81 +471,6 @@ export function PlayerPage({
     })
   }, [Component, totalDuration, sections, fps, width, height, scale])
 
-  // Consume pending scene seek after the RSC refetch delivers new sections.
-  // The module-level pendingSceneSeek is set by import.meta.hot.on before
-  // React re-renders; this effect fires after the commit with fresh data.
-  // Seeks to the changed section's start frame, plays it, and pauses at
-  // the section's end so the user sees exactly the content they edited.
-  useEffect(() => {
-    if (pendingSceneSeek == null) return
-    // Ignore scene changes from a different entry MDX file.
-    if (pendingSceneSeek.file !== entryPath) {
-      pendingSceneSeek = null
-      return
-    }
-    const idx = pendingSceneSeek.sectionIndex
-    pendingSceneSeek = null
-
-    // Wait one frame for the Remotion Player to initialize after remount.
-    // Version token ensures stale rAF callbacks from rapid edits are ignored.
-    const version = ++sceneSeekVersion
-    requestAnimationFrame(() => {
-      if (version !== sceneSeekVersion) return
-      const player = playerRef.current
-      if (!player || idx < 0 || idx >= sections.length) return
-
-      // Compute section boundaries from current sections
-      let startFrame = 0
-      for (let i = 0; i < idx; i++) {
-        startFrame += sections[i]!.durationInFrames
-      }
-      const endFrame = startFrame + sections[idx]!.durationInFrames - 1
-
-      player.seekTo(startFrame)
-
-      // Cancel any auto-pause from a previous HMR scene-seek so stale
-      // listeners don't pause playback in the wrong section.
-      cancelPreviousAutoPlay?.()
-      cancelPreviousAutoPlay = null
-
-      // Only auto-play if currently paused (after rsc:update remount
-      // the player always starts paused at frame 0)
-      if (!player.isPlaying()) {
-        player.play()
-
-        // Pause at section end so only the edited section plays.
-        // If the user manually seeks (clicks timeline, arrow keys, etc.)
-        // cancel the auto-pause so we don't randomly stop playback later.
-        let cancelled = false
-        const cleanup = () => {
-          if (cancelled) return
-          cancelled = true
-          cancelPreviousAutoPlay = null
-          player.removeEventListener('frameupdate', onFrame as any)
-          player.removeEventListener('seeked', onSeek as any)
-        }
-        cancelPreviousAutoPlay = cleanup
-        const onFrame = () => {
-          if (cancelled) return
-          if (player.getCurrentFrame() >= endFrame) {
-            player.pause()
-            cleanup()
-          }
-        }
-        const onSeek = (e: any) => {
-          // User seeked away — cancel auto-pause. Ignore seeks within
-          // the target section range (could be our own seekTo settling).
-          const frame = e?.detail?.frame ?? player.getCurrentFrame()
-          if (frame < startFrame || frame > endFrame) {
-            cleanup()
-          }
-        }
-        player.addEventListener('frameupdate', onFrame as any)
-        player.addEventListener('seeked', onSeek as any)
-      }
-    })
-  }, [sections])
-
   // Defer Player mount to client only. Remotion's Player and all composition
   // components (Series, AbsoluteFill, Audio, Video) use React context provided
   // by Player at runtime. During SSR there's no Remotion context, so hooks like
@@ -573,6 +481,7 @@ export function PlayerPage({
 
   const generationStatus = useGenerationStatus()
   const generationErrors = useGenerationErrors()
+  const sidebarOpen = useSidebarOpen()
 
   const [editing, setEditing] = useState(false)
   const [resetKey, setResetKey] = useState(0)
@@ -961,17 +870,29 @@ export function PlayerPage({
         </div>
       </div>
 
-      {/* Right sidebar — always visible, hosts tweakpane controls */}
+      {/* Right sidebar — collapsible, hosts tweakpane controls */}
       <TweakpaneRoot playerRef={playerRef} fps={fps} sections={sections} entryPath={entryPath} />
 
       {/* Floating toolbar — fixed at bottom, offset left to account for sidebar */}
       <div
         className='fixed bottom-6 flex items-center gap-1.5 rounded-full bg-[#1c1c1c] border border-white/10 px-2 py-1.5 shadow-2xl'
         style={{
-          left: `calc((100% - ${SIDEBAR_WIDTH}px - 0.75rem) / 2)`,
+          left: sidebarOpen ? `calc((100% - ${SIDEBAR_WIDTH}px - 0.75rem) / 2)` : '50%',
           transform: 'translateX(-50%)',
         }}
       >
+        {/* Previous scene (Down) — first item in the toolbar */}
+        <button
+          onClick={goToPrevScene}
+          disabled={!hasPrevScene}
+          className='flex items-center justify-center rounded-full w-7 h-7 text-zinc-400 hover:text-zinc-200 hover:bg-white/5 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default disabled:hover:bg-transparent disabled:hover:text-zinc-400'
+          title='Previous scene (↓)'
+        >
+          <ChevronDownIcon />
+        </button>
+
+        <ToolbarSeparator />
+
         {/* Entry selector — only shown when multiple MDX files exist */}
         {availableEntries.length > 1 && (
           <>
@@ -1046,28 +967,6 @@ export function PlayerPage({
 
         <ToolbarSeparator />
 
-        {/* Scene navigation — prev (Down) / next (Up) */}
-        <div className='flex items-center'>
-          <button
-            onClick={goToPrevScene}
-            disabled={!hasPrevScene}
-            className='flex items-center justify-center rounded-full w-7 h-7 text-zinc-400 hover:text-zinc-200 hover:bg-white/5 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default disabled:hover:bg-transparent disabled:hover:text-zinc-400'
-            title='Previous scene (↓)'
-          >
-            <ChevronDownIcon />
-          </button>
-          <button
-            onClick={goToNextScene}
-            disabled={!hasNextScene}
-            className='flex items-center justify-center rounded-full w-7 h-7 text-zinc-400 hover:text-zinc-200 hover:bg-white/5 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default disabled:hover:bg-transparent disabled:hover:text-zinc-400'
-            title='Next scene (↑)'
-          >
-            <ChevronUpIcon />
-          </button>
-        </div>
-
-        <ToolbarSeparator />
-
         <LayoutEditor
           playerContainerRef={playerContainerRef}
           playerRef={playerRef}
@@ -1101,6 +1000,18 @@ export function PlayerPage({
             </div>
           </>
         )}
+
+        <ToolbarSeparator />
+
+        {/* Next scene (Up) — last item in the toolbar */}
+        <button
+          onClick={goToNextScene}
+          disabled={!hasNextScene}
+          className='flex items-center justify-center rounded-full w-7 h-7 text-zinc-400 hover:text-zinc-200 hover:bg-white/5 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default disabled:hover:bg-transparent disabled:hover:text-zinc-400'
+          title='Next scene (↑)'
+        >
+          <ChevronUpIcon />
+        </button>
       </div>
     </div>
   )

package/src/vite/render-client.ts

@@ -9,32 +9,39 @@ import { ExportContext } from './mdx-video.tsx'
 import React from 'react'
 
 /**
- * Cover the web-renderer scaffold during export. The scaffold wrapper has
- * position:fixed + visibility:hidden + z-index:-9999, but allowHtmlInCanvas
- * sets visibility:visible on the inner layoutsubtree canvas, which can
- * make it peek through on the page.
+ * Wrap a composition for web-renderer entry points (export, screenshot,
+ * filmstrip). The scaffold wrapper is visibility:hidden and Chromium creates
+ * no paint records for hidden subtrees, which breaks captureElementImage()
+ * inside nested <HtmlInCanvas> (AngledScreen): onInit/onPaint silently never
+ * run and exports come out flat. visibility is overridable by descendants,
+ * so a visibility:visible div at the composition root restores paint records
+ * for the whole tree while deeper visibility:hidden ancestors (e.g.
+ * LayoutTransition's inactive instances) keep hiding their subtrees
+ * relative to this root.
  *
- * Do NOT modify the scaffold wrapper's own styles (translate, clip-path,
- * width/height, opacity). All of those break Chrome's drawElementImage
- * paint pipeline and produce black frames in the exported video. The
- * layout subtree canvas must remain at full size, in its original position,
- * with normal visibility for the capture to work.
+ * Tradeoff (accepted): the scaffold sits at z-index:-9999, painting above
+ * the page's root background but below all in-flow content — so the
+ * rendering composition can peek through wherever the page shows only the
+ * body background. Hiding it differently is not possible:
+ *   - opacity:0 / filter:opacity(0) bake into captureElementImage pixels
+ *     (verified: capture succeeds but frames come out fully transparent)
+ *   - translate/clip-path/resize on the scaffold break the drawElementImage
+ *     paint pipeline (black frames — learned June 2026, commit e501ca5)
+ *   - visibility:hidden kills paint records entirely (the original bug)
+ * An opaque page background or full-viewport player UI fully occludes it.
  *
- * Instead we place an opaque overlay on top (z-index:-9998, one above the
- * scaffold's -9999) that visually hides the rendering without touching
- * the scaffold's layout or paint properties.
+ * TODO: re-evaluate whether this wrapper is still needed once remotion
+ * fixes the HtmlInCanvas delayRender scoping / hidden-scaffold capture bug:
+ * https://github.com/remotion-dev/remotion/issues/9367
  */
-function injectScaffoldCover(): () => void {
-  const cover = document.createElement('div')
-  cover.style.cssText = [
-    'position:fixed',
-    'inset:0',
-    'z-index:-9998',
-    'background:#050505',
-    'pointer-events:none',
-  ].join(';')
-  document.body.appendChild(cover)
-  return () => cover.remove()
+export function wrapForWebRenderer(component: React.FC): React.FC {
+  const Wrapped: React.FC = () =>
+    React.createElement(
+      'div',
+      { style: { visibility: 'visible', position: 'relative', width: '100%', height: '100%' } },
+      React.createElement(component),
+    )
+  return Wrapped
 }
 
 export async function renderInBrowser(options: {
@@ -48,37 +55,31 @@ export async function renderInBrowser(options: {
   onProgress?: (progress: number) => void
   signal?: AbortSignal
 }) {
-  const removeCover = injectScaffoldCover()
-
   const ExportWrapped: React.FC = () =>
     React.createElement(ExportContext.Provider, { value: true },
       React.createElement(options.component))
 
-  try {
-    const { getBlob } = await renderMediaOnWeb({
-      composition: {
-        component: ExportWrapped,
-        durationInFrames: options.durationInFrames,
-        fps: options.fps ?? 30,
-        width: options.width ?? 1920,
-        height: options.height ?? 1080,
-        id: 'MdxVideo',
-        calculateMetadata: null,
-      },
-      inputProps: {},
-      container: 'mp4',
-      videoCodec: 'h264',
-      videoBitrate: 'high',
-      allowHtmlInCanvas: true,
-      scale: options.scale,
-      signal: options.signal,
-      onProgress: ({ progress }) => {
-        options.onProgress?.(progress)
-      },
-    })
+  const { getBlob } = await renderMediaOnWeb({
+    composition: {
+      component: wrapForWebRenderer(ExportWrapped),
+      durationInFrames: options.durationInFrames,
+      fps: options.fps ?? 30,
+      width: options.width ?? 1920,
+      height: options.height ?? 1080,
+      id: 'MdxVideo',
+      calculateMetadata: null,
+    },
+    inputProps: {},
+    container: 'mp4',
+    videoCodec: 'h264',
+    videoBitrate: 'high',
+    allowHtmlInCanvas: true,
+    scale: options.scale,
+    signal: options.signal,
+    onProgress: ({ progress }) => {
+      options.onProgress?.(progress)
+    },
+  })
 
-    return getBlob()
-  } finally {
-    removeCover()
-  }
+  return getBlob()
 }

package/src/vite/sdk.ts

@@ -13,6 +13,7 @@
 
 import React from 'react'
 import { renderStillOnWeb, renderMediaOnWeb } from '@remotion/web-renderer'
+import { wrapForWebRenderer } from './render-client.ts'
 import { ExportContext } from './mdx-video.tsx'
 import type {
   FrameRange,
@@ -403,7 +404,7 @@ class EgakiSDK {
 
     const still = await renderStillOnWeb({
       composition: {
-        component: c.component,
+        component: wrapForWebRenderer(c.component),
         durationInFrames: c.totalDuration,
         fps: c.fps,
         width: c.width,
@@ -502,7 +503,7 @@ class EgakiSDK {
     for (let i = 0; i < framesToCapture.length; i++) {
       const still = await renderStillOnWeb({
         composition: {
-          component: c.component,
+          component: wrapForWebRenderer(c.component),
           durationInFrames: c.totalDuration,
           fps: c.fps,
           width: c.width,
@@ -542,7 +543,7 @@ class EgakiSDK {
 
     const { getBlob } = await renderMediaOnWeb({
       composition: {
-        component: this.wrapForExport(c.component),
+        component: wrapForWebRenderer(this.wrapForExport(c.component)),
         durationInFrames: c.totalDuration,
         fps: c.fps,
         width: c.width,

package/src/vite/shader-renderer.tsx

@@ -71,7 +71,7 @@ export interface ShaderConfig {
 // ---------------------------------------------------------------------------
 
 /** Parse a hex color string (#RGB, #RRGGBB, #RRGGBBAA) to [r, g, b, a] in 0-1 range. */
-function parseHexColor(hex: string): [number, number, number, number] {
+export function parseHexColor(hex: string): [number, number, number, number] {
   let h = hex.replace('#', '')
   if (h.length === 3 || h.length === 4) {
     h = h
@@ -172,7 +172,7 @@ function generateFragmentSource(
 // WebGL helpers
 // ---------------------------------------------------------------------------
 
-function compileGlShader(
+export function compileGlShader(
   gl: WebGL2RenderingContext,
   type: number,
   source: string,
@@ -189,7 +189,7 @@ function compileGlShader(
   return shader
 }
 
-function linkGlProgram(
+export function linkGlProgram(
   gl: WebGL2RenderingContext,
   vs: WebGLShader,
   fs: WebGLShader,