Element: #321 View timeline reveal (motion/scroll) What it shows: 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. When to use: Scroll-driven entrances that must scrub with the finger (and reverse) instead of firing once: metric grids, feature lists, timelines. Spec: - `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 Motion: - opacity, transform: translateY, scale: animation-timeline: view(block) linear delay animation-range: entry 0% entry 70% Names: View timeline reveal | Scroll-driven reveal | Reveal por view timeline | Révélation pilotée par le défilement Tags: motion, scroll, view-timeline, scroll-driven, scrub, reveal Needs: @codeatlasdev/ui@4.6.0 Components: Card, MotionStage Live demo: https://ui.codeatlas.com.br/docs/motion/scroll#view-timeline-reveal {#snippet children(m)}

{#each tiles as t (t.k)}

{t.k}

{t.v} {t.d}

{/each}

{/snippet}