#325
Pinned step story
A pinned media panel on the left changes its figure and caption as each step on the right scrolls through the middle of the frame; the step in view has the primary title colour, the others the secondary one.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Pinned step story" pattern (@codeatlasdev/ui demo #325, motion/scroll) in my app.
Call get_demo({ ids: ["#325"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Explaining a product flow: connect, sort, review. One visual stays on screen while the copy advances.
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={5600}`: autoplay scrolls the container, a wheel or touch scroll takes over
- `.story__media` is `position: sticky;` with `inset-block-start: 0;` and pins the media while the steps list scrolls past
- `IntersectionObserver` with `rootMargin: '-45% 0px -45% 0px'` makes the step crossing the middle 10% band the active one
- Figure transition: `opacity 320ms cubic-bezier(0.2, 0, 0, 1)` and a `translateY(12px) scale(0.96)` start state
- The active step title is `var(--ca-text-primary)`, the others `var(--ca-text-secondary)` (a colour change, never a lower opacity, so every state stays AA)
- Under reduced motion the last step is active and nothing scrolls by itself
Exact motion (do not approximate):
- opacity, transform: translateY, scale (media figure): 320ms, cubic-bezier(0.2, 0, 0, 1)
- color (step title, secondary to primary): 320ms, cubic-bezier(0.2, 0, 0, 1)
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={5600}`: autoplay scrolls the container, a wheel or touch scroll takes over
- `.story__media` is `position: sticky;` with `inset-block-start: 0;` and pins the media while the steps list scrolls past
- `IntersectionObserver` with `rootMargin: '-45% 0px -45% 0px'` makes the step crossing the middle 10% band the active one
- Figure transition: `opacity 320ms cubic-bezier(0.2, 0, 0, 1)` and a `translateY(12px) scale(0.96)` start state
- The active step title is `var(--ca-text-primary)`, the others `var(--ca-text-secondary)` (a colour change, never a lower opacity, so every state stays AA)
- Under reduced motion the last step is active and nothing scrolls by itself
Related
Loading source.