# Motion Interaction

> Add purposeful interaction and motion to HTML designs, including state transitions, feedback, navigation, disclosure, and reduced-motion behavior.

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

---


# Motion and interaction

Motion should explain state change, not delay the user.

- Use short transitions for hover, focus, selection, expansion, and feedback.
- Keep entrance animation rare and subordinate to content; stagger only a few
  meaningful items.
- Give every action immediate feedback and preserve state consistently.
- Prevent accidental form submission and repeated destructive actions.
- Use transforms and opacity for smooth animation; avoid layout-thrashing loops.
- Under `prefers-reduced-motion: reduce`, remove nonessential movement and keep
  state changes understandable.

Test the actual interaction after implementation. A visually convincing button
that does nothing is a defect, not a mockup detail.