feat(web): dt-scale-in invisible-via-opacity during delay so children can self-measure

Prior keyframes held descendants at transform: scale(0) during the
animation-delay phase (with fill-mode: both). Any DTStaggerContainer
child performing getBoundingClientRect()-based self-measurement on
mount — most notably R3F's <Canvas>, but also chart libs, video
players, and virtualized lists — read a near-zero rect at the
transform-multiplied size and never recovered, because transform
changes don't fire ResizeObserver when they end.

New keyframes:
  0%     opacity 0, transform none    (during delay: invisible but
                                       full layout size, no transform —
                                       children measure correctly)
  0.001% opacity 0, transform scale(0) (snap to scaled-down at start)
  100%   opacity 1, transform scale(1) (animate scale + fade in)

Behavior change for consumers: entrance gains a subtle fade-in
alongside the scale-in. Functionally equivalent for the existing
DTStaggerContainer use cases. Fixes the SuggestedPlacements 3D
viewer "blank teal block until scroll" bug on the Hydrogen
storefront product pages.

Bumps @dangerousthings/web to 0.5.0 (MINOR — visual behavior change).

To revert: git revert <this-commit>

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
michael
2026-05-06 21:38:42 -07:00
parent 1aeceb8f24
commit a459b643e8
3 changed files with 17 additions and 3 deletions

View File

@@ -1,6 +1,6 @@
{
"name": "@dangerousthings/web",
"version": "0.4.1",
"version": "0.5.0",
"description": "Web CSS theme for the Dangerous Things design system — bevels, glows, form styles",
"license": "MIT",
"author": {