Ember Ridge Parallax

Features

• Self-contained scroll region — parallax runs inside the component's own overflow-y: auto viewport, so it works even when the host page or preview iframe cannot scroll
• Ten depth layers (stars, sun, clouds, five ridgelines, mist) rendered from a data-driven config, each with its own rise, drift, and zoom rate
• Ridgelines are generated at runtime by a seeded fractal builder (buildRidge) — uneven peak/saddle skeletons, midpoint-displacement subdivision, and gradient-faded shadow facets on the away-from-sun flanks
• Single passive scroll listener mapped through requestAnimationFrame with cached measurements — transforms only, no layout thrash
• The sun sinks behind the far ridge as you scroll; in dark mode it becomes a setting moon and a seeded starfield fades in
• Floating stat cards and a quote panel drift at their own depth rates relative to the viewport center
• Ember progress rail fills along the left edge as the traverse advances
• Springy CTA press, smooth in-viewport anchor scrolling, and a reserve action with a done state
• Re-measures on resize, container resize, and font load; fully respects prefers-reduced-motion via both CSS and a matchMedia guard that collapses the scene to a static composition

Accessibility

Scroll region

role="region" with aria-label and tabindex="0" so keyboard users can scroll the story

Decorative scene

The layer stack and progress rail are aria-hidden="true"

Buttons

Every CTA carries an aria-label that tracks its visible text

Focus indicators

:focus-visible with --ring outline on all interactive elements

Reduced motion

CSS collapse plus a JS matchMedia guard that disables parallax transforms

Contrast

Copy sits on translucent glass panels so text stays readable over any scene position

Customise it with AI

Open Ember Ridge Parallax in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the parallax is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.