When to use
- Lay it thinly (3–5% opacity) over every card for a magazine/cinema mood
- Gives a sense of unity to brand·news·emotional tones
- 톤: brand, news, emotional
- Avoid: tech·minimalist — interferes with a clean screen
Installation
npx hyperframes add grain-overlay
→ compositions/components/grain-overlay.html generated.
Wiring (component method)
Unlike Shader transition, insert the HTML/CSS snippet directly. compositions/components/grain-overlay.html Copy the snippet inside the file and paste it into each card or directly under #root .
<!-- 모든 카드 위에 전 시간 동안 깔리는 오버레이 -->
<div class="grain-overlay"
data-start="0" data-duration="20"
data-track-index="2"
style="position: absolute; inset: 0; z-index: 100; pointer-events: none; opacity: 0.04;">
<!-- grain-overlay.html의 CSS keyframes + <div> 구조 복사 -->
</div>
Parameters
- opacity adjustment: brand 0.03, news 0.05, emotional 0.04 recommended
- animation speed / grain size are inside the CSS keyframes
짝
- Good match:
light-leak,shimmer-sweep, all shader transitions - Only 1 per deck — no duplicates