cadence

Live demo — motion applied

Northwind
Switching tabs runs a view transition — the panel cross-fades on move, with an instant-swap fallback.

Members enter · stagger

Rows cascade in — each waits one stagger step behind the last.

  • AL
    Ada Lovelace
    Owner
    admin
  • GH
    Grace Hopper
    Maintainer
    write
  • AT
    Alan Turing
    Contributor
    write
  • KJ
    Katherine J.
    Viewer
    read

Advanced move

Height and chevron ride the same move token, so the panel opening reads as one gesture rather than two.

Scroll on ↓enter · reveal · view()

Native scroll reveal

Each card animates in as it crosses the viewport edge, driven by animation-timeline: view() — timed by your enter token. No JS on supporting browsers.

The bar up top is a scrub

That reading-progress bar tracks the scrollbar via animation-timeline: scroll() — scroll position is the axis, no duration.

Same tokens, everywhere

Reveal distance and easing come from the very same --role-* variables the shell above uses. Edit the system and this re-times live too.

Honest fallback

Where native scroll timelines are missing (Firefox today), an IntersectionObserver triggers the reveal and a scroll listener drives the bar — the same recipes the export emits.

Progressive by default

Nothing here blocks content: reduced-motion pins the end state, and unsupported browsers just show the cards.

✓ Changes saved enter/exit