Brand Consistency

When your animations feel generic or clash with your product's identity, this walks you through aligning motion with brand personality using Disney's animation principles. It connects each principle to brand expression: timing speeds for energetic versus calm brands, exaggeration levels for luxury versus playful products, squash and stretch for the right tone. The practical bits are solid, like defining three brand motion words, creating CSS motion tokens with consistent easing curves, and the audit checklist that asks whether you'd recognize the animation without seeing the UI. It's basically a framework for making sure your transitions don't accidentally make a banking app feel like a kid's game or vice versa.

skills.sh installs: 565
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill brand-consistency --agent claude-code

Installs into .claude/skills of the current project.

Files

Brand Consistency

Align animation style with brand identity using Disney's principles.

Problem Indicators

Animation feels "off-brand"
Generic motion that could be any product
Inconsistent animation styles across features
Motion conflicts with brand voice
Users don't recognize the product's personality

Diagnosis by Principle

Appeal

Issue: Animation lacks distinctive character Fix: Define brand motion attributes. Is your brand playful (bouncy easing), professional (smooth, minimal), energetic (quick, snappy)?

Exaggeration

Issue: Wrong level of drama for brand Fix: Match exaggeration to brand personality. Luxury = subtle. Playful = bouncy. Corporate = restrained.

Timing

Issue: Speed doesn't match brand energy Fix: Fast brands: 100-200ms. Calm brands: 300-500ms. Define a timing scale and use consistently.

Squash and Stretch

Issue: Elastic effects conflict with serious brand Fix: Reserve squash/stretch for playful brands. Use scale transforms for professional brands.

SKILL.md on GitHub