Motion rules and tokens
Current rule (v2.0.1, 2026-11-13): Use the token defaults and named non-blocking brand exceptions below. Ledger 399 (2026-11-13) additionally requires symmetric enter/exit choreography, token timing, interruption handling, focus/announcements and reduced-motion end states. Catalogue observations are not blanket exceptions to the colour-only product-hover rule. (1A-N37) — supersedes the line above; see docs/current-rules.md#cr-motion-01.
- The Space Works mark opens on hover and keyboard focus, everywhere it appears. One-shot box opening: from the resting logo it folds shut (600 ms) and opens back (1600 ms), 2200 ms in all, no hold, so nothing snaps at either end. Once started it always finishes (leaving mid-way does not cut it; re-entering does not restart it). It never loops except as the loading indicator. Tenant (makerspace) logos never animate. No hover animation on touch devices (pointer-enter of a touch pointer never starts it; keyboard focus-visible does). Reduced motion shows the static mark. It never takes focus and never changes the mark’s size.
- Every logo placement uses the one shared component (
components/brand/AnimatedLogoMark.tsx); a guard test fails the build if the mark is drawn any other way. Never fork the geometry or keyframes: the opening is generated from the logo masters (components/boxOpen/). - Product motion is colour only on hover: hover and active change colour (120 ms); nothing translates, scales or lifts. The mark’s box-open is the single, deliberate exception (also named in brand-spec section E), because it is the brand, not product chrome.
- Transform and opacity only. No animating layout properties (height collapses use grid rows 1fr to 0fr).
- Enter decelerates, exit accelerates, and exits are shorter than entrances (
--sw-ease-enter/--sw-ease-exit; 120 to 240 ms). Nothing on an interaction path runs longer than 240 ms. Longer motion (landing story, theme switch, box opening) is page-level or brand-level and never blocks input. - Motion shows what changed, it does not decorate: arrival of a layer, a move to a new place, loading, a confirmed result. If removing the animation loses no information, keep it short or drop it.
- Reduced motion is a floor, not a flag: every animation has a still equivalent that carries the same information. Kiosk and TV screens zero the distances and keep only fades.
- Never loop outside a loader. The only exceptions are decorative and switched off by reduced motion (the 404 pet’s sleeping “z” and the delight companion walk).
- Both themes, every time: a new animation is reviewed in light and dark (see “Dark theme on every page”).
Tokens
Section titled “Tokens”| Token | Value | Used for |
|---|---|---|
--sw-dur-fast |
120 ms | press, hover, exits, menus |
--sw-dur-base |
180 ms | overlays entering, indicators, collapse |
--sw-dur-slow |
240 ms | route settle, drawers |
--sw-ease-standard |
cubic-bezier(0.2,0,0,1) |
most movement |
--sw-ease-enter |
cubic-bezier(0.16,1,0.3,1) |
arrivals |
--sw-ease-exit |
cubic-bezier(0.4,0,1,1) |
departures |
--sw-enter-y / --sw-pop-scale / --sw-pop-offset / --sw-slide-x |
8 px / 0.98 / 4 px / 100 % | distances (zero on kiosk, TV and reduced motion) |
Part of Motion in Space Works, published from docs/motion.md. Edit it there.