Craft brand-aligned motion with ak:motion-design

Use ak:motion-design when you are creating animations, transitions, micro-interactions, loading states, hero or CTA motion, page transitions, or scroll-triggered effects and want a decision framework that stays faithful to brand personality without inventing physics.

Choose ak:motion-design for animation intent

Use ak:motion-design when

• You are creating UI animations — buttons, cards, modals, page transitions.
• You need to design a micro-interaction or feedback animation.
• You are building a loading, success, or error state.
• You are animating an illustration or decorative element.
• You are planning scroll-triggered or progress-based animation.
• You need to establish a brand motion identity.
• You are choreographing a multi-element sequence.

Choose another Skill when

• You want to route a motion or video request to the right skill. Use ak:motion-graphics.
• You want to design a banner or a static visual. Use ak:banner-design or ak:design.
• You want programmatic React video or GLSL — install the Engineer Kit and reach for ak:remotion or ak:shader there.

Three pillars

Every animation must satisfy three pillars before any technical decision:

Every animation has three motion layers. A flat animation is one that missed a layer:

• Primary — the main action the viewer follows.
• Secondary — supporting richness (shadows, icons shifting).
• Ambient — background life (gradients, subtle pulses).

Motion Personality

Pick one archetype per project and apply it consistently.

Default: Corporate for UI, Playful for illustrations.

Brand motion identity — define three constants:

1. A signature easing curve for 80 % of animations.
2. A duration palette of three (quick, standard, slow).
3. One consistent entrance pattern.

Eight-step animation checklist

Before creating any animation:

1. Emotional target — joy, calm, urgency, elegance.
2. Motion Personality — one archetype per project.
3. Primary property — position, scale, rotation, opacity.
4. Duration — see the personality table.
5. Easing family — entrance decelerates, exit accelerates.
6. Hero element — apply staging principles.
7. Secondary and ambient layers — add richness deliberately.
8. 1/3 rules — motion distance, simultaneous elements.

Property selection

Use the minimum properties needed. One property is direct; two is polished; three or more risks overwhelming the viewer.

Implementation-agnostic

The Skill works with CSS, Framer Motion, GSAP, Lottie, Spring, or Remotion. It supplies the decision framework and reference tables; the target stack supplies the syntax.

Attribution

Vendored from LottieFiles/motion-design-skill under MIT. Deep-dive references (director, patterns, reference tables) ship with the Skill installation.

Related Skills

• ak:motion-graphics — router + verify loop across motion Skills and external template packs.
• ak:frontend-design — UI where the motion lives.
• ak:design-system — brand tokens the motion should inherit from.
• ak:banner-design — static counterpart for hero and CTA visuals.