# Motion Word

> A two-step tool for people who design and build user interfaces. Name it: describe a web animation or motion effect in your own words ("the bouncy thing when a popover opens", "the iOS scroll that resists and snaps back") and get its exact term from a 91-term glossary, with 1-2 close alternates and a prompt phrase to hand to a designer or an AI. Build it: turn a term into a build spec - should it animate at all, its purpose, the cheapest tool, the properties, a curve and duration from fixed tables (or a spring config), interruption and exit, the reduced-motion variant and copy-ready CSS - checked against the tables and previewed live with 2x and 5x slow motion.

URL: https://motion-word.skillsafe.ai/
API tutorial: https://motion-word.skillsafe.ai/api.html

## What it does

- Free, in the browser: all 91 glossary terms in twelve families (entrances and exits, sequencing and timing, movement and transforms, transitions between states, scroll, feedback and interaction, easing, springs, looping and ambient motion, polish and effects, performance, principles), each quoted as written and playing as a live specimen; a keyword word-match that shows its first guesses as you type; a recipe card that applies the build rules (the frequency gate, the duration range per element, the curve token, the allowed properties) and previews the table defaults on a mock of the element; Markdown, CSS and JSON downloads.
- Metered, task "name" (one run on gpt-terra): the best term for a loose description, 0-2 close alternates with how each differs, an honest approximation flag when no term fits exactly, and a one-sentence prompt phrase. Definitions are always shown from the glossary, never from the model.
- Metered, task "build" (one run on gpt-terra): the gate decision (animate, subtle, or none for keyboard shortcuts and 100+ times a day), the purpose, the tool (CSS transition, @starting-style, CSS animation, WAAPI or Motion), from/to values, the curve token and duration or spring, interruption and exit, reduced motion, the code and a feel-check. The page re-checks every reply: no scale(0), no transition: all, no ease-in, durations inside the element's range, bounce within 0.1-0.3, reduced motion present.

## Contract

POST https://api.skillsafe.ai/v1/app-api/run with string fields. Task "name": task, description, context, hints (the page's word-match). Task "build": task, term, definition, description, element, frequency (100+, tens, occasional, rare), trigger (pointer, hover, keyboard, scroll, mount, gesture), facts (the page's reading of the build rules). The reply is one JSON object: {task: "name", best: {term, why}, alternates: [{term, differs}], approximate, approx_note, compound, prompt_phrase} or {task: "build", term, decision, tier, purpose, reason, tool, properties, from, to, transform_origin, easing, duration_ms, spring, stagger_ms, interrupt, exit, reduced_motion, code, feel_check, alternative}.

## Sources

The glossary and the build rules come from Emil Kowalski's agent skills @emilkowalski/animation-vocabulary (https://skillsafe.ai/skill/@emilkowalski/animation-vocabulary) and @emilkowalski/animate (https://skillsafe.ai/skill/@emilkowalski/animate), github.com/emilkowalski/skills, MIT licence.