home / skills / dylantarre / animation-principles / dramatic-2000ms-plus
This skill helps you craft dramatic, cinematic animations over 2000ms by applying Disney principles to elevate branding and user moments.
npx playbooks add skill dylantarre/animation-principles --skill dramatic-2000ms-plusReview the files below or copy the command above to add this skill to your agents.
---
name: dramatic-2000ms-plus
description: Use when building extended animation sequences over 2000ms - cinematic intros, story sequences, premium experiences where animation IS the product
---
# Dramatic Animations (2000ms+)
Beyond 2000ms, animation becomes **cinema**. These aren't UI transitions - they're short films embedded in your product. Reserve for moments that define your brand.
## Disney Principles at Dramatic Scale
### Full Cinematic Treatment
**Squash & Stretch**: Fully animated character - 40%+ deformation for organic, living motion. Physics-defying when needed.
**Anticipation**: Dramatic tension - 400-600ms build-up. The audience waits with expectation.
**Staging**: Cinematography - establishing shots, close-ups, reveals. Think in scenes, not states.
**Straight Ahead/Pose to Pose**: Hybrid approach - pose-to-pose structure with straight-ahead detail passes.
**Follow Through**: Extended ecosystem - everything continues moving after primary action. World feels alive.
**Slow In/Slow Out**: Emotional timing - curves match narrative beats. Pause for emphasis.
**Arcs**: Choreographed paths - every element's path is intentionally designed.
**Secondary Action**: Full orchestration - layers of motion at different scales and speeds.
**Timing**: 120+ frames at 60fps. Full animation production values.
**Exaggeration**: Artistic license - break physics for emotional truth.
**Solid Drawing**: 3D environments - parallax, depth of field, camera movement.
**Appeal**: Memorable experiences - users tell others about these moments.
## Easing Recommendations
```css
/* Multi-phase narrative */
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
/* Building drama */
animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
/* Resolution/satisfaction */
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
/* Complex sequences - use multiple keyframes with varying easings */
```
## Best Use Cases
- Product launch reveals
- Brand hero moments
- Premium onboarding (once per user)
- Achievement/milestone celebrations
- Game-like interactions
- Data story visualizations
- Annual report animations
- Marketing microsites
## Implementation Pattern
```css
@keyframes epicReveal {
0% {
opacity: 0;
transform: perspective(1000px) rotateX(30deg) translateY(100px) scale(0.7);
filter: blur(20px);
}
25% {
opacity: 0.8;
filter: blur(10px);
}
50% {
transform: perspective(1000px) rotateX(-5deg) translateY(-20px) scale(1.05);
filter: blur(0);
}
75% {
transform: perspective(1000px) rotateX(2deg) translateY(10px) scale(0.98);
}
90% {
transform: perspective(1000px) rotateX(-1deg) translateY(-5px) scale(1.01);
}
100% {
opacity: 1;
transform: perspective(1000px) rotateX(0) translateY(0) scale(1);
}
}
.epic-reveal {
animation: epicReveal 3000ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
```
## Requirements
- **Skippable**: Always allow skip (tap/click/keypress)
- **Once per user**: Store preference, don't repeat
- **Reduced motion**: Provide instant alternative
- **Loading strategy**: Preload or progressive enhancement
- **Performance budget**: Dedicated optimization pass
- **Sound design**: Consider audio (with mute option)
## Production Considerations
- Storyboard before building
- Get stakeholder buy-in on duration
- Test on low-end devices
- Consider video fallback for complex sequences
- Budget 3-5x normal development time
## Key Insight
Dramatic animations are **mini-productions**. They require storyboarding, iteration, and polish. The payoff is brand differentiation and memorable experiences. Invest accordingly.
This skill helps teams design and implement extended animations longer than 2000ms—cinematic sequences that function as short films inside your product. It frames Disney-inspired animation principles at dramatic scale, giving practical patterns, easing choices, and production requirements. Use it to create brand-defining, memorable motion that feels intentionally produced rather than incidental.
The skill inspects a sequence’s narrative needs and translates them into animation principles: staging, timing, arcs, and layered secondary motion. It provides recommended easings, keyframe patterns, and an implementation checklist covering skip options, reduced-motion fallbacks, loading strategies, and performance budgets. It also advises production steps like storyboarding, stakeholder alignment, and device testing.
How do I keep dramatic animations performant on low-end devices?
Use progressive enhancement: detect capability, serve a simplified or video fallback, lazy-load assets, and run an optimization pass to trim layers and effects.
What easing should I use for narrative beats?
Use multi-phase cubic-beziers—one for build (e.g., 0.55,0.06,0.68,0.19), one for drama (e.g., 0.22,0.61,0.36,1), and one for satisfying resolution (e.g., 0.25,1,0.5,1). Combine easings across keyframes for complex sequences.