861b28b965
New skills (14): - nestjs-best-practices: 40 priority-ranked rules (kadajett) - fastapi: Pydantic v2, async SQLAlchemy, JWT auth (jezweb) - architecture-patterns: Clean Architecture, Hexagonal, DDD (wshobson) - python-performance-optimization: Profiling and optimization (wshobson) - ai-sdk: Vercel AI SDK streaming and agent patterns (vercel) - create-agent: Modular agent architecture with OpenRouter (openrouterteam) - proactive-agent: WAL Protocol, compaction recovery, self-improvement (halthelobster) - brand-guidelines: Brand identity enforcement (anthropics) - ui-animation: Motion design with accessibility (mblode) - marketing-ideas: 139 ideas across 14 categories (coreyhaines31) - pricing-strategy: SaaS pricing and tier design (coreyhaines31) - programmatic-seo: SEO at scale with playbooks (coreyhaines31) - competitor-alternatives: Comparison page architecture (coreyhaines31) - referral-program: Referral and affiliate programs (coreyhaines31) README reorganized by domain: Code Quality, Frontend, Backend, Auth, AI/Agent Building, Marketing, Design, Meta. Mosaic Stack is not limited to coding — the Orchestrator serves coding, business, design, marketing, writing, logistics, and analysis. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
52 lines
2.3 KiB
Markdown
52 lines
2.3 KiB
Markdown
---
|
|
name: ui-animation
|
|
description: Guidelines and examples for UI motion and animation. Use when designing, implementing, or reviewing motion, easing, timing, reduced-motion behaviour, CSS transitions, keyframes, framer-motion, or spring animations.
|
|
---
|
|
|
|
# UI Animation
|
|
|
|
## Core rules
|
|
- Animate to clarify cause/effect or add deliberate delight.
|
|
- Keep interactions fast (200-300ms; up to 1s only for illustrative motion).
|
|
- Never animate keyboard interactions (arrow-key navigation, shortcut responses, tab/focus).
|
|
- Prefer CSS; use WAAPI or JS only when needed.
|
|
- Make animations interruptible and input-driven.
|
|
- Honor `prefers-reduced-motion` (reduce or disable).
|
|
|
|
## What to animate
|
|
- For movement and spatial change, animate only `transform` and `opacity`.
|
|
- For simple state feedback, `color`, `background-color`, and `opacity` transitions are acceptable.
|
|
- Never animate layout properties; never use `transition: all`.
|
|
- Avoid `filter` animation for core interactions; if unavoidable, keep blur <= 20px.
|
|
- SVG: apply transforms on a `<g>` wrapper with `transform-box: fill-box; transform-origin: center`.
|
|
- Disable transitions during theme switches.
|
|
|
|
## Spatial and sequencing
|
|
- Set `transform-origin` at the trigger point.
|
|
- For dialogs/menus, start around `scale(0.85-0.9)`; avoid `scale(0)`.
|
|
- Stagger reveals <= 50ms.
|
|
|
|
## Easing defaults
|
|
- Enter and transform-based hover: `cubic-bezier(0.22, 1, 0.36, 1)`.
|
|
- Move: `cubic-bezier(0.25, 1, 0.5, 1)`.
|
|
- Simple hover colour/background/opacity: `200ms ease`.
|
|
- Avoid `ease-in` for UI (feels slow).
|
|
|
|
## Accessibility
|
|
- If `transform` is used, disable it in `prefers-reduced-motion`.
|
|
- Disable hover transitions on touch devices via `@media (hover: hover) and (pointer: fine)`.
|
|
|
|
## Performance
|
|
- Pause looping animations off-screen.
|
|
- Toggle `will-change` only during heavy motion and only for `transform`/`opacity`.
|
|
- Prefer `transform` over positional props in animation libraries.
|
|
- Do not animate drag gestures using CSS variables.
|
|
|
|
## Reference
|
|
- Snippets and practical tips: [examples.md](examples.md)
|
|
|
|
## Workflow
|
|
1. Start with the core rules, then pick a reference snippet from [examples.md](examples.md).
|
|
2. Keep motion functional; honor `prefers-reduced-motion`.
|
|
3. When reviewing, cite file paths and line numbers and propose concrete fixes.
|