visant-motion
Visant Motion
Build interfaces where motion is invisible-correct: every transition has a purpose, responds instantly, and stays under the perception of "slow". Governing rule: SSoT, never hardcode a cubic-bezier or a duration in a component.
§1 and §2 are the whole skill in practice. Everything after them is reference for a specific moment; the SSoT bootstrap is at §10 because it only matters once per repo (why: references/cases.md).
Source of the principles: Emil Kowalski's skills, https://github.com/emilkowalski/skills (emil-design-eng, apple-design, improve-animations, review-animations), distilled from animations.dev + Apple Designing Fluid Interfaces (WWDC 2018). Consult that repo for the upstream, canonical guidance; this skill is Visant's applied, SSoT-ized version of it.
0. Find the target repo's motion SSoT first
Before writing or auditing any motion, find where the repo keeps it. Look for:
- a JS/TS module exporting easings and durations: grep for
EASE_OUT,cubic-bezier,DUR,transitions(common names:lib/motion.ts,src/lib/motion.ts,utils/animation.ts); - CSS custom properties: grep the global stylesheet for
--ease-and--dur-; - the shared primitives that already carry motion:
Button(press feedback), overlay wrappers (popover/dropdown/dialog), a toast library (sonner), a delayed-loader hook.
Found one → use it, adapt the symbol names below to it, and never create a parallel system. Found none → §10. Every lib/motion.ts / @/lib/motion below means "the repo's motion SSoT", whatever its real path.