universal-industry
Use when designing animations for any industry or when industry-specific guidelines do not apply
Install
npx skills add https://github.com/dylantarre/animation-principles --skill universal-industrySKILL.md
Universal Animation Principles
Apply Disney's 12 principles as flexible foundations that adapt to any industry context with sensible defaults.
The 12 Principles Applied
1. Squash & Stretch
- Default: Subtle compression on interactive elements
- Adjust By: Brand personality (playful = more, serious = less)
- Universal Rule: Never distort data or important content
2. Anticipation
- Default: Brief pause before significant actions
- Adjust By: Action importance (bigger action = more anticipation)
- Universal Rule: Always signal before irreversible actions
3. Staging
- Default: Primary action takes visual focus
- Adjust By: Content hierarchy and user goals
- Universal Rule: One main focus per screen state
4. Straight Ahead & Pose to Pose
- Default: Pose to pose for UI, straight ahead for data
- Adjust By: Content type and interaction pattern
- Universal Rule: Match approach to content predictability
5. Follow Through & Overlapping Action
- Default: Related elements animate in sequence
- Adjust By: Visual complexity and element relationships
- Universal Rule: Primary element completes before secondary
6. Slow In & Slow Out
- Default: ease-in-out for most transitions
- Adjust By: UI context (entrances = ease-out, exits = ease-in)
- Universal Rule: Never use linear for UI motion
7. Arc
- Default: Subtle curves for natural movement
- Adjust By: Interface formality (casual = more arc)
- Universal Rule: Straight lines for data, curves for character
8. Secondary Action
- Default: One supporting animation per primary action
- Adjust By: Moment importance and brand expression
- Universal Rule: Secondary never overshadows primary
9. Timing
- Default: 200-300ms for standard interactions
- Adjust By: Industry pace and user expectations
- Universal Rule: Faster for frequent, slower for significant
10. Exaggeration
- Default: Subtle, 10-20% beyond literal
- Adjust By: Brand personality and context appropriateness
- Universal Rule: Exaggerate successes, minimize failures
11. Solid Drawing
- Default: Consistent visual language throughout
- Adjust By: Platform conventions and brand guidelines
- Universal Rule: Maintain perspective and proportions
12. Appeal
- Default: Clean, refined motion that feels intentional
- Adjust By: Target audience and brand personality
- Universal Rule: Animation should never feel accidental
Universal Timing Defaults
| Action | Duration | Easing |
|---|---|---|
| Micro-interaction | 100-150ms | ease-out |
| Standard Transition | 200-300ms | ease-in-out |
| Complex Animation | 300-500ms | ease-in-out |
| Emphasis Moment | 400-600ms | custom |
| Page Transition | 300-400ms | ease-in-out |
Adaptation Framework
By Brand Personality
- Professional: Reduce squash/stretch, minimize exaggeration
- Playful: Increase bounce, add secondary actions
- Premium: Slower timing, refined easing curves
- Energetic: Faster timing, more dynamic motion
By User Context
- Working: Minimize animation, maximize efficiency
- Browsing: Enhance discovery with motion
- Celebrating: Amplify positive moments
- Learning: Support comprehension with motion
Key Principle
Start with sensible defaults, then calibrate based on industry expectations, brand personality, and user context. When in doubt, err toward subtlety and efficiency.
Related skills
frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreographyhyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.
