egaki 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 All notable changes to this project will be documented in this file.
 
+## 0.9.0
+
+1. **`<AngledScreen>` with true WebGL depth-of-field** — the 3D tilted screen component is now shader-based. Children DOM is captured per frame with Chromium's HTML-in-canvas API and rendered as a perspective-tilted plane in a WebGL2 fragment shader, giving true per-pixel depth. Depth drives bokeh blur (the exact Three.js BokehShader 41-tap ring kernel), fog toward `backgroundColor`, and subtle film grain. Available in MDX without imports:
+
+   ```mdx
+   # Hero duration=5s
+
+   <AngledScreen rotateX={9} rotateY={-17} translateZ={120} backgroundColor="#0a0608">
+     <Img src="/screenshot.png" style={{ width: '100%', borderRadius: 14 }} />
+   </AngledScreen>
+   ```
+
+   New depth-of-field props: `bokeh`, `aperture` (default 0.5), `maxBlur` (default 0.12), `focus` (default 0 = auto-track the near side so blur ramps toward the far edge), plus `fog` and `grainIntensity`. Transform props (`perspective`, `rotateX/Y/Z`, `translateX`, `translateZ`) keep the same semantics as before.
+
+   Requires Chrome 149+ with `chrome://flags/#canvas-draw-element`. When HTML-in-canvas is unsupported, the previous CSS version renders automatically as a fallback (also exported directly as `BasicAngledScreen`).
+
+2. **Tweakpane controls now follow animated props** — `useTweakpane`-backed components (like `AngledScreen`) previously froze all values at mount, so animated props like `translateX={interpolate(frame, ...)}` stayed stuck at frame 0. Untouched keys now return the live value every frame and their sliders visibly animate during playback. Once you touch a control, that key freezes to your value until remount, so manual overrides survive seeks. "Copy changes" now only reports keys you actually edited.
+
+3. **Fixed flat exports and screenshots of shader scenes** — web-renderer exports, SDK `screenshot()`, `filmstrip()`, and `export()` of scenes with HTML-in-canvas shaders came out without the shader output (the export scaffold is hidden, so Chromium produced no paint records for the capture). The composition root is now wrapped in a visible container for all web-renderer entry points, restoring shader output in every export path.
+
+4. **Fixed export hang with hidden `<AngledScreen>` instances** — instances inside hidden ancestors (LayoutTransition ghosts, inactive timed instances) never fired their paint callback, leaving an unreleased delayRender handle that stalled exports ~28s per frame. Handle registration is now gated on actual visibility.
+
+5. **Remotion bumped to 4.0.494** — required for WebGL contexts inside HTML-in-canvas components (earlier versions grabbed a 2D context on the offscreen canvas first, blocking WebGL).
+
 ## 0.8.0
 
 1. **`egaki bpm` command** — detect BPM of audio files locally using peak detection and interval analysis. No API call needed, runs entirely on device via `node-web-audio-api`:

package/dist/vite/angled-screen-shader.d.ts

@@ -0,0 +1,45 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface AngledScreenProps {
+    children: ReactNode;
+    /** CSS perspective distance in px. Smaller = more dramatic. Default 1200. */
+    perspective?: number;
+    /** X-axis rotation in degrees (tilts top/bottom). Default 8. */
+    rotateX?: number;
+    /** Y-axis rotation in degrees (angles left/right). Default -12. */
+    rotateY?: number;
+    /** Z-axis rotation in degrees. Default 0. */
+    rotateZ?: number;
+    /** Shift the plane horizontally in px. Positive = right. Default 0. */
+    translateX?: number;
+    /** Push the plane forward/back in px. Positive = closer/larger. Default 0. */
+    translateZ?: number;
+    /** Enable depth-based bokeh blur. Default true. */
+    bokeh?: boolean;
+    /** Aperture — bigger values for shallower depth of field. Blur grows
+     *  linearly with distance from the focus plane, scaled by this.
+     *  Same semantics as Three's BokehPass. Default 0.5 (plugin value). */
+    aperture?: number;
+    /** Max blur in screen-UV units (fraction of frame size), the saturation
+     *  cap of the blur. Same as Three's `maxblur`. Default 0.12 (plugin value). */
+    maxBlur?: number;
+    /** Focus distance as a fraction of `perspective`. Default 0 = auto: focus
+     *  tracks the nearest visible point of the plane, so the near side stays
+     *  sharp and blur ramps progressively toward the far edge only. */
+    focus?: number;
+    /** Fog toward backgroundColor at the far depth (0-1). Default 0.35. */
+    fog?: number;
+    /** Film grain intensity. Default 0.02. */
+    grainIntensity?: number;
+    /** Background color behind the tilted screen. Default '#000000'. */
+    backgroundColor?: string;
+    /** Width of the inner content wrapper. Default '80%'. */
+    width?: string | number;
+    /** Height of the inner content wrapper. Default 'auto'. */
+    height?: string | number;
+    /** Render normalized depth as grayscale for debugging the DOF ramp. */
+    debug?: boolean;
+    /** Optional inline style on the outer container. */
+    style?: CSSProperties;
+}
+export declare function AngledScreen(props: AngledScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=angled-screen-shader.d.ts.map

package/dist/vite/angled-screen-shader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"angled-screen-shader.d.ts","sourceRoot":"","sources":["../../src/vite/angled-screen-shader.tsx"],"names":[],"mappings":"AAyEA,OAAO,EAAwC,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKhG,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAA;IAGnB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAA;IAGnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;2EAEuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;mFAC+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;uEAEmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IAGd,uEAAuE;IACvE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,CAAA;IAGxB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAExB,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB;AAwND,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAuWpD"}

package/dist/vite/angled-screen-shader.js

@@ -0,0 +1,573 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AngledScreen — WebGL depth-of-field 3D screen via Remotion HtmlInCanvas.
+ *
+ * Shader-based successor to BasicAngledScreen (angled-screen.tsx). Children
+ * DOM is captured per frame with the HTML-in-canvas API (texElementImage2D)
+ * and rendered as a 3D-tilted plane in a WebGL2 fragment shader:
+ *
+ *   screen pixel → ray from CSS-style perspective camera → ray/plane
+ *   intersection → plane-local UV → sample DOM texture
+ *
+ * The intersection distance gives true per-pixel depth, which drives:
+ *   - bokeh blur (poisson-disc, radius grows with distance from focus)
+ *   - fog toward backgroundColor (like the original Three.js plugin's
+ *     scene fog, unframer-private/plugin-angled-screen BokehPass setup)
+ *   - film grain (from the plugin's filmGrainShader, u_time-seeded)
+ *
+ * Prop names match BasicAngledScreen where semantics carry over:
+ * perspective/rotateX/rotateY/rotateZ/translateZ are interpreted exactly
+ * like the CSS transform version. Depth of field uses the exact Three.js
+ * BokehShader algorithm and the plugin's defaults (aperture 0.5,
+ * maxblur 0.12, focus at the plane center): blur grows linearly with the
+ * signed distance from the focus plane and saturates at maxBlur, sampled
+ * with the 41-tap Martins Upitis ring kernel in screen space.
+ *
+ * Requires Chrome 149+ with chrome://flags/#canvas-draw-element enabled.
+ * Falls back to the CSS BasicAngledScreen when unsupported.
+ *
+ * EXPORT PATH (DOM-composer fallback), hard-won — don't re-debug:
+ * When Remotion's nested HTML-in-canvas probe fails (Chromium changes the
+ * API shape between builds), web-renderer composes exports/stills with the
+ * DOM composer instead of native capture. Three things must line up for the
+ * shader output to survive that path:
+ *   1. The scaffold wrapper is visibility:hidden, and Chromium creates no
+ *      paint records for hidden subtrees — captureElementImage() throws
+ *      "missing paint record" and HtmlInCanvas SILENTLY skips onInit/onPaint
+ *      (canRetryMissingPaintRecord swallows it). Fix: the egaki render entry
+ *      points wrap the composition root in a visibility:visible div
+ *      (wrapForWebRenderer in render-client.ts), restoring paint records
+ *      while preserving deeper visibility:hidden semantics (e.g.
+ *      LayoutTransition's hidden inactive instances). Do NOT force
+ *      visibility on this component's canvas — that leaks into preview.
+ *   2. remotion's HtmlInCanvas has a scoping bug (present through 4.0.495):
+ *      it registers delayRender() on the GLOBAL window scope but the
+ *      scaffold's waitForReady() polls its own delayRenderScope — so the
+ *      renderer never waits for the nested canvas paint. Fix: this component
+ *      registers its own properly-scoped useDelayRender() handle per frame
+ *      while isRendering, calls requestPaint(), and releases the handle only
+ *      after onPaint has drawn and blitted the frame.
+ *      TODO: remove the scoped-delayRender workaround (and re-evaluate the
+ *      visibility wrapper in render-client.ts) once this upstream issue is
+ *      fixed: https://github.com/remotion-dev/remotion/issues/9367
+ *   3. The DOM composer cannot read the transferred placeholder canvas, so
+ *      every painted GL frame is blitted into a plain 2D mirror canvas that
+ *      the composer picks up like any regular canvas.
+ *
+ * Coordinate mapping notes (hard-won, don't re-derive):
+ *   - GL space is y-up, z toward viewer, camera at (0, 0, perspective).
+ *   - CSS rotateX(+)/rotateY(+) match standard GL Rx/Ry; CSS rotateZ is
+ *     visually clockwise (y-down), so we negate it for GL.
+ *   - UNPACK_FLIP_Y_WEBGL=true puts DOM top at v=1, matching y-up plane UVs.
+ */
+import { HtmlInCanvas, useCurrentFrame, useDelayRender, useRemotionEnvironment, useVideoConfig, } from 'remotion';
+import { useCallback, useLayoutEffect, useRef } from 'react';
+import { useTweakpane } from "./tweakpane-hook.js";
+import { compileGlShader, linkGlProgram, parseHexColor } from "./shader-renderer.js";
+import { BasicAngledScreen } from "./angled-screen.js";
+const VERTEX_SHADER = `#version 300 es
+precision highp float;
+in vec2 a_position;
+in vec2 a_texCoord;
+out vec2 v_uv;
+void main() {
+  v_uv = a_texCoord;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}
+`;
+const FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+
+uniform sampler2D u_tex;
+uniform mat3 u_rot;          // plane local -> world rotation
+uniform vec2 u_planeSize;    // logical composition px
+uniform float u_perspective; // camera z in px
+uniform float u_translateX;  // plane center x in px
+uniform float u_translateZ;  // plane center z in px
+uniform float u_depthMin;    // nearest corner distance to camera
+uniform float u_depthMax;    // farthest corner distance to camera
+uniform float u_bokehEnabled;
+uniform float u_aperture;   // Three BokehShader aperture (plugin: 0.5)
+uniform float u_maxblur;    // Three BokehShader maxblur, screen-UV units (plugin: 0.12)
+uniform float u_focusDist;  // focus distance in px along the ray
+uniform float u_aspect;     // width / height, for circular bokeh
+uniform float u_fog;
+uniform float u_grain;
+uniform vec4 u_background;
+uniform float u_debug;
+uniform float u_time;
+
+in vec2 v_uv;
+out vec4 fragColor;
+
+float rand(vec2 co) {
+  return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+// Three.js BokehShader ring kernel (Martins Upitis lens blur):
+// 16 taps at radius 1.0, 8 at 0.9, 8 at 0.7, 8 at 0.4, plus center = 41.
+const vec2 RING1[16] = vec2[](
+  vec2(0.0, 0.4), vec2(0.15, 0.37), vec2(0.29, 0.29), vec2(-0.37, 0.15),
+  vec2(0.40, 0.0), vec2(0.37, -0.15), vec2(0.29, -0.29), vec2(-0.15, -0.37),
+  vec2(0.0, -0.4), vec2(-0.15, 0.37), vec2(-0.29, 0.29), vec2(0.37, 0.15),
+  vec2(-0.4, 0.0), vec2(-0.37, -0.15), vec2(-0.29, -0.29), vec2(0.15, -0.37)
+);
+const vec2 RING9[8] = vec2[](
+  vec2(0.15, 0.37), vec2(-0.37, 0.15), vec2(0.37, -0.15), vec2(-0.15, -0.37),
+  vec2(-0.15, 0.37), vec2(0.37, 0.15), vec2(-0.37, -0.15), vec2(0.15, -0.37)
+);
+const vec2 RING7[8] = vec2[](
+  vec2(0.29, 0.29), vec2(0.40, 0.0), vec2(0.29, -0.29), vec2(0.0, -0.4),
+  vec2(-0.29, 0.29), vec2(-0.4, 0.0), vec2(-0.29, -0.29), vec2(0.0, 0.4)
+);
+
+// Intersect the camera ray through screen uv suv with the tilted plane.
+// Returns ray distance t, or -1.0 on miss. Outputs plane uv + edge coverage.
+float intersectPlane(vec2 suv, out vec2 uv, out float coverage) {
+  vec2 screen = (suv - 0.5) * u_planeSize;
+  vec3 C = vec3(0.0, 0.0, u_perspective);
+  vec3 dir = normalize(vec3(screen, 0.0) - C);
+  vec3 n = u_rot * vec3(0.0, 0.0, 1.0);
+  vec3 q0 = vec3(u_translateX, 0.0, u_translateZ);
+  float denom = dot(n, dir);
+  if (abs(denom) < 1e-6) return -1.0;
+  float t = dot(n, q0 - C) / denom;
+  if (t <= 0.0) return -1.0;
+  vec3 local = transpose(u_rot) * (C + t * dir - q0);
+  uv = local.xy / u_planeSize + 0.5;
+  vec2 edgePx = (0.5 - abs(uv - 0.5)) * u_planeSize;
+  coverage = clamp(min(edgePx.x, edgePx.y) + 0.5, 0.0, 1.0);
+  return t;
+}
+
+// Full scene color at a screen position: plane composited over background.
+// Screen-space sampling like Three's BokehPass (which blurs the rendered
+// frame), so blur also softens the plane edges into the background.
+vec4 sampleScene(vec2 suv) {
+  vec2 uv;
+  float coverage;
+  float t = intersectPlane(suv, uv, coverage);
+  if (t < 0.0 || coverage <= 0.0) return u_background;
+  vec4 c = texture(u_tex, uv);
+  c = vec4(mix(u_background.rgb, c.rgb, c.a), 1.0);
+  return mix(u_background, c, coverage);
+}
+
+void main() {
+  vec4 bg = u_background;
+
+  vec2 uv;
+  float coverage;
+  float t = intersectPlane(v_uv, uv, coverage);
+  bool hit = t > 0.0 && coverage > 0.0;
+
+  // Normalized depth across the visible plane (0 = near, 1 = far) — used
+  // for fog and the debug view.
+  float depth01 = hit
+    ? clamp((t - u_depthMin) / max(u_depthMax - u_depthMin, 1e-3), 0.0, 1.0)
+    : 1.0;
+
+  if (u_debug > 0.5) {
+    fragColor = hit ? mix(bg, vec4(vec3(depth01), 1.0), coverage) : bg;
+    return;
+  }
+
+  // Three.js BokehShader blur factor, made one-sided: only content BEYOND
+  // the focus plane blurs (the far side of the tilted screen). The near side
+  // stays tack sharp. Background pixels (no hit) count as far away, so the
+  // plane silhouette melts softly where it is out of focus.
+  float factor = hit ? max(t - u_focusDist, 0.0) / u_perspective : 1.0;
+  vec2 dofblur = vec2(clamp(factor * u_aperture, 0.0, u_maxblur)) * u_bokehEnabled;
+
+  vec2 aspectcorrect = vec2(1.0, u_aspect);
+  vec2 dofblur9 = dofblur * 0.9;
+  vec2 dofblur7 = dofblur * 0.7;
+  vec2 dofblur4 = dofblur * 0.4;
+
+  vec4 col = sampleScene(v_uv);
+  for (int i = 0; i < 16; i++) {
+    col += sampleScene(v_uv + RING1[i] * aspectcorrect * dofblur);
+  }
+  for (int i = 0; i < 8; i++) {
+    col += sampleScene(v_uv + RING9[i] * aspectcorrect * dofblur9);
+  }
+  for (int i = 0; i < 8; i++) {
+    col += sampleScene(v_uv + RING7[i] * aspectcorrect * dofblur7);
+  }
+  for (int i = 0; i < 8; i++) {
+    col += sampleScene(v_uv + RING7[i] * aspectcorrect * dofblur4);
+  }
+  col /= 41.0;
+
+  // Fog toward background with depth (plugin's THREE.Fog equivalent)
+  col.rgb = mix(col.rgb, bg.rgb, u_fog * depth01 * (hit ? 1.0 : 0.0));
+
+  // Film grain (plugin's filmGrainShader)
+  col.rgb += (rand(v_uv + fract(u_time)) - 0.5) * u_grain;
+  col.a = 1.0;
+
+  fragColor = col;
+}
+`;
+const UNIFORM_NAMES = [
+    'u_tex',
+    'u_rot',
+    'u_planeSize',
+    'u_perspective',
+    'u_translateX',
+    'u_translateZ',
+    'u_depthMin',
+    'u_depthMax',
+    'u_bokehEnabled',
+    'u_aperture',
+    'u_maxblur',
+    'u_focusDist',
+    'u_aspect',
+    'u_fog',
+    'u_grain',
+    'u_background',
+    'u_debug',
+    'u_time',
+];
+/**
+ * Build the CSS-order rotation matrix M = Rx * Ry * Rz(-z) in GL coords
+ * (y up, z toward viewer). Returns row-major 3x3 as number[][].
+ */
+function rotationMatrix(rxDeg, ryDeg, rzDeg) {
+    const rx = (rxDeg * Math.PI) / 180;
+    const ry = (ryDeg * Math.PI) / 180;
+    const rz = (-rzDeg * Math.PI) / 180;
+    const cx = Math.cos(rx);
+    const sx = Math.sin(rx);
+    const cy = Math.cos(ry);
+    const sy = Math.sin(ry);
+    const cz = Math.cos(rz);
+    const sz = Math.sin(rz);
+    const Rx = [
+        [1, 0, 0],
+        [0, cx, -sx],
+        [0, sx, cx],
+    ];
+    const Ry = [
+        [cy, 0, sy],
+        [0, 1, 0],
+        [-sy, 0, cy],
+    ];
+    const Rz = [
+        [cz, -sz, 0],
+        [sz, cz, 0],
+        [0, 0, 1],
+    ];
+    const mul = (a, b) => a.map((row, i) => row.map((_, j) => a[i][0] * b[0][j] + a[i][1] * b[1][j] + a[i][2] * b[2][j]));
+    return mul(mul(Rx, Ry), Rz);
+}
+export function AngledScreen(props) {
+    const frame = useCurrentFrame();
+    const { width: compW, height: compH, fps } = useVideoConfig();
+    const glRef = useRef(null);
+    // Mirror canvas: the web-renderer's DOM composer (used for exports and SDK
+    // screenshots whenever nested HTML-in-canvas capture is unavailable)
+    // cannot read the HtmlInCanvas offscreen and paints the raw children
+    // instead. Every painted GL frame is blitted into this plain 2D canvas
+    // overlaid on top; the DOM composer draws it like any regular canvas.
+    // It is always mounted (not only during export) because sdk.screenshot()
+    // captures the live tree without ExportContext.
+    const mirrorRef = useRef(null);
+    const mirrorLoggedRef = useRef(false);
+    // Export sync: while web-renderer renders (isRendering), hold a scoped
+    // delayRender handle per frame and force a paint on the layout canvas.
+    // Released in onPaint after the GL frame is blitted to the mirror, so
+    // waitForReady() blocks until the shader output for THIS frame exists.
+    // Needed because remotion's own "waiting for first paint" delayRender
+    // registers on the window scope, which the export scaffold ignores.
+    // TODO: remove once fixed upstream:
+    // https://github.com/remotion-dev/remotion/issues/9367
+    const { isRendering } = useRemotionEnvironment();
+    const { delayRender, continueRender } = useDelayRender();
+    const continueRenderRef = useRef(continueRender);
+    continueRenderRef.current = continueRender;
+    const layoutCanvasRef = useRef(null);
+    const pendingPaintHandleRef = useRef(null);
+    const tp = useTweakpane('AngledScreen', {
+        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 },
+        rotateZ: { value: props.rotateZ ?? 0, min: -180, max: 180, step: 0.5 },
+        translateX: { value: props.translateX ?? 0, min: -1000, max: 1000, step: 1 },
+        translateZ: { value: props.translateZ ?? 0, min: -500, max: 500, step: 1 },
+        bokeh: props.bokeh ?? true,
+        aperture: { value: props.aperture ?? 0.5, min: 0, max: 2, step: 0.01 },
+        maxBlur: { value: props.maxBlur ?? 0.12, min: 0, max: 0.3, step: 0.005 },
+        // 0 = auto: focus tracks the nearest visible point of the plane, so only
+        // the far side blurs, progressively. Any other value = fraction of
+        // perspective, like Three's focus uniform.
+        focus: {
+            value: props.focus ?? 0,
+            min: 0,
+            max: 2,
+            step: 0.01,
+        },
+        fog: { value: props.fog ?? 0.35, min: 0, max: 1, step: 0.01 },
+        grainIntensity: { value: props.grainIntensity ?? 0.02, min: 0, max: 0.2, step: 0.005 },
+        backgroundColor: props.backgroundColor ?? '#000000',
+        debug: props.debug ?? false,
+    });
+    const { perspective, rotateX, rotateY, rotateZ, translateX, translateZ } = tp;
+    const { aperture, maxBlur, focus, fog, grainIntensity } = tp;
+    const { bokeh, debug, backgroundColor } = tp;
+    const time = frame / fps;
+    const onInit = useCallback(({ canvas }) => {
+        const gl = canvas.getContext('webgl2', {
+            alpha: true,
+            premultipliedAlpha: true,
+            antialias: false,
+            // Required so the mirror canvas (export path) can drawImage() the GL
+            // buffer after the draw call instead of getting a cleared buffer.
+            preserveDrawingBuffer: true,
+        });
+        if (!gl) {
+            throw new Error('[AngledScreen] WebGL2 unavailable');
+        }
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+        const vs = compileGlShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+        const fs = compileGlShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+        const program = linkGlProgram(gl, vs, fs);
+        gl.deleteShader(vs);
+        gl.deleteShader(fs);
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        // Fullscreen quad: interleaved position + uv, 6 vertices
+        const buffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        // prettier-ignore
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+            -1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1,
+            -1, 1, 0, 1, 1, -1, 1, 0, 1, 1, 1, 1,
+        ]), gl.STATIC_DRAW);
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+        const posLoc = gl.getAttribLocation(program, 'a_position');
+        const uvLoc = gl.getAttribLocation(program, 'a_texCoord');
+        gl.enableVertexAttribArray(posLoc);
+        gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 16, 0);
+        gl.enableVertexAttribArray(uvLoc);
+        gl.vertexAttribPointer(uvLoc, 2, gl.FLOAT, false, 16, 8);
+        const locs = {};
+        for (const name of UNIFORM_NAMES) {
+            locs[name] = gl.getUniformLocation(program, name);
+        }
+        gl.useProgram(program);
+        gl.bindVertexArray(vao);
+        glRef.current = { gl, program, texture, locs, canvas };
+        return () => {
+            gl.deleteProgram(program);
+            gl.deleteTexture(texture);
+            gl.deleteVertexArray(vao);
+            gl.deleteBuffer(buffer);
+            glRef.current = null;
+        };
+    }, []);
+    const onPaint = useCallback(({ elementImage }) => {
+        const state = glRef.current;
+        if (!state)
+            return;
+        const { gl, locs } = state;
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, state.texture);
+        // The HTML-in-canvas API changed shape between Chromium builds:
+        //   Chrome 149-151: texElementImage2D(target, level, internalformat, format, type, element)
+        //   Chrome 152+:    texElementImage2D(target, internalformat, element)
+        //     where internalformat must be sized (RGBA8, SRGB8_ALPHA8, RGBA16F, RGBA32F)
+        // Detect via Function.length (3 = new signature).
+        if (gl.texElementImage2D.length <= 3) {
+            ;
+            gl.texElementImage2D(gl.TEXTURE_2D, gl.RGBA8, elementImage);
+        }
+        else {
+            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, elementImage);
+        }
+        // CPU-side scene setup: rotation matrix + VISIBLE depth statistics.
+        // Depth is sampled on a 7x7 grid of rays across the screen and
+        // summarized with percentiles. Percentiles are area-weighted, which
+        // matters: rays toward the plane's vanishing direction produce huge t
+        // values, and using the raw corner min/max would compress the blur
+        // ramp so much that most of the image reads sharp. Quantiles keep the
+        // ramp perceptually spread across the screen.
+        const M = rotationMatrix(rotateX, rotateY, rotateZ);
+        const hw = compW / 2;
+        const hh = compH / 2;
+        // Plane normal (third column of M)
+        const nx = M[0][2];
+        const ny = M[1][2];
+        const nz = M[2][2];
+        const depths = [];
+        for (let gy = 0; gy < 7; gy++) {
+            for (let gx = 0; gx < 7; gx++) {
+                // Ray from camera C=(0,0,perspective) through screen point (sx,sy,0)
+                const sx = ((gx / 6) * 2 - 1) * hw;
+                const sy = ((gy / 6) * 2 - 1) * hh;
+                const len = Math.hypot(sx, sy, perspective);
+                const denom = (nx * sx + ny * sy - nz * perspective) / len;
+                if (Math.abs(denom) < 1e-6)
+                    continue;
+                // t = dot(n, q0 - C) / dot(n, dir), q0 = (translateX,0,translateZ)
+                const t = (nx * translateX + nz * (translateZ - perspective)) / denom;
+                if (t > 0 && Number.isFinite(t))
+                    depths.push(t);
+            }
+        }
+        depths.sort((a, b) => a - b);
+        const quantile = (q) => depths[Math.min(depths.length - 1, Math.round(q * (depths.length - 1)))] ?? perspective;
+        const depthMin = depths.length > 0 ? depths[0] : perspective;
+        const depthMax = depths.length > 0 ? quantile(0.95) : perspective + 1;
+        if (locs.u_tex)
+            gl.uniform1i(locs.u_tex, 0);
+        if (locs.u_rot) {
+            // GLSL mat3 is column-major; M is row-major → transpose on flatten
+            // prettier-ignore
+            gl.uniformMatrix3fv(locs.u_rot, false, [
+                M[0][0], M[1][0], M[2][0],
+                M[0][1], M[1][1], M[2][1],
+                M[0][2], M[1][2], M[2][2],
+            ]);
+        }
+        if (locs.u_planeSize)
+            gl.uniform2f(locs.u_planeSize, compW, compH);
+        if (locs.u_perspective)
+            gl.uniform1f(locs.u_perspective, perspective);
+        if (locs.u_translateX)
+            gl.uniform1f(locs.u_translateX, translateX);
+        if (locs.u_translateZ)
+            gl.uniform1f(locs.u_translateZ, translateZ);
+        if (locs.u_depthMin)
+            gl.uniform1f(locs.u_depthMin, depthMin);
+        if (locs.u_depthMax)
+            gl.uniform1f(locs.u_depthMax, depthMax);
+        // focus=0 (auto): the focus plane sits at the 40th depth percentile,
+        // so roughly the near half of the image reads sharp and blur ramps
+        // progressively from there toward the far edge. The effective aperture
+        // is auto-scaled so blur reaches maxBlur at the 95th percentile
+        // regardless of scene scale (aperture prop acts as a multiplier
+        // relative to its 0.5 default: higher = saturates earlier).
+        const focusDist = focus > 0 ? focus * perspective : quantile(0.4);
+        const apertureEff = focus > 0
+            ? aperture
+            : (aperture / 0.5) * ((maxBlur * perspective) / Math.max(depthMax - focusDist, 1));
+        if (locs.u_bokehEnabled)
+            gl.uniform1f(locs.u_bokehEnabled, bokeh ? 1 : 0);
+        if (locs.u_aperture)
+            gl.uniform1f(locs.u_aperture, apertureEff);
+        if (locs.u_maxblur)
+            gl.uniform1f(locs.u_maxblur, maxBlur);
+        if (locs.u_focusDist)
+            gl.uniform1f(locs.u_focusDist, focusDist);
+        if (locs.u_aspect)
+            gl.uniform1f(locs.u_aspect, compW / compH);
+        if (locs.u_fog)
+            gl.uniform1f(locs.u_fog, fog);
+        if (locs.u_grain)
+            gl.uniform1f(locs.u_grain, grainIntensity);
+        if (locs.u_background)
+            gl.uniform4fv(locs.u_background, parseHexColor(backgroundColor));
+        if (locs.u_debug)
+            gl.uniform1f(locs.u_debug, debug ? 1 : 0);
+        if (locs.u_time)
+            gl.uniform1f(locs.u_time, time);
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+        // Export path: mirror the GL frame into the overlay 2D canvas so the
+        // DOM composer (used when nested HTML-in-canvas capture is
+        // unavailable) picks up the shader output instead of the raw children.
+        const mirror = mirrorRef.current;
+        if (mirror) {
+            if (mirror.width !== state.canvas.width || mirror.height !== state.canvas.height) {
+                mirror.width = state.canvas.width;
+                mirror.height = state.canvas.height;
+            }
+            const ctx2d = mirror.getContext('2d');
+            if (ctx2d) {
+                ctx2d.drawImage(state.canvas, 0, 0);
+                if (!mirrorLoggedRef.current) {
+                    mirrorLoggedRef.current = true;
+                    console.info('[egaki] AngledScreen: mirror canvas active — GL frames are blitted to a 2D canvas so DOM-composer captures (export/screenshot) include the shader output.');
+                }
+            }
+        }
+        // Release the export-sync handle now that this frame's shader output
+        // (including the mirror blit) is complete.
+        const pending = pendingPaintHandleRef.current;
+        if (pending !== null) {
+            pendingPaintHandleRef.current = null;
+            continueRenderRef.current(pending);
+        }
+    }, [
+        compW, compH, perspective, rotateX, rotateY, rotateZ, translateX, translateZ,
+        bokeh, aperture, maxBlur, focus, fog, grainIntensity,
+        backgroundColor, debug, time,
+    ]);
+    const supported = typeof document !== 'undefined' && HtmlInCanvas.isSupported();
+    // Per-frame export sync (see comment on pendingPaintHandleRef). Layout
+    // effect so the handle is registered synchronously inside the renderer's
+    // flushSync time update, before waitForReady() first checks the scope.
+    // Gated on `supported`: the CSS BasicAngledScreen fallback never paints,
+    // so registering a handle there would hang the export until timeout.
+    // Also gated on computed visibility: instances under visibility:hidden
+    // ancestors (LayoutTransition ghosts and inactive timed instances) get no
+    // Chromium paint records, so their HtmlInCanvas never fires paint and a
+    // registered handle would hang the export. Premounted sections are fine —
+    // remotion premount hides via opacity:0, which keeps paint records.
+    useLayoutEffect(() => {
+        if (!isRendering || !supported)
+            return;
+        const canvas = layoutCanvasRef.current;
+        if (!canvas || getComputedStyle(canvas).visibility === 'hidden')
+            return;
+        const handle = delayRender('AngledScreen: waiting for shader paint');
+        pendingPaintHandleRef.current = handle;
+        layoutCanvasRef.current?.requestPaint?.();
+        return () => {
+            if (pendingPaintHandleRef.current === handle) {
+                pendingPaintHandleRef.current = null;
+            }
+            continueRenderRef.current(handle);
+        };
+    }, [frame, isRendering, supported, delayRender]);
+    if (!supported) {
+        if (typeof console !== 'undefined' && !globalThis.__egakiAngledScreenFallbackWarned) {
+            ;
+            globalThis.__egakiAngledScreenFallbackWarned = true;
+            console.warn('[egaki] AngledScreen: HTML-in-canvas is not supported in this browser — ' +
+                'falling back to the CSS BasicAngledScreen (no true depth-of-field). ' +
+                'Use Chrome 149+ and enable chrome://flags/#canvas-draw-element for the WebGL version.');
+        }
+        return (_jsx(BasicAngledScreen, { perspective: perspective, rotateX: rotateX, rotateY: rotateY, rotateZ: rotateZ, translateZ: translateZ, bokeh: bokeh, bokehBlur: maxBlur * compW * 0.4, bokehOffset: 0.5, backgroundColor: backgroundColor, width: props.width, height: props.height, debug: debug, style: {
+                // BasicAngledScreen has no translateX — approximate with a CSS shift
+                transform: translateX !== 0 ? `translateX(${translateX}px)` : undefined,
+                ...props.style,
+            }, children: props.children }));
+    }
+    return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%', overflow: 'hidden', ...props.style }, children: [_jsx(HtmlInCanvas, { ref: layoutCanvasRef, width: compW, height: compH, pixelDensity: Math.min(typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1, 2), onInit: onInit, onPaint: onPaint, children: _jsx("div", { style: {
+                        position: 'absolute',
+                        inset: 0,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }, children: _jsx("div", { style: {
+                            width: typeof props.width === 'number' ? `${props.width}px` : (props.width ?? '80%'),
+                            height: typeof props.height === 'number' ? `${props.height}px` : (props.height ?? 'auto'),
+                            position: 'relative',
+                            borderRadius: '12px',
+                            overflow: 'hidden',
+                        }, children: props.children }) }) }), _jsx("canvas", { ref: mirrorRef, style: {
+                    position: 'absolute',
+                    inset: 0,
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'none',
+                } })] }));
+}