FocusReveal
Blur-to-sharp entrance — whole-block focus-in reveal on mount or scroll
Mount trigger
Fires once on mount — blur(8px) → sharp, slight opacity fade-in. Default 800 ms via --motion-glide.
Focus reveal entrance
This block enters blurred and sharpens into view. A natural, cinematic attention draw.
Custom duration
durationMs controls the transition length. Keep ≤ 800 ms per spec; shorter feels snappier.
// after animista.net (Ana Travas), re-authored on jatui motion tokens // after animista.net (Ana Travas), re-authored on jatui motion tokens // after animista.net (Ana Travas), re-authored on jatui motion tokens
300 ms
600 ms
800 ms
Wraps any content
Works on headings, cards, images — any block-level content. Pointer events on children are preserved.
// after animista.net (Ana Travas), re-authored on jatui motion tokensIntersect trigger
triggerMode="intersect" defers the reveal until 50% of the element enters the viewport — useful
for below-the-fold content. Scroll down to see it fire.
Scroll-triggered reveal
This block stays blurred until it's scrolled into view.