dylantarre/animation-principles

playfulness-fun

Use when creating animations that entertain, engage with humor, or create lighthearted interactive experiences.

사용 방법

설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.

npx skills add https://github.com/dylantarre/animation-principles --skill playfulness-fun

시작 전 확인

설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.

원본 Skill 문서

원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.

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

css

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

css

@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); }
}