# Motion Design

> Create and evaluate website motion strategies that improve mood, clarity, and perceived polish. Use this skill when planning animations, micro-interactions, or transitions for websites or product pages.

- Skill: `10xequity/motion-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add 10xequity/motion-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/10xequity/motion-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: 10xequity (https://skillmd.com/u/10xequity)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/10xequity/motion-design

---


# Motion Design Skill

## Purpose
Create and evaluate website motion strategies that improve mood, clarity, and perceived polish.

## When to use
Use this skill when planning animations, micro-interactions, or transitions for websites or product pages.

## Inputs
- page or component context
- animation goal
- motion style preference
- performance constraints

## Output
Return:
- animation recommendations
- suggested transition timings
- interaction behavior guidance
- accessibility and performance notes

## Constraints
- avoid distracting or overly heavy motion
- prioritize usability and performance
- keep the motion consistent with brand tone

## Examples
- Plan entrance animations for a landing page
- Recommend micro-interactions for a navigation menu
- Improve how a pricing card transitions on hover