perf(site): smooth landing hero scroll animation

Merged
QE
14d ago
+19-9

Summary

  • Keep the hero video frame size stable while the bezel shrinks during scrolling.
  • Coalesce scroll and resize updates to one animation frame and reuse the layout measurement.

Testing

  • git diff main...HEAD --check
  • Not run: build or browser verification.

[!NOTE]

Smooth landing hero scroll animation with bezel repaint and frame-synced growth

  • Moves the hero media bezel's painted background, gradient, and highlights to a positioned pseudo-element that extends outside the recording frame, sized by the existing bezel CSS variables in direction.css
  • Reworks mountHeroGrow in hero-grow.js to coalesce scroll/resize updates into one animation frame, share a single geometry measurement per growth pass, and subtract 16px from the resting width for the external bezel
  • Adds a reduced-motion override that restores 8px padding to the media bezel
  • Risk: mountHeroGrow resting-width calculation now depends on the 16px bezel offset in hero-grow.js; changes to bezel CSS variables in direction.css affect both the pseudo-element size and the growth scale

Macroscope summarized 04203f3.