Dramatic 2000ms Plus
When you need animations longer than 2 seconds that function more like short films than UI transitions. This covers cinematic techniques adapted for web: multi-phase easing curves, full squash and stretch at 40%+ deformation, 400-600ms anticipation builds, and orchestrated secondary motion across 120+ frames. The guidance is properly opinionated about requiring skip buttons, showing once per user, and budgeting 3-5x normal dev time. Best for product launches, milestone celebrations, or premium onboarding where the animation is the experience itself. Treats this duration tier seriously as mini-productions requiring storyboards and stakeholder buy-in rather than pretending you can wing a 3-second animation.
- skills.sh installs
- 609
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill dramatic-2000ms-plus --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Notifications Toasts606
- Frontend Developer605
- Navigation Menus601
- Buttons Ctas598
- Figma Prototyping597
- Brand Marketing594
- Solid Drawing Mastery593
- Animator Traditional591
- Motion One589
- Naturalistic Motion589
- Attention Direction586
- Squash Stretch Mastery583
- Fintech Banking581
- Icons Badges581
- Staging Mastery581
- Gesture Responses579
- Arc Mastery578
- Follow Through Overlapping578
- Gaming Entertainment578
- Appeal Mastery577
- Accessibility Advocate576
- Anticipation Mastery575
- Entrance Animations572
- Modals Dialogs572
Recommended
More Design & UI/UX
navigation-menusdylantarre/animation-principlesUse when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions601skills.sh installs
pixel-artomer-metin/skills-for-antigravityDeep pixel art expertise covering fundamentals, limited palettes, dithering patterns, subpixel animation, tile design, retro hardware constraints, and HD-2D hyb594skills.sh installs
latex-postersdavila7/claude-code-templatesCreate professional research posters in LaTeX using beamerposter, tikzposter, or baposter. Support for conference presentations, academic posters, and scientifi592skills.sh installs
website-builder-setuptenfoldmarc/website-builder-setupInstall the full AI website builder stack — UI/UX Pro Max, Framer Motion animations, and 21st.dev components. One skill, three tools, zero coding experience nee592skills.sh installs
stardustadobe/skillsGuided multi-page redesign of an existing website through a four-phase pipeline — extract (crawl and capture the current site), direct (set a visual direction),569skills.sh installscalm-relaxationdylantarre/animation-principlesUse when creating animations that soothe users, reduce anxiety, or create peaceful, meditative experiences.566skills.sh installs