Scroll Animations

CSS-native scroll-driven animations using the animation-timeline: view() API — zero JavaScript, zero IntersectionObserver, zero dependencies. Supported in Chrome 115+, Firefox 110+, Safari 18+. Graceful static fallback in older browsers.

reveal="parallax"

Element shifts at 0.4× scroll speed as you scroll through — creates natural depth. Scroll this page to see it.

Parallax card

Shifts ±50px relative to scroll — adjust with --aura-parallax-amount

<div reveal="parallax" surface="aurora" density="spacious" radius="xl">
  I shift slower than the page scroll
</div>

<!-- Custom parallax distance -->
<div reveal="parallax" style="--aura-parallax-amount: 80px;">
  More dramatic parallax
</div>

reveal="progress"

Fades + scales in as the element enters the viewport. Purely CSS — the animation is tied to scroll position, not time.

Card A

Fades in on scroll

Card B

Fades in on scroll

Card C

Fades in on scroll

<div reveal="progress" surface="glass" density="spacious" radius="xl">
  Fades in as I enter the viewport
</div>

reveal="sticky-fade"

Element sticks to the viewport then fades out as content scrolls past it — great for hero sections.

↓ Scroll inside this box

Sticky-fade hero

Sticks then fades out

Content below...

<div reveal="sticky-fade" surface="mesh" density="spacious" radius="xl"
     style="--aura-sticky-top: 100px;">
  I stick, then fade as you scroll past
</div>

reveal="slide-left" / "slide-right"

← Slides in from left

Slides in from right →

<div reveal="slide-right" surface="glass" density="default" radius="lg">
  Slides in from the left
</div>
<div reveal="slide-left" surface="glass" density="default" radius="lg">
  Slides in from the right
</div>

Tokens

--aura-parallax-amount: 50px;   /* parallax shift distance          */
--aura-sticky-top:      80px;   /* sticky-fade top offset           */