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
- Choose the role: orientation, feedback, delight, continuity, or emphasis.
- Define one primary moment: page load, hero interaction, panel transition, or data reveal.
- Keep secondary motion quiet.
- 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.
1---2name: motion-interaction3description: 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.4---5# Frontend Motion and Interaction67Motion should clarify structure, provide feedback, or create one memorable moment.8Avoid scattered animation that competes with the interface.910## Motion Strategy11121. Choose the role: orientation, feedback, delight, continuity, or emphasis.132. Define one primary moment: page load, hero interaction, panel transition, or data reveal.143. Keep secondary motion quiet.154. Respect reduced-motion preferences.1617## Patterns1819- Page load: staggered entrance with short delays and consistent easing.20- Hover: small transform, color, elevation, or reveal tied to affordance.21- Press: immediate tactile feedback.22- Layout transition: preserve spatial continuity.23- Data reveal: animate changes only when it improves comprehension.24- Scroll effects: use sparingly and avoid blocking content access.2526## Timing2728- Micro-interactions: 120-220ms.29- UI transitions: 180-350ms.30- Large hero moments: 400-800ms when appropriate.31- Use one easing family per interface.3233## Implementation3435- Prefer CSS transitions for simple effects.36- Use Framer Motion when coordinating React state, route transitions, or complex sequencing.37- 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.38- Avoid animation that changes layout unexpectedly.39- Provide `prefers-reduced-motion` fallbacks.4041## Verification4243Confirm animations do not cause jank, obscure text, trap focus, or delay primary tasks.
YuukiAS