Motion presets
Usage
A named, reusable catalog of entrance/exit/stagger/scroll-reveal presets — this repo's answer to "the menu should fade in/out" instead of hand-deriving a transition every time. Backed by globals.css's sw-fade-in/sw-slide-in-*/sw-scale-in/sw-stagger-item/sw-reveal classes and the EASE_*/DURATION_* tokens in @tokens/motion.ts, so every preset resolves to the same small vocabulary of curves and durations rather than an ad-hoc cubic-bezier per component. These five wrapper components cover entrance/exit/sequence/scroll-reveal; the rest of the catalog lives in sibling docs under the same "Motion" group — interaction.doc.tsx (hover/cursor-reactive), scroll.doc.tsx (parallax/count-up/pin-fade), loading.doc.tsx — plus "Effects" group docs for the decorative-VFX tier (ambient.doc.tsx, distort.doc.tsx, effects.doc.tsx).import { FadeIn, SlideIn, Stagger, StaggerChar, Reveal } from '@summonware/ui';Best practices
DoReach for one of these by name instead of writing a new opacity/transform transition from scratch — that consistency is the entire point of the catalog.
DoUse Reveal for below-the-fold content on a page that actually scrolls (a landing section, a long settings page) — not for above-the-fold content that is visible on load, where it would just delay a hover.
Don'tStack more than one preset on the same element (e.g. FadeIn wrapping a SlideIn) — pick the one preset that matches the moment, per the build constitution's "one signature technique" rule.
Anatomy
FadeInPlain fade, or fade + a small directional travel (up/down).
SlideInLarger horizontal travel — for panels/drawers-adjacent content, not small UI chrome.
StaggerWraps a list/grid of children, assigning each a delay index — no per-item math. preset picks fade-up (default), scale, or cascade.
StaggerCharSplits plain text into characters and reveals them in sequence — a headline/kinetic-type moment, not for rich content.
RevealIntersectionObserver-triggered fade+slide, for content below the fold.
Examples
Common configurations, variations and states.FadeIn, plain vs. directional
fade
fade-in-up
fade-in-down
The base preset — a plain fade, or with a small upward/downward travel for slightly more presence.
SlideIn, left vs. right
Larger horizontal travel than FadeIn — reach for this on content entering from an edge.
Stagger, a small grid
1
2
3
4
5
6
Each child reveals in sequence — the Templates screens grid is the real usage this exists for.
Stagger presets, scale vs. cascade
1
2
3
Dashboard
Orders
Settings
The same wrapper, two other preset values — scale pops each item in; cascade slides in fast, for a menu list.
StaggerChar, kinetic headline
Each character reveals in sequence — a signature moment for a hero headline, not body text.
Reveal, scroll-triggered
Revealed on scroll into view
Scroll this example into view to see it reveal — reuse in a page-level section, not above-the-fold content.