When to use
- "Digital" reveal for tech/data cards
- 8-bit/retro game feel
- 톤: tech, minimalist
- Avoid: emotional, sentimental tone
Install
npx hyperframes add grid-pixelate-wipe
→ compositions/components/grid-pixelate-wipe.html generated.
Wiring (component method)
components/grid-pixelate-wipe.html Copy the HTML/CSS snippet from and insert it between scenes. It runs its own keyframes, so you just need to match the data-* timing.
<div class="grid-pixelate-wipe"
data-start="4.6" data-duration="0.6"
data-track-index="1"
style="position: absolute; inset: 0;">
<!-- grid-pixelate-wipe.html의 스니펫 -->
</div>
Parameters
- Tile count and stagger delay are adjusted via CSS custom properties (inside the component)
짝
- Good fit:
transitions-grid,chromatic-radial-split - Avoid:
light-leak,grain-overlay— digital vs analog clash