mcpField
D
dramatic-2000ms-plus

dramatic-2000ms-plus

github.com/dylantarreCreative & media132570 installsUpdated 43w ago
Repository

About dramatic-2000ms-plus

A skill for product and brand teams designing dramatic animations lasting over 2000 ms. It covers cinematic pacing, production considerations, and implementation, including skip options, reduced-motion alternatives, and performance planning.

Key features

  1. 01Apply animation principles at cinematic scale
  2. 02Provide multi-phase easing curves
  3. 03Address skip and reduced-motion alternatives
  4. 04Cover loading and performance considerations

Use cases

  1. 01Create product launch reveals
  2. 02Design brand hero moments
  3. 03Present milestone celebrations or data stories

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dylantarre/animation-principles --skill dramatic-2000ms-plus

After installing, type/dramatic-2000ms-plusin Claude Code to confirm it loaded.

Details

From the project README

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

/* 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

@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.

Comments

Markdown supported