# Motion Interaction

> Design and implement frontend motion: page-load choreography, transitions, hover states, scroll effects, feedback animation, and reduced-motion behavior. Use when adding or reviewing animation and interaction polish.

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

---

# Frontend Motion and Interaction

Motion should clarify structure, provide feedback, or create one memorable moment.
Avoid scattered animation that competes with the interface.

## Motion Strategy

1. Choose the role: orientation, feedback, delight, continuity, or emphasis.
2. Define one primary moment: page load, hero interaction, panel transition, or data reveal.
3. Keep secondary motion quiet.
4. Respect reduced-motion preferences.

## Patterns

- Page load: staggered entrance with short delays and consistent easing.
- Hover: small transform, color, elevation, or reveal tied to affordance.
- Press: immediate tactile feedback.
- Layout transition: preserve spatial continuity.
- Data reveal: animate changes only when it improves comprehension.
- Scroll effects: use sparingly and avoid blocking content access.

## Timing

- Micro-interactions: 120-220ms.
- UI transitions: 180-350ms.
- Large hero moments: 400-800ms when appropriate.
- Use one easing family per interface.

## Implementation

- Prefer CSS transitions for simple effects.
- Use Framer Motion when coordinating React state, route transitions, or complex sequencing.
- For React projects, public libraries such as React Bits can be useful references for text effects, animated backgrounds, and interactive components. Treat them as optional dependencies: verify license, bundle impact, accessibility, reduced-motion behavior, and project fit before adding.
- Avoid animation that changes layout unexpectedly.
- Provide `prefers-reduced-motion` fallbacks.

## Verification

Confirm animations do not cause jank, obscure text, trap focus, or delay primary tasks.