brand-marketing — Claude Code skill: what it does, how to install
Applies Disney's 12 animation principles to brand identities, commercial ads, and logo reveals. Tailors motion timing to brand personality.
npx skills add dylantarre/animation-principles --skill brand-marketing -a claude-codeWhat brand-marketing does
This skill guides AI agents in crafting commercial motion design and logo reveals. It provides distinct motion curves and pacing presets for four brand profiles: luxury, tech, playful, and corporate.
Each profile relies on defined duration windows. Premium brands demand slow pacing between 500ms and 800ms without bouncing, while tech identities require crisp movements under 400ms. Logo animations follow a four-phase structure covering anticipation, reveal, follow-through settling, and hold times up to two seconds.
Timing tables cover platform constraints from six-second bumper ads to television commercials. The final delivery checklist enforces safe title areas and reduced-motion alternatives before handoff.
What it helps with
- set logo reveal timing according to brand tone
- adjust end-card duration to fit ad platform limits
- synchronize motion keyframes with audio beats
- run a pre-render check for safe areas and reduced motion
Example prompts for the agent
- Plan a logo reveal sequence for a luxury watch brand with a two-second hold.
- Define the motion curves and timings for a 15-second social video ad.
- Create animation guidelines for a tech product launch using 200-400ms easing.
How to install brand-marketing
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill brand-marketing -a claude-code2Manually: put the files in place
~/.claude/skills/brand-marketing/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/brand-marketing/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill brand-marketing -a codex2Manually: put the files in place
.agents/skills/brand-marketing/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill brand-marketing -a cursor2Manually: put the files in place
.cursor/skills/brand-marketing/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles brand-marketing2Manually: put the files in place
.github/skills/brand-marketing/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill brand-marketing -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/01-by-domain/brand-marketingManually: put the files in place
.devin/skills/brand-marketing/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill brand-marketing -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about brand-marketing
How do I install brand-marketing in Claude Code?
Run npx skills add dylantarre/animation-principles --skill brand-marketing -a claude-code in your terminal. This saves the skill configuration to ~/.claude/skills/brand-marketing/SKILL.md.
What does the brand-marketing skill do?
It translates traditional animation principles into motion guidelines for marketing videos and brand assets. The skill establishes easing styles, phase lengths, and platform limits for consistent motion graphics.
What are the phases in the logo animation framework?
The framework structures motion into four steps: anticipation (200-400ms), reveal (400-800ms), settle (200-400ms), and a static hold between 1000ms and 2000ms for brand recall.
Source text
SKILL.md · MIT
--- name: brand-marketing description: Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content. --- # Brand Marketing Animation Apply Disney's 12 animation principles to commercials, advertisements, brand identity, and marketing content. ## Quick Reference | Principle | Brand/Marketing Implementation | |-----------|-------------------------------| | Squash & Stretch | Product bounce, logo elasticity | | Anticipation | Build-up to reveal, suspense | | Staging | Product hero shots, focal control | | Straight Ahead / Pose to Pose | Story flow vs key moments | | Follow Through / Overlapping | Logo elements settle, tagline delay | | Slow In / Slow Out | Dramatic reveals, smooth motion | | Arc | Sweeping camera, product arcs | | Secondary Action | Environment responds to product | | Timing | Match brand energy, music sync | | Exaggeration | Brand personality amplification | | Solid Drawing | Consistent brand identity in motion | | Appeal | Memorable, emotionally resonant | ## Principle Applications **Squash & Stretch**: Products can bounce on landing for energy. Logo elements stretch during reveals. Text can have elastic emphasis. Match brand personality—luxury minimal, playful bouncy. **Anticipation**: Build suspense before product reveal. Pause before tagline appears. Sound design wind-up precedes visual payoff. Create expectation, then deliver. **Staging**: Product is always the hero. Lighting directs to focal point. Background supports, never competes. Clear visual hierarchy every frame. **Straight Ahead vs Pose to Pose**: Story-driven commercials flow naturally (straight ahead energy). Key reveal moments are precisely posed. Blend both—flow to moments of impact. **Follow Through & Overlapping**: Logo elements settle at different rates. Tagline appears after logo lands. Product features animate in sequence. Creates natural, alive feeling. **Slow In / Slow Out**: Dramatic reveals use long ease-in. Impact moments snap. Premium brands use slower, more deliberate timing. Energetic brands use faster, snappier easing. **Arc**: Camera movements sweep in arcs. Products tumble naturally. Logo elements flow, don't snap. Text can follow curved paths for dynamism. **Secondary Action**: Environment responds to product presence. Particles, light rays, reflections. Music and motion sync. Every element reinforces the message. **Timing**: Match brand energy profile. Luxury: slow, deliberate (500-800ms). Tech: precise, efficient (200-400ms). Playful: bouncy, energetic (300-500ms with overshoot). Sync to music beats. **Exaggeration**: Amplify brand personality traits. Confident brands use bold, decisive motion. Friendly brands use rounded, bouncy motion. Exaggeration makes brand memorable. **Solid Drawing**: Logo maintains integrity in motion. Brand colors consistent throughout. Typography respects brand guidelines. Motion style matches brand identity system. **Appeal**: Animation should evoke target emotion. Trust, excitement, comfort, aspiration. Every motion choice serves brand message. Memorable moments people want to rewatch. ## Brand Personality Motion ### Luxury/Premium ``` - Slow, deliberate timing (500-800ms) - Minimal motion, maximum impact - Subtle easing, no bounce - Clean, geometric paths - Restrained color transitions ``` ### Tech/Innovation ``` - Precise, efficient timing (200-400ms) - Sharp, decisive motion - Geometric transitions - Light trails, particle systems - Data-driven motion graphics ``` ### Playful/Friendly ``` - Bouncy timing with overshoot (300-500ms) - Squash and stretch throughout - Curved, organic paths - Bright color pops - Character-driven elements ``` ### Professional/Corporate ``` - Balanced timing (300-500ms) - Clean, purposeful motion - Grid-aligned movements - Fade and slide transitions - Subtle, refined effects ``` ## Logo Animation Framework | Phase | Duration | Purpose | |-------|----------|---------| | Anticipation | 200-400ms | Build expectation | | Reveal | 400-800ms | Main animation | | Settle | 200-400ms | Follow-through | | Hold | 1000-2000ms | Brand recognition | ### Logo Reveal Patterns 1. **Build-up**: Elements assemble into logo 2. **Reveal**: Mask or transition exposes logo 3. **Transform**: Abstract shape morphs to logo 4. **Kinetic**: Logo elements in motion, then resolve ## Music Sync Guidelines - Major beats: key reveals, impacts - Measures: section transitions - BPM: drives overall energy - Silence: powerful before reveal - Sound design: reinforces motion ## Platform Timing | Platform | Max Length | Logo Hold | |----------|------------|-----------| | TV Commercial | 15/30/60s | 2-3s | | Pre-roll | 6/15s | 1-2s | | Social video | 15-60s | 1.5-2s | | Stories | 15s | 1-1.5s | | Bumper | 6s | 1s | ## Deliverables Checklist - [ ] Animation matches brand guidelines - [ ] Logo animation approved - [ ] Timing synced to audio - [ ] Platform-specific versions - [ ] Reduced motion alternative - [ ] Color profile correct - [ ] Safe area compliance
© dylantarre · MIT · dylantarre/animation-principles