← →

Sticky Scroll Reveal

`<pura-sticky-reveal>` is the classic SaaS landing-page feature walkthrough (the Aceternity UI sticky scroll reveal): text steps scroll down one column while a media panel sticks in the other, and as each step crosses the middle of the viewport its matching media crossfades in. Steps and media pair by source order: the first `slot="step"` child maps to the first `slot="media"` child, and so on. The layout (grid plus `position: sticky`) is pure CSS and works with zero JS; a single IntersectionObserver toggles `data-active` on the pairs, so no per-frame JS runs. `side` flips the media panel to the left, `top` sets its sticky offset, and `no-dim` keeps inactive steps at full opacity. SSR and pre-JS render the full layout with the first media visible; reduced motion swaps media without the crossfade. Each instance registers in `window.__puraStickyReveals` by `data-pura-id` with `{ steps, active }`, and fires `pura-sticky-reveal-change` with `{ index }`.

Preview

<!-- classic walkthrough: text scrolls left, media sticks right -->
<pura-sticky-reveal>
  <div slot="step">
    <h3>Realtime sync</h3>
    <p>Every change lands on every screen instantly.</p>
  </div>
  <img slot="media" src="/shots/sync.png" alt="Realtime sync" />

  <div slot="step">
    <h3>Versioned history</h3>
    <p>Roll back to any point in time.</p>
  </div>
  <img slot="media" src="/shots/history.png" alt="Versioned history" />
</pura-sticky-reveal>

<!-- media on the left, no step dimming, taller frame; react to step changes -->
<pura-sticky-reveal side="left" no-dim top="120" id="walkthrough"
  style="--pura-sticky-reveal-height: 420px; --pura-sticky-reveal-radius: 24px;">
  <div slot="step"><h3>Connect your data</h3></div>
  <video slot="media" src="/clips/connect.mp4" autoplay muted loop playsinline></video>
  <div slot="step"><h3>Automate the boring parts</h3></div>
  <video slot="media" src="/clips/automate.mp4" autoplay muted loop playsinline></video>
</pura-sticky-reveal>
<script>
  document.getElementById("walkthrough").addEventListener("pura-sticky-reveal-change", (e) => {
    console.log("active step", e.detail.index);
  });
</script>

Attributes

Attribute	Type	Default	Description
`side`	"right" \| "left"	right	Which side the sticky media panel sits on (wide screens).
`top`	number	96	Sticky top offset of the media frame, in px.
`no-dim`	boolean	false	Keep inactive steps at full opacity instead of dimming them.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/sticky-reveal.js"></script>

JavaScript

import "./pura/lib/sticky-reveal.js";

Slots

stepmedia

Events

pura-sticky-reveal-change