slow-800-1200ms
Use when building deliberate motion between 800-1200ms - dramatic reveals, loading sequences, storytelling moments where users should pause and absorb
When & Why to Use This Skill
This Claude skill specializes in designing and implementing deliberate, cinematic UI animations ranging from 800ms to 1200ms. By leveraging classic Disney animation principles—such as squash and stretch, anticipation, and staging—it helps creators build immersive storytelling moments and dramatic reveals. It provides optimized CSS easing functions and implementation patterns to transform standard interfaces into high-impact, emotionally resonant user experiences.
Use Cases
- App Launch Sequences: Creating high-quality, branded entrance animations that establish a premium feel during the initial loading of an application.
- Major Feature Reveals: Implementing dramatic, weighted motion to highlight new functionality, ensuring users pause and acknowledge significant updates.
- Interactive Storytelling: Guiding users through narrative-driven web experiences or tutorials where intentional pacing is required to absorb complex information.
- Achievement & Milestone Unlocks: Designing rewarding 'celebration' animations that use physical weight and personality to provide meaningful feedback for user accomplishments.
- Graceful Content Transitions: Replacing abrupt UI changes with smooth, 1-second cinematic reveals for section transitions in presentations or high-end landing pages.
| name | slow-800-1200ms |
|---|---|
| description | Use when building deliberate motion between 800-1200ms - dramatic reveals, loading sequences, storytelling moments where users should pause and absorb |
Slow Animations (800-1200ms)
At 800-1200ms, animation approaches cinematic territory. This is deliberate, intentional motion for moments that matter. Users are expected to stop and watch.
Disney Principles at Slow Speed
Cinematic Application
Squash & Stretch: Pronounced and characterful - 25-35% deformation tells stories. Objects have weight and personality.
Anticipation: Full theatrical wind-up - 200-300ms preparation. The audience knows something is coming.
Staging: Scene composition - think in terms of camera and stage. Clear visual hierarchy with entrance order.
Straight Ahead/Pose to Pose: Pose to pose essential - 4-6 key poses for 1 second of motion.
Follow Through: Extended overlap - different elements settle at clearly different times, 200-300ms of settling.
Slow In/Slow Out: Dramatic curves - strong ease-in creates weight, strong ease-out creates impact.
Arcs: Sweeping curves - motion paths are clearly curved, visible trajectories.
Secondary Action: Complex layering - multiple levels of supporting action enhance primary motion.
Timing: 48-72 frames at 60fps. Near-film quality frame counts.
Exaggeration: Theatrical - push proportions and motion for emotional impact.
Solid Drawing: Full dimensional transforms - parallax, depth, 3D rotation.
Appeal: Emotional connection - slow motion creates intimacy with the interface.
Easing Recommendations
/* Dramatic, weighted motion */
transition: all 1000ms cubic-bezier(0.16, 1, 0.3, 1);
/* Graceful entrance */
transition: all 900ms cubic-bezier(0.22, 1, 0.36, 1);
/* Heavy, impactful landing */
transition: transform 1100ms cubic-bezier(0.33, 1, 0.68, 1);
/* Elastic, memorable */
transition: all 1000ms cubic-bezier(0.68, -0.6, 0.32, 1.6);
Best Use Cases
- App launch sequences
- Major feature reveals
- Storytelling moments
- Error recovery animations
- Achievement unlocks
- Tutorial sequences
- First-run experiences
- Section transitions in presentations
- Loading state to content reveals
Implementation Pattern
@keyframes slowReveal {
0% {
opacity: 0;
transform: translateY(100px) scale(0.8);
}
60% {
opacity: 1;
}
100% {
transform: translateY(0) scale(1);
}
}
.slow-reveal {
animation: slowReveal 1000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Staggered sequence */
.sequence-item {
animation: slowReveal 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sequence-item:nth-child(n) {
animation-delay: calc(var(--index) * 150ms);
}
When NOT to Use
- Navigation between views (too slow)
- Repeated interactions (users get impatient)
- High-frequency actions
- Data-heavy interfaces
- Productivity tools
Key Insight
Slow animations demand attention as payment. Only use when the moment is worth the user's time. These animations create memories, not just feedback.