Motion And Interaction
Use this skill when an interface needs to feel intentional over time. Motion should clarify state, hierarchy, causality, brand, or story. If it only adds activity, cut it.
Workflow
- Identify the surface: app flow, dashboard, landing page, onboarding, gallery, content page, video, or social asset.
- Define the first read before animation.
- Name the job of motion: orient, reveal, confirm, explain, focus, show causality, show progress, show spatial relationship, or create one brand memory.
- Pass the still-frame gate. Do not animate a weak composition.
- Pick the brand and surface mode.
- Write the beat sequence: setup, trigger, primary move, support, hold, resolution.
- Name the hero object, stable anchor, what remains still, and what the user controls.
- Choose the lightest runtime that preserves the intent.
- Specify timing, easing, interruption, mobile choreography, performance budget, and reduced-motion equivalent.
- Verify actual desktop, mobile, reduced-motion, and runtime capture.
- Score with
evals/motion-purpose-gate.md.
Defaults
- Product UI: short, causal, interruptible motion.
- Dashboards: animate deltas and status changes, not layout chrome.
- Launch pages: use one signature motion idea; avoid many unrelated effects.
- Arcanea surfaces: allow cinematic reveal, glyph, portal, and artifact motifs when tied to meaning.
- Starlight/SIS surfaces: use evidence, trace, signal, and constellation motifs with restraint.
- Partner/editorial pages: keep prose still; let one real artifact or causal sequence carry the motion.
Runtime Selection
- CSS for hover, focus, simple state changes, and low-risk transitions.
- Motion for React for component choreography, presence, layout transitions, and React scroll work.
- GSAP only for authored pinned/scrubbed timelines that simpler runtimes cannot express.
- Rive for interactive vector state machines.
- Lottie/dotLottie for portable non-interactive vector sequences.
- Three.js only when 3D is central to the proposition and visually verified.
- Remotion for rendered evidence, explainers, and exact media exports.
- Generated media tools produce source material; they do not approve or finish it.
For substantial motion, complete templates/SITE_MOTION_SPEC.md before implementation.
Output
Return: motion thesis, first-read diagnosis, still-frame verdict, motion map, runtime choice, reduced-motion plan, implementation tasks, required QA proof, and gate score.
1---2name: motion-and-interaction3description: Use for premium motion and interaction design across FrankX, Starlight, Arcanea, and product UI: choreography, timing, state transitions, reduced-motion behavior, brand motion identity, and design-to-engineering handoff.4---56# Motion And Interaction78Use this skill when an interface needs to feel intentional over time. Motion should clarify state, hierarchy, causality, brand, or story. If it only adds activity, cut it.910## Workflow11121. Identify the surface: app flow, dashboard, landing page, onboarding, gallery, content page, video, or social asset.132. Define the first read before animation.143. Name the job of motion: orient, reveal, confirm, explain, focus, show causality, show progress, show spatial relationship, or create one brand memory.154. Pass the still-frame gate. Do not animate a weak composition.165. Pick the brand and surface mode.176. Write the beat sequence: setup, trigger, primary move, support, hold, resolution.187. Name the hero object, stable anchor, what remains still, and what the user controls.198. Choose the lightest runtime that preserves the intent.209. Specify timing, easing, interruption, mobile choreography, performance budget, and reduced-motion equivalent.2110. Verify actual desktop, mobile, reduced-motion, and runtime capture.2211. Score with `evals/motion-purpose-gate.md`.2324## Defaults2526- Product UI: short, causal, interruptible motion.27- Dashboards: animate deltas and status changes, not layout chrome.28- Launch pages: use one signature motion idea; avoid many unrelated effects.29- Arcanea surfaces: allow cinematic reveal, glyph, portal, and artifact motifs when tied to meaning.30- Starlight/SIS surfaces: use evidence, trace, signal, and constellation motifs with restraint.31- Partner/editorial pages: keep prose still; let one real artifact or causal sequence carry the motion.3233## Runtime Selection3435- CSS for hover, focus, simple state changes, and low-risk transitions.36- Motion for React for component choreography, presence, layout transitions, and React scroll work.37- GSAP only for authored pinned/scrubbed timelines that simpler runtimes cannot express.38- Rive for interactive vector state machines.39- Lottie/dotLottie for portable non-interactive vector sequences.40- Three.js only when 3D is central to the proposition and visually verified.41- Remotion for rendered evidence, explainers, and exact media exports.42- Generated media tools produce source material; they do not approve or finish it.4344For substantial motion, complete `templates/SITE_MOTION_SPEC.md` before implementation.4546## Output4748Return: motion thesis, first-read diagnosis, still-frame verdict, motion map, runtime choice, reduced-motion plan, implementation tasks, required QA proof, and gate score.
frankxai