feat(hdr): shader transitions between HDR scenes + SDR rendering fixes

[vanceingalls]

Summary

Adds 15 GPU-style shader transitions (crossfade, swirl-vortex, glitch, domain-warp, light-leak, etc.) that blend between HDR scenes at full 16-bit precision. Also fixes SDR video rendering in HDR compositions and a critical streaming encoder bug that caused frame-to-frame flickering.

What it does

Shader transitions (Phase 5)

15 GLSL shaders ported to TypeScript, operating directly on rgb48le pixel buffers:

• Simple: crossfade, flash-through-white
• Warps: whip-pan, cinematic-zoom, cross-warp-morph, swirl-vortex
• Distortion: glitch, ripple-waves, thermal-distortion, gravitational-lens, domain-warp
• Effects: chromatic-split, sdf-iris, ridged-burn, light-leak

Each shader is a function: `(fromBuf, toBuf, outBuf, width, height, progress) → void` that reads from two scene buffers and writes blended pixels to the output.

Dual-scene compositing: For each transition frame, both the outgoing and incoming scenes are independently flattened into rgb48le buffers (HDR video blit + DOM screenshot composite), then blended by the shader function.

Scene detection: Compositions declare transitions via `window.__hf.transitions` (an array of `{ time, duration, shader, fromScene, toScene }`). The orchestrator queries this at render start and pre-computes frame ranges for each transition.

Critical bug fix: streaming encoder buffer race

`writeFrame()` passed the caller's buffer directly to `ffmpeg.stdin.write()`. Node.js streams hold a reference to the buffer and drain asynchronously. The transition loop reuses pre-allocated buffers and zero-fills them per frame — if the pipe hadn't fully drained, ffmpeg read partially-overwritten data, causing a horizontal banding artifact that flickered frame-to-frame. Fix: `Buffer.from(buffer)` copies the data before writing to the pipe.

SDR rendering fixes

Three stacked bugs made SDR video invisible in HDR compositions:

1. `convertSdrToHdr` produced bt2020 pixels that Chrome misinterpreted as sRGB → near-zero values
2. `syncVideoFrameVisibility` didn't restore active video `` elements after hiding inactive ones
3. Injected `` overlays used `position: relative` and got clipped by `overflow: hidden` wrappers

Other fixes

• `fileServer.ts` bridge script now uses `Object.assign` to preserve existing `window.__hf` properties (was overwriting the transitions array)
• HDR frame directories cleaned up after each video ends (prevents disk exhaustion on long renders)
• Lint rule updated to skip `data-start` validation on composition root elements

Files changed

File	What changed
`packages/engine/src/utils/shaderTransitions.ts`	NEW — 15 shader functions, `sampleRgb48le` (bilinear), noise functions (hash, vnoise, fbm), PQ/HLG LUT conversion. ~1000 lines.
`packages/engine/src/utils/shaderTransitions.test.ts`	NEW — 89 tests: boundary conditions, all 15 shaders smoke-tested, HDR linearization roundtrips
`packages/engine/src/services/streamingEncoder.ts`	`Buffer.from()` copy before pipe write (race condition fix)
`packages/engine/src/services/screenshotService.ts`	`syncVideoFrameVisibility` restores active `` elements
`packages/engine/src/services/videoFrameExtractor.ts`	`skipSdrConversion` parameter
`packages/engine/src/services/videoFrameInjector.ts`	Border-radius, layout dimensions on `ElementStackingInfo`
`packages/producer/src/services/renderOrchestrator.ts`	Scene detection, dual-scene transition compositing, `blitHdrVideoLayer` helper, frame dir cleanup
`packages/producer/src/services/fileServer.ts`	`Object.assign` fix for `window.__hf` preservation
`packages/shader-transitions/src/hyper-shader.ts`	Writes `window.__hf.transitions` after config parse
`compositions/hdr-transition-test/index.html`	NEW — 2-scene integration test composition

How to test

1. Render `compositions/hdr-transition-test` — 2 scenes with a swirl-vortex transition. Should be smooth, no flickering.
2. Render `compositions/hdr-all-transitions` — 7 transitions demoing crossfade, swirl-vortex, glitch, domain-warp, sdf-iris, ridged-burn, light-leak. Works at both 1080p and 4K.
3. Any composition mixing SDR + HDR video should render both correctly.

Stack position

6 of 6 — Top of the HDR stack. Stacked on #290 (GSAP transforms). This completes the HDR compositing pipeline.

Full stack: #258 → #265 → #288 → #289 → #290 → #268

🤖 Generated with Claude Code

[vanceingalls]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat(hdr): shader transitions between HDR scenes + SDR rendering fixes #268 👈 (View in Graphite)
• feat(hdr): GSAP transforms and border-radius masks on HDR video #290
• feat(hdr): z-ordered multi-layer compositing with PQ support #289
• feat(engine): add HDR two-pass compositing — DOM layer + native HLG video #288
• feat(engine): add HDR video output pipeline #265
• fix(engine): normalize mixed HDR/SDR video inputs #258
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.