
Brand Marketing
- 350 installs
- 68 repo stars
- Updated December 30, 2025
- dylantarre/animation-principles
brand-marketing is an animation-principles skill that applies Disney's 12 principles to commercials, logo reveals, and promo UI motion for developers who ship branded landing pages and marketing interfaces.
About
brand-marketing is a skill from dylantarre/animation-principles that maps Disney's 12 animation principles—squash and stretch, anticipation, staging, follow-through, and more—to commercial motion for ads, logo reveals, and product-led growth UI. The quick-reference table ties each principle to brand implementations like product bounce, reveal suspense, hero-shot staging, and overlapping logo settles. Developers reach for brand-marketing when building launch hero animations, promo loops, or shareable UI moments that must reinforce brand story rather than feel generic. Use it alongside CSS, Framer Motion, or Remotion work when motion needs deliberate marketing impact. Trigger when the task mentions brand identity animation, commercials, or advertising motion content.
- Hero and launch-page motion strategy
- Shareable animated brand moments
- Emotional differentiation at first view
- Aligns promo clips with product UI
- Supports PLG and campaign landers
Brand Marketing by the numbers
- 350 all-time installs (skills.sh)
- Ranked #830 of 1,879 Marketing & SEO skills by installs in the Skillselion catalog
- Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/dylantarre/animation-principles --skill brand-marketingAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 350 |
|---|---|
| repo stars | ★ 68 |
| Last updated | December 30, 2025 |
| Repository | dylantarre/animation-principles ↗ |
How do you animate logo reveals for marketing pages?
Craft launch hero motion, promo loops, and shareable UI moments that reinforce brand story in landing pages, ads, and product-led growth assets.
Who is it for?
Frontend developers and motion designers building launch heroes, ad creatives, or branded UI animations who want structured Disney-principle guidance.
Skip if: Developers implementing purely functional micro-interactions or backend-only features with no commercial motion or brand storytelling requirements.
When should I use this skill?
User asks for commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content timing.
What you get
Principle-mapped motion specs, hero animation beats, promo loop timing notes, and brand-aligned UI motion guidance
- motion timing spec
- principle-mapped animation plan
By the numbers
- Applies Disney's 12 animation principles to brand and marketing motion
- Includes quick-reference table mapping principles to brand implementations
Files
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 transitionsTech/Innovation
- Precise, efficient timing (200-400ms)
- Sharp, decisive motion
- Geometric transitions
- Light trails, particle systems
- Data-driven motion graphicsPlayful/Friendly
- Bouncy timing with overshoot (300-500ms)
- Squash and stretch throughout
- Curved, organic paths
- Bright color pops
- Character-driven elementsProfessional/Corporate
- Balanced timing (300-500ms)
- Clean, purposeful motion
- Grid-aligned movements
- Fade and slide transitions
- Subtle, refined effectsLogo 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
Related skills
How it compares
Pick brand-marketing over rhythm-pacing when the goal is commercial brand storytelling and logo or hero promo motion rather than multi-step UI sequence timing.
FAQ
What principles does brand-marketing cover?
brand-marketing applies Disney's 12 animation principles—including squash and stretch, anticipation, staging, and follow-through—to commercials, logo reveals, advertisements, and branded product UI motion.
When should brand-marketing be used?
brand-marketing fits commercial animations, advertising motion, brand identity sequences, logo reveals, and marketing video content where motion must reinforce brand story on landing pages or promo assets.