What is the dramatic-2000ms-plus skill?
The dramatic-2000ms-plus skill is a SKILL.md from dylantarre's animation-principles collection for extended animation sequences over 2000ms, such as cinematic intros and premium experiences. It applies all 12 principles at full scale and sets requirements: skippable, once per user, a reduced-motion alternative and a performance budget.
The dramatic-2000ms-plus skill covers animation beyond 2000ms, which it calls cinema. These are short films embedded in a product, reserved for moments that define a brand, such as cinematic intros, story sequences and premium experiences.
The 12 principles at dramatic scale
- Squash and stretch: 40% or more deformation for organic, living motion.
- Anticipation: 400 to 600ms of build-up for dramatic tension.
- Staging: cinematography, with establishing shots, close-ups and reveals, thinking in scenes instead of states.
- Timing: 120 or more frames at 60fps.
- Solid drawing: 3D environments with parallax, depth of field and camera movement.
Requirements and cost
Every dramatic sequence must be skippable, shown once per user and given an instant reduced-motion alternative, a topic the accessible-motion skill addresses.
It also needs a loading strategy and a performance budget, where the fixing-motion-performance skill can help. Plan for storyboarding, low-end device tests and 3 to 5 times normal development time.
Who the dramatic-2000ms-plus skill is for
Best for
- Product launch reveals and brand hero moments.
- Premium onboarding, shown once per user.
- Achievement and milestone celebrations, data story visualizations and marketing microsites.
Not for
- Everyday UI transitions, which are not cinema.
- Fast feedback on buttons and inputs, which fits the web-motion-design skill.
How to install Dramatic 2000ms Plus Skill: Cinematic Web Animation
git clone https://github.com/dylantarre/animation-principles.git ~/.claude/plugins/animation-principlesOption one, the plugin
Open your Claude Code settings and list
animation-principles@github:dylantarre/animation-principlesunder plugins to load it as a plugin.Option two, a manual clone
Run
git clone https://github.com/dylantarre/animation-principles.git ~/.claude/plugins/animation-principles. This is the manual installation.Locate the folder
Inside the clone the skill is at skills/10-by-time-scale/dramatic-2000ms-plus.
Trigger it
Describe the job in the terms from its description: an animation sequence over 2000ms, a cinematic intro, a story sequence or a premium experience where animation is the product.
Check that it loaded
Ask the agent for a 3 second hero reveal. Check the result for a skip control, a stored once-per-user preference and an instant reduced-motion alternative.
Key features
- Full cinematic treatmentAll 12 Disney principles are rewritten at dramatic scale, from squash and stretch to appeal.
- Anticipation build-upAnticipation is set at 400 to 600ms of tension so the audience waits with expectation.
- Hybrid animation approachThe structure is pose to pose, with straight-ahead detail passes added on top.
- Easing recommendationsThree cubic-bezier curves cover a multi-phase narrative, building drama and resolution, and complex sequences use several keyframes with varying easings.
- Epic reveal patternA 3000ms keyframe combines perspective, rotateX, translateY, scale and a blur that clears from 20px to 0.
- Best use casesEight are listed, including product launches, brand heroes, milestones, game-like interactions and annual report animations.
- Skip and once-only rulesSkippable by tap, click or keypress, with the preference stored so it does not repeat.
- Reduced motionAn instant alternative is required, and a loading strategy of preload or progressive enhancement.
- Production checklistStoryboard first, get stakeholder buy-in on duration, test on low-end devices and consider a video fallback.
- Budget guidancePlan for 3 to 5 times normal development time and a dedicated optimization pass.
Frequently asked questions
What is the dramatic-2000ms-plus skill?
It is a skill in dylantarre's animation-principles collection for animation sequences over 2000ms. It applies Disney's 12 principles at full cinematic scale, gives easing curves and an epic reveal pattern, and lists the requirements and production costs an AI coding agent should account for.
How do I install dramatic-2000ms-plus?
Clone the dylantarre/animation-principles repository to ~/.claude/plugins/animation-principles with the git clone command from the README, or add animation-principles@github:dylantarre/animation-principles to your Claude Code plugins. The skill folder is skills/10-by-time-scale/dramatic-2000ms-plus. Then describe a cinematic intro or story sequence, and the agent can load the skill.
When should I use animation over 2000ms?
Reserve it for moments that define your brand. The listed cases are product launch reveals, brand hero moments, premium onboarding shown once per user, achievement celebrations, game-like interactions, data story visualizations, annual report animations and marketing microsites. Everyday UI transitions are not cinema, so they do not belong here.
What requirements must a dramatic animation meet?
It must be skippable by tap, click or keypress, shown once per user with a stored preference, and offer an instant reduced-motion alternative. It also needs a loading strategy, a dedicated performance budget and sound design considered with a mute option.
How much does a dramatic sequence cost to build?
The skill says to budget 3 to 5 times normal development time. It calls these animations mini-productions that need storyboarding, iteration and polish, with stakeholder buy-in on duration, tests on low-end devices and a video fallback considered for complex sequences.
Which easing curves does the skill recommend?
A multi-phase narrative uses cubic-bezier(0.22, 0.61, 0.36, 1). Building drama uses cubic-bezier(0.55, 0.06, 0.68, 0.19). Resolution or satisfaction uses cubic-bezier(0.25, 1, 0.5, 1). Each is set through animation-timing-function in the skill's Easing Recommendations block. Complex sequences should use multiple keyframes with varying easings.
What license does the dramatic-2000ms-plus skill use?
It is MIT licensed. The dylantarre/animation-principles repository, which holds the dramatic-2000ms-plus skill alongside 143 other skills, carries the MIT license, and its README points to the LICENSE file for details. The repository badge also shows the license as MIT, and GitHub lists it as MIT License.