playfulness-fun
Use when creating animations that entertain, engage with humor, or create lighthearted interactive experiences.
When & Why to Use This Skill
This Claude skill empowers designers and developers to create engaging, high-energy animations that prioritize user delight and brand personality. By leveraging classic Disney animation principles—such as squash and stretch, anticipation, and exaggeration—it provides specific CSS easing functions, timing recommendations, and motion patterns. It is designed to transform static interfaces into lighthearted, interactive experiences that entertain and surprise users through expressive, character-driven movement.
Use Cases
- Gamification & Rewards: Implementing bouncy 'boing' effects and celebratory sparkles to enhance user achievement moments.
- Interactive Onboarding: Using whimsical, character-like motions to guide new users through tutorials in a friendly and approachable manner.
- Social Media & Reactions: Creating expressive, elastic animations for 'like' buttons, emojis, and feedback loops to increase engagement.
- Empty State Engagement: Adding playful 'wiggle' or 'wobble' animations to empty dashboards or 404 pages to reduce user frustration.
- Micro-interactions & Easter Eggs: Designing hidden, surprise animations triggered by specific gestures to create memorable 'delight' moments within an app.
| name | playfulness-fun |
|---|---|
| description | Use when creating animations that entertain, engage with humor, or create lighthearted interactive experiences. |
Playfulness & Fun Animation
Create animations that entertain, surprise, and make interactions genuinely enjoyable.
Emotional Goal
Playfulness invites interaction through unexpected, whimsical motion. Fun comes from animations that have personality, respond expressively, and make users smile.
Disney Principles for Playfulness
Squash & Stretch
Generous, exaggerated (25-40%). Rubbery, cartoon physics. Objects should feel alive and reactive. Bounce like a beach ball.
Anticipation
Exaggerated wind-ups (150-250ms). Comic timing—big preparation for big payoff. Elements "think" before acting.
Staging
Theatrical presentation. Clear setup and punchline. Give playful moments room to breathe and be noticed.
Straight Ahead Action
Embrace spontaneity. Wobbly paths, unpredictable bounces. Characters and elements with minds of their own.
Follow Through & Overlapping Action
Extensive, bouncy follow-through. Overshoots, wobbles, and settling. Like a cartoon character skidding to a stop.
Slow In & Slow Out
Asymmetric with overshoot. Quick starts, bouncy landings. cubic-bezier(0.68, -0.55, 0.265, 1.55) for elastic effect.
Arc
Exaggerated, bouncy curves. High arcs for jumps. Squiggly paths for personality. Nothing moves in straight lines.
Secondary Action
Abundant! Wiggles, sparkles, expressions. Elements react to each other. The whole interface feels alive.
Timing
Varied and expressive (100-500ms). Quick snaps, slow anticipation. Comic timing with beats and pauses.
Exaggeration
High (30-50%). Push movements to cartoon levels. Impossible physics that feel emotionally true.
Solid Drawing
Maintain appeal through deformation. Stretched elements stay charming. Volume shifts for effect.
Appeal
Round, friendly shapes. Bright, saturated colors. Big eyes, expressive forms. Character in everything.
Timing Recommendations
| Element | Duration | Easing |
|---|---|---|
| Bounce | 400-600ms | spring(1, 60, 8) |
| Wiggle | 300-400ms | ease-in-out |
| Pop | 150-250ms | ease-out-back |
| Squash | 100-150ms | ease-out |
CSS Easing
--play-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--play-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
--play-wobble: cubic-bezier(0.45, 0.05, 0.55, 0.95);
Fun Animations
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
@keyframes boing {
0% { transform: scale(1); }
30% { transform: scale(1.25, 0.75); }
50% { transform: scale(0.85, 1.15); }
70% { transform: scale(1.05, 0.95); }
100% { transform: scale(1); }
}
When to Use
- Games and gamification
- Children's interfaces
- Social media reactions
- Onboarding tutorials
- Empty states
- Easter eggs
- Casual apps
- Entertainment platforms