Skip to content
heyrav design system
PatternsShipped

Scroll reveal

Content rises 36px out of a 6px blur as it enters, once. Visuals add a 3.5% scale. Siblings stagger by 100ms.

Used onEvery page

The heading arrives

then the line under it, 100ms later

and the visual

with a little scale.

Show code
<p class="h3 rv">The heading arrives</p>
<p class="prose rv rv-d1">then the line under it, 100ms later</p>
<div class="card rv rv-vis rv-d2 d-w-sm"><b>and the visual</b><p>with a little scale.</p></div>
<button class="btn btn-ghost btn-sm" data-replay>Replay</button>

Driven by one IntersectionObserver at 15% visibility; .in is added once and the element is unobserved. --d-reveal (950ms) on --ease-out. Under reduced motion, everything is simply visible.