a459b643e8
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>
55 lines
1.3 KiB
JSON
55 lines
1.3 KiB
JSON
{
|
|
"name": "@dangerousthings/web",
|
|
"version": "0.5.0",
|
|
"description": "Web CSS theme for the Dangerous Things design system — bevels, glows, form styles",
|
|
"license": "MIT",
|
|
"author": {
|
|
"name": "Dangerous Things",
|
|
"email": "info@dangerousthings.com"
|
|
},
|
|
"repository": {
|
|
"type": "git",
|
|
"url": "https://github.com/dangerous-tac0s/dt-design-system.git",
|
|
"directory": "packages/web"
|
|
},
|
|
"homepage": "https://github.com/dangerous-tac0s/dt-design-system#readme",
|
|
"keywords": [
|
|
"dangerousthings",
|
|
"design-system",
|
|
"css",
|
|
"theming",
|
|
"bevels",
|
|
"cyberpunk"
|
|
],
|
|
"engines": {
|
|
"node": ">=18.0.0"
|
|
},
|
|
"type": "module",
|
|
"main": "dist/index.css",
|
|
"exports": {
|
|
".": "./dist/index.css",
|
|
"./dist/index.css": "./dist/index.css",
|
|
"./tokens/*": "./dist/tokens/*",
|
|
"./components/*": "./dist/components/*",
|
|
"./fonts/*": "./dist/fonts/*",
|
|
"./theme-registry": {
|
|
"types": "./dist/theme-registry.d.ts",
|
|
"import": "./dist/theme-registry.js",
|
|
"default": "./dist/theme-registry.js"
|
|
}
|
|
},
|
|
"publishConfig": {
|
|
"access": "public"
|
|
},
|
|
"files": [
|
|
"dist"
|
|
],
|
|
"scripts": {
|
|
"build": "node scripts/build.cjs",
|
|
"clean": "rm -rf dist"
|
|
},
|
|
"dependencies": {
|
|
"@dangerousthings/tokens": "*"
|
|
}
|
|
}
|