motion-choreography
Motion Choreography
Motion is communication. Every animation answers a question the user didn't know they had. If it doesn't answer one, cut it.
The Three Questions
Before adding any animation:
- What changed? — the animation makes it visible
- What should I look at next? — directs attention
- How are these related? — shows spatial/hierarchical relationship
Can't answer at least one? The animation is decoration. Cut it.
Duration Guide
More from owl-listener/designpowers
adaptive-interfaces
Use when designing for user preferences — motion sensitivity, contrast needs, colour schemes, text sizing, information density, or any interface behaviour that should adapt to individual needs
6token-architecture
Use when building or restructuring design token systems — global tokens, semantic tokens, component tokens, naming conventions, theming, and multi-platform token distribution
6design-discovery
You MUST use this before any creative or design work — building features, creating components, designing interfaces, modifying user-facing behaviour. Explores intent, constraints, users, and context before any design decisions are made
6responsive-patterns
Use when designing complex responsive layouts — breakpoint strategy, layout shifts, content reflow, responsive typography, container queries, and ensuring the experience works across the full device spectrum
6design-memory
Use when starting a new project or when taste decisions are made — accumulates the user's aesthetic preferences, recurring patterns, and design instincts across projects so each new project starts with what the system already knows about their taste
6design-system-alignment
Use when working with or building design systems — tokens, components, naming conventions, theming, or pattern libraries — ensures consistency, accessibility compliance, and systematic thinking
6