YuukiAS/AI_Skills_Collection

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.

Ownership

• Own motion intent: orientation, continuity, feedback, hierarchy, and deliberate delight.
• Separate design motion from runtime latency, data loading, and jank. Runtime performance defects go back to implementation/testing; do not invent a universal cross-project millisecond budget as a design rule.
• Motion should support F-C actual-surface convergence: verify that animation does not hide content, break focus, misrepresent state, or create a competing interaction path.

Verification

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