playfulness-fun

该 Skill 面向需要幽默、轻松和互动感的界面动画，说明迪士尼动画原则在俏皮风格中的夸张幅度、节奏和弹性建议，并给出 CSS 缓动变量及 wiggle、boing 关键帧示例，适用于游戏、儿童界面、社交反馈、引导和空状态等场景。

dylantarre

热度 0.00

最近更新 2026-10-19 06:48:43

分类：创作依赖：纯提示词应用场景：UI 原型

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add dylantarre/animation-principles/playfulness-fun

Metadata

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