Reveal
stable 0.6 kB<hkReveal>A scroll-triggered entrance with a stagger. Observes once and then unhooks, so a long page does not carry a hundred live observers.
#directive#scroll
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| revealDelay | number | 0 | Milliseconds before the animation starts. Multiply by index to stagger. |
| revealThreshold | number | 0.15 | How much must be visible before it fires, 0–1. |
| revealOnce | boolean | true | Disconnects after the first reveal. |
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-reveal-distance | 28px | How far it travels. |
| --hk-reveal-duration | 0.8s | Animation length. |
Accessibility
- Under prefers-reduced-motion the element is visible immediately — content is never gated behind an animation.
- Only opacity, transform and filter are animated, so nothing reflows during the entrance.
- The observer disconnects after firing, which matters on a page with many revealed blocks.