feat(hdr): GSAP transforms and border-radius masks on HDR video

[vanceingalls]

Summary

HDR video elements with GSAP animations (position, scale, rotation, opacity) and CSS border-radius rendered without any transforms applied — the video just sat at (0,0) full-size. This PR adds affine transform support and rounded-corner masking for natively-composited HDR video.

What it does

Affine blit with bilinear interpolation:

• blitRgb48leAffine() — Takes a 4x4 DOMMatrix and maps each destination pixel back to source coordinates via the inverse transform. Bilinear interpolation between the 4 nearest source pixels produces smooth edges under rotation and non-integer scaling. Optional opacity and border-radius parameters.
• parseTransformMatrix() — Parses CSS matrix(a,b,c,d,e,f) strings into [a,b,c,d,e,f] tuples.

Accumulated viewport matrix:

• getViewportMatrix() — Walks the offsetParent chain from element to viewport, accumulating position offsets and CSS transforms at each level. Correctly handles transform-origin using the CSS sandwich: translate(origin) × M × translate(-origin). This is critical because GSAP animates transforms on wrapper divs, not directly on the video element.

Effective opacity:

• getEffectiveOpacity() — Multiplies opacity values walking up the ancestor chain. Uses Number.isNaN() (not || 1) so opacity:0 isn't incorrectly treated as 1.

Border-radius masks:

• roundedRectAlpha() — Per-pixel anti-aliased rounded-rectangle mask with support for independent corner radii.
• getEffectiveBorderRadius() — Walks ancestors for overflow:hidden + border-radius. Resolves percentage values (e.g., 50% for circles) via offsetWidth/offsetHeight.

Layout dimensions for extraction:

• Uses offsetWidth/offsetHeight (unaffected by CSS transforms) instead of getBoundingClientRect() (which returns the transformed bounding box and wobbles under rotation).

Files changed

File	What changed
packages/engine/src/utils/alphaBlit.ts	blitRgb48leAffine(), parseTransformMatrix(), roundedRectAlpha(), cornerAlpha()
packages/engine/src/services/videoFrameInjector.ts	getViewportMatrix(), getEffectiveOpacity(), getEffectiveBorderRadius(), layoutWidth/layoutHeight on ElementStackingInfo
packages/producer/src/services/renderOrchestrator.ts	Affine blit path, extraction at layout dimensions, border-radius parameter passing

How to test

Render a composition with an HDR video that has GSAP scale + rotation animation and a border-radius: 50% wrapper (circle mask). The video should rotate smoothly with round edges — no wobble, no sharp corners.

Stack position

5 of 6 — Stacked on #289 (z-ordered layers). Adds transform and masking support to the HDR blit that the layer compositor uses.

🤖 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
• feat(hdr): GSAP transforms and border-radius masks on HDR video #290 👈 (View in Graphite)
• 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.