Three layers fire from a single sequence: the title fades up, the subtitle fades after a delay, the dot scales with a longer easing. Each layer becomes a @keyframes rule plus an animation shorthand on its selector. Hit Replay to re-trigger.

/* renders on mount */

/* renders on mount */

Same sequence shape, but the layers' driver is "scroll". The emitter replaces the @keyframes path with a calc() chain reading --lsd-progress — written by lsd-scroll-trigger's scrub mechanism. Scroll the page; the title translates up and changes hue.

/* renders on mount */

/* renders on mount */

The lsd-aurora.js runtime registers a controller per matched element, each writing its own --lsd-progress as the card scrolls through the viewport. Two authoring modes for variance:

Mode A — Authored personalities (what's shown here): six small sequences, each scoped to one :nth-child(n). Different easings + amplitudes per card — snap / glide / overshoot / gentle / linear / soft. Use when ≤ ~12 items need hand-crafted variety.

Mode B — Repeater + parametric variance (scales to N): one Sequence, scope .card, with per-instance overrides via :nth-child ranges (predictable) or random-seed CSS vars (organic). Use for archive grids, CMS content, anywhere N is unbounded. The curve shape stays shared; the amplitudes vary per instance through CSS, not new sequences.

/* renders on mount */

/* renders on mount */

Sequence with scope.driver: "event" stays paused until called. Click Play — runtime advances the playhead over its duration; the bar fills via --lsd-progress; named events fire at 50% and 100% and log below. Behaviours panel will subscribe to these events to chain actions when Aurora ↔ Behaviours wiring lands.

/* renders on mount */

/* renders on mount */

Four sequences, each on its own row. Same start/end values, same scroll-driver, different easing on the starting keyframe. The emitter expands each easing into a polynomial in calc() — no pow() needed, Safari 15.4+ safe.

Scroll pacing: data-lsd-scrub-pre="0.18" + data-lsd-scrub-post="0.18" hold the start/end stationary for the first/last 18% of the scroll range so the animation reads even on a slam-scroll. data-lsd-scrub-min="1600" caps the velocity — --lsd-progress takes at least 1.6s to traverse 0→1 no matter how fast you scroll. prefers-reduced-motion disables the lock.

/* renders on mount */

Six small Nebulae, each scoped to its own .aurora-scene-frame. Every frame carries .lsd-scroll.lsd-scrub so the runtime writes --lsd-progress on it; the scene's sequence reads that progress to choreograph its own elements. Same architecture as §03 — different scopes, different layouts, one sequence per scene. Each Nebula takes about 1.5 screens to play through.

6.1 · hero-takeover

Title letter-staggers in, the sub-line settles, then the CTA pulses three times as the playhead crosses 0.7. An ambient mesh drifts behind the headline the whole time.

6.2 · card-deck-shuffle

Four stacked Constellations fan out as you scroll — each rotates and translates on its own curve. The top card draws an accent ring at the end.

6.3 · nav-collapse

Full nav with brand-dot pulse, links, and CTA collapses to a sticky minimal bar. A gradient hairline grows at the bottom edge and the body content lines drift behind at different speeds — the nav adapts to scroll state.

6.4 · feature-cascade

Five pillars cascade-fade in sequence. A gradient rail on the left draws top-to-bottom as the dots pop on each reveal.

6.5 · logo-cloud-orbit

Six satellites orbit a Pulsar core on a dashed ring; an inner ring counter-rotates. The core grows and glows with progress; each satellite picks up an accent halo at apoapsis.

6.6 · product-spec-reveal

The Galaxy device stays pinned — notch, side buttons, pulsing screen-glow — while spec callouts slide in from alternating sides, each with a dashed leader line connecting back to the body.