Motion design for intent and timing

Motion design advisor for emotional intent, personality, timing, easing, choreography, UI motion, marketing motion, and implementation handoff.

Set emotion

Choose personality

Select properties

Set timing

Rule 01

Emotion drives timing, easing, and amplitude

Rule 02

One motion personality per project

Rule 03

Minimum properties create clearer motion

Rule 04

Marketing motion is conversion craft, not decoration

Rule 05

This skill advises; peers implement assets, code, or renders

Core lanes from input to output, aligned with the command's real execution path.

Start

Input, scope, route

1 Set emotion Define the emotional target: joy, calm, urgency, elegance, surprise, or another specific feeling.
2 Choose personality Pick one motion archetype: Playful, Premium, Corporate, or Energetic, and apply it consistently.
3 Select properties Choose primary property plus minimal secondary properties; avoid three or more unless necessary.

Work

Agent / skill execution

4 Set timing Use duration tables, distance scaling, and enter/exit rules to keep motion responsive.
5 Choose easing Use directional easing: ease-out for entrances, ease-in for exits, ease-in-out for on-screen motion.
6 Layer motion Design primary, secondary, and ambient layers so the animation does not feel flat.

Verify

Gate, review, validation

7 Choreograph scene Lead with hero elements, keep stagger under 500ms, and obey 1/3 distance and element rules.
8 Adapt surface Apply specific constraints for hero sections, CTAs, promo modals, landing pages, HTML5 ads, email previews, or scroll storytelling.
9 Route execution Produce a principled brief here, then route code, assets, video, brand, design-system, or audio execution to the proper peer skill.

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

CTA motion brief Recommended

/ak:motion-design animated CTA feedback for premium SaaS landing page

Use when:: You need the motion decision before handing implementation to frontend-design.
Expected:: Defines emotion, personality, timing, easing, properties, layers, and handoff notes.

Campaign entrance

/ak:motion-design hero section entrance for a high-energy launch page

Use when:: A marketing surface needs choreography and conversion-aware motion constraints.
Expected:: Maps hero, social proof, feature, and CTA timing while preserving above-the-fold CTA visibility.

Urgent premium hero

/ak:motion-design hero animation that feels urgent but premium

Use when:: Motion needs an emotional target and timing notes before production.
Expected:: Emotion, personality, timing, and do/don't motion direction.

Related skills