#321
View timeline reveal
Tiles tied to their own position in the scroll area: opacity, rise and scale advance exactly as far as the tile has entered, in both directions, with no JavaScript when the browser supports view timelines.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "View timeline reveal" pattern (@codeatlasdev/ui demo #321, motion/scroll) in my app.
Call get_demo({ ids: ["#321"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Scroll-driven entrances that must scrub with the finger (and reverse) instead of firing once: metric grids, feature lists, timelines.
Keep these library parts, with the props and tokens the demo uses:
- Card, MotionStage, MotionCtx from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` from `@codeatlasdev/ui` with `loop={4600}`: autoplay scrolls the container, a wheel or touch scroll takes over
- CSS `animation-timeline: view(block)` with `animation-range: entry 0% entry 70%` inside `@supports (animation-timeline: view())`
- Keyframes `view-in`: `from { opacity: 0; transform: translateY(28px) scale(0.92); }` to opacity 1, no translate, scale 1
- Fallback without support: a `scroll` listener writes each tile's progress to `--v`, which drives the same opacity and transform
- Under reduced motion `.vt--final` shows every tile settled and no listener is attached
Exact motion (do not approximate):
- opacity, transform: translateY, scale: animation-timeline: view(block), linear, delay animation-range: entry 0% entry 70%
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
- Card
@codeatlasdev/ui - MotionStage
@codeatlasdev/ui
How it is built
- `MotionStage` from `@codeatlasdev/ui` with `loop={4600}`: autoplay scrolls the container, a wheel or touch scroll takes over
- CSS `animation-timeline: view(block)` with `animation-range: entry 0% entry 70%` inside `@supports (animation-timeline: view())`
- Keyframes `view-in`: `from { opacity: 0; transform: translateY(28px) scale(0.92); }` to opacity 1, no translate, scale 1
- Fallback without support: a `scroll` listener writes each tile's progress to `--v`, which drives the same opacity and transform
- Under reduced motion `.vt--final` shows every tile settled and no listener is attached
Related
Loading source.