#322
Parallax
Three layers (sky, ridge, foreground) plus a caption move at different speeds while the container scrolls, so the scene gains depth. Native scroll timeline, with a scroll listener fallback.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Parallax" pattern (@codeatlasdev/ui demo #322, motion/scroll) in my app.
Call get_demo({ ids: ["#322"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Hero images, editorial headers, product storytelling: any pinned scene where background should move slower than foreground.
Keep these library parts, with the props and tokens the demo uses:
- MotionStage, MotionCtx from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` from `@codeatlasdev/ui` with `loop={6200}`: autoplay scrolls the container, a wheel or touch scroll takes over
- A sticky scene inside a taller scroller: `position: sticky;` on `.scene__sticky` and `block-size: 26rem;` on `.scene__track`
- Native: `animation-timeline: --scene` over `scroll-timeline: --scene block`, inside `@supports (animation-timeline: scroll())`
- Layer travel at full scroll: sky `-6%`, ridge `-22%`, foreground `-48%`, caption `30%` while fading to opacity `0.15`
- Fallback without support: a `scroll` listener writes progress to `--p` and the transforms read `translateY(calc(var(--p) * -22%))`
- Under reduced motion `--p` is `1` and nothing moves (`.scene--final`)
Exact motion (do not approximate):
- transform: translateY, sky layer to -6%: animation-timeline: --scene, linear
- transform: translateY, ridge layer to -22%: animation-timeline: --scene, linear
- transform: translateY, foreground layer to -48%: animation-timeline: --scene, linear
- transform: translateY to 30% and opacity to 0.15, caption: animation-timeline: --scene, linear
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- MotionStage
@codeatlasdev/ui
How it is built
- `MotionStage` from `@codeatlasdev/ui` with `loop={6200}`: autoplay scrolls the container, a wheel or touch scroll takes over
- A sticky scene inside a taller scroller: `position: sticky;` on `.scene__sticky` and `block-size: 26rem;` on `.scene__track`
- Native: `animation-timeline: --scene` over `scroll-timeline: --scene block`, inside `@supports (animation-timeline: scroll())`
- Layer travel at full scroll: sky `-6%`, ridge `-22%`, foreground `-48%`, caption `30%` while fading to opacity `0.15`
- Fallback without support: a `scroll` listener writes progress to `--p` and the transforms read `translateY(calc(var(--p) * -22%))`
- Under reduced motion `--p` is `1` and nothing moves (`.scene--final`)
Related
Loading source.