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
2.3 KiB
Markdown
55 lines
2.3 KiB
Markdown
# @dangerousthings/web
|
|
|
|
## 0.5.0
|
|
|
|
### Minor Changes
|
|
|
|
- `dt-scale-in` keyframes now hold `transform: none, opacity: 0` during `animation-delay` (the period when `animation-fill-mode: both` shows the first keyframe), then snap to `scale(0)` at animation start before scaling/fading to 1. Visual difference vs prior is a subtle fade-in alongside the scale-in. **Why:** prior keyframes held descendants at `transform: scale(0)` during the delay, which caused any child performing `getBoundingClientRect()`-based self-measurement on mount (R3F `<Canvas>`, ResizeObserver-driven charts, virtualized lists, etc.) to read a near-zero rect and never recover — `transform` changes don't fire `ResizeObserver` when they end. Fixes the SuggestedPlacements 3D viewer "blank teal block until scroll" bug on the Hydrogen storefront product pages.
|
|
|
|
## 0.4.1
|
|
|
|
### Patch Changes
|
|
|
|
- Video letterboxing for DTMediaFrame, card badge styling with bevel-aware positioning, restored DTStaggerContainer.
|
|
|
|
## 0.4.0
|
|
|
|
### Minor Changes
|
|
|
|
- Video letterboxing for DTMediaFrame, card badge styling with bevel-aware positioning, restored DTStaggerContainer in react-native, updated DTGallery/DTModal/DTMobileFilterOverlay components.
|
|
|
|
## 0.3.0
|
|
|
|
### Minor Changes
|
|
|
|
- e74c285: Add storefront component features: animations library (entrance, interactive, stagger container), scrollbar styling, card color modes with selected/hover states, card progress bar, badge positioning, interactive bevel buttons, menu items, filter headers/overlays, feature legend grid. Fix link hover glow to respect per-element --dt-glow-color.
|
|
|
|
### Patch Changes
|
|
|
|
- Updated dependencies [e74c285]
|
|
- Updated dependencies [e74c285]
|
|
- @dangerousthings/tokens@0.3.0
|
|
|
|
## 0.2.1
|
|
|
|
### Patch Changes
|
|
|
|
- 0453af8: Add per-package README and LICENSE for npm
|
|
- Updated dependencies [0453af8]
|
|
- @dangerousthings/tokens@0.2.1
|
|
|
|
## 0.2.0
|
|
|
|
### Minor Changes
|
|
|
|
- 1c8d585: Initial release of the DT design system monorepo.
|
|
|
|
- `@dangerousthings/tokens`: Canonical design tokens for DT, Classic, and Supra brands with CSS generation
|
|
- `@dangerousthings/web`: Web CSS theme with bevels, glows, form styles, and Tektur font
|
|
- `@dangerousthings/react-native`: 18 React Native themed components (DTButton, DTCard, DTTextInput, etc.)
|
|
|
|
### Patch Changes
|
|
|
|
- Updated dependencies [1c8d585]
|
|
- @dangerousthings/tokens@0.2.0
|