القائمة
Use when creating animations that entertain, engage with humor, or create lighthearted interactive experiences.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/dylantarre/animation-principles --skill playfulness-funيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.
Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.
Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | playfulness-fun |
| description | Use when creating animations that entertain, engage with humor, or create lighthearted interactive experiences. |
Create animations that entertain, surprise, and make interactions genuinely enjoyable.
Playfulness invites interaction through unexpected, whimsical motion. Fun comes from animations that have personality, respond expressively, and make users smile.
Generous, exaggerated (25-40%). Rubbery, cartoon physics. Objects should feel alive and reactive. Bounce like a beach ball.
Exaggerated wind-ups (150-250ms). Comic timing—big preparation for big payoff. Elements "think" before acting.
Theatrical presentation. Clear setup and punchline. Give playful moments room to breathe and be noticed.
Embrace spontaneity. Wobbly paths, unpredictable bounces. Characters and elements with minds of their own.
Extensive, bouncy follow-through. Overshoots, wobbles, and settling. Like a cartoon character skidding to a stop.
Asymmetric with overshoot. Quick starts, bouncy landings. cubic-bezier(0.68, -0.55, 0.265, 1.55) for elastic effect.
Exaggerated, bouncy curves. High arcs for jumps. Squiggly paths for personality. Nothing moves in straight lines.
Abundant! Wiggles, sparkles, expressions. Elements react to each other. The whole interface feels alive.
Varied and expressive (100-500ms). Quick snaps, slow anticipation. Comic timing with beats and pauses.
High (30-50%). Push movements to cartoon levels. Impossible physics that feel emotionally true.
Maintain appeal through deformation. Stretched elements stay charming. Volume shifts for effect.
Round, friendly shapes. Bright, saturated colors. Big eyes, expressive forms. Character in everything.
| 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 |
--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);
@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); }
}