Motion in Space Works
The catalogue of every animation and transition in the shipped app (SpaceWorks 0.12.0): where it is used, why it
exists, which tokens it reads, what triggers it, and what it does under reduced motion and in dark. App paths are
relative to frontend/src/ in the SpaceWorks repository. Tokens are in tokens/tokens.css (--sw-dur-*,
--sw-ease-*, --sw-enter-y, --sw-pop-*, --sw-slide-x; mirrored in the app at styles/motionTokens.css and
lib/motion/motion.ts). Brand-spec section E has the token values. Every family below has a reusable, framework-free copy in motion/ (CSS, React copies, a live demo and a README per family). How the theme switch itself works is in
theming.md.
Defaults for every row unless it says otherwise: reduced motion = styles/motion.css forces animation and
transition durations to 0.01 ms, the JS side (lib/motion) skips View Transitions and exit delays, and the token
durations and distances become 0; dark = motion is colour-neutral, so nothing changes between themes except where
a row says so.
On this topic
Section titled “On this topic”- Which animation to use, where The decision table: the moment, the animation and the template.
- Motion rules and tokens The rules every animation follows and the tokens it reads.
- Motion catalogue Every animation in the app by group, and dark theme on every page.
Related v2.1 references
Section titled “Related v2.1 references”Motion flow · Duration/easing/distance roles, exceptions, reduced motion and kiosk/TV