Skip to content
Aristeia
Immersive & 3DPenelopepattern

Scroll to Stage

Arm a GPU stage only when it enters the viewport, and drive a single uniform from scroll velocity — never from a second RAF.

Built here · no external address

Penelope: Long-running fidelity. Maintained excellence over years.

Exhibit case

The scene, running in the page.

Arming the exhibit…

Why it matters

Mounting WebGL on page load taxes every visitor who never scrolls to the exhibit. In-view arming plus a shared scroll bus keeps the rest of the canon cheap.

Key techniques

  • IntersectionObserver with a generous rootMargin to arm before arrival.
  • --scroll-velocity from the site spine as the only motion input.
  • Context disposal on unmount.

What to steal

The transferable part.

One scroll writer, many readers. CSS variables beat a pub/sub of listeners.

What not to copy

Context-specific or costly.

Do not attach Lenis inside the stage. The page already owns smooth scroll.

Inclusion rationale

Bridges Hephaestus to Hermes — scroll as the shared instrument of the building.

Technical register

Performance

Zero GL cost until intersection. One uniform write per frame while armed.

Mobile

Skip arming under reduced motion; show the static ingot plate.

Accessibility

The stage has an accessible name; the canvas is decorative relative to the prose.

Study next

Related entries

HephaestusThe Struck IngotAn object with no vertices — a signed distance field marched per pixel, with the step budget exposed so the exact moment quality is bought back is visible.NyxLayered Depth FieldFour translucent planes at different parallax depths producing depth with no canvas, no shader, and no main-thread cost.HephaestusDraw-Call DisciplineTreat draw calls as a published budget — one population, one call — so a forge stays honest when the count climbs.HephaestusThe Instanced ForgeFour thousand ingots drawn in a single call, with the draw-call figure published next to the frame time so the cost of the scene is stated rather than implied.