Skip to main content
skill CX Codex

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add dylantarre/animation-principles --skill brand-marketing -a claude-code
Open on GitHub

What 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-code

2Manually: put the files in place

~/.claude/skills/brand-marketing/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/brand-marketing/

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

Similar skills

Everything for Design →

From the same set142

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor