القائمة
Use when creating animations that feel warm, welcoming, and make users feel comfortable engaging.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/dylantarre/animation-principles --skill friendliness-approachabilityيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى 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.
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| name | friendliness-approachability |
| description | Use when creating animations that feel warm, welcoming, and make users feel comfortable engaging. |
Create animations that welcome users and make interfaces feel warm and inviting.
Friendliness comes from gentle, welcoming motion that doesn't intimidate. Approachability means animations that invite interaction and make users feel comfortable.
Moderate, soft deformation (10-20%). Enough to feel alive without being cartoonish. Like a friendly handshake—warm but appropriate.
Gentle preparation (100-150ms). Friendly motion telegraphs intention without startling. A small "hello" before action.
Open, inviting compositions. Elements arranged to welcome, not confront. Clear pathways into the interface.
Light spontaneity for personality. Subtle variations that feel human and approachable rather than mechanical.
Soft, natural settling. A gentle bounce or two. Like a friend sitting down beside you—relaxed, not rigid.
Smooth, approachable curves. No sharp accelerations. ease-out for welcoming entrances that arrive gently.
Natural, relaxed curves. Motion that feels human—not robotic straight lines, not exaggerated bounces.
Warm supporting gestures. A subtle wave, a gentle nod. Elements acknowledge user presence.
Moderate, comfortable (200-350ms). Not rushed, not sluggish. Conversational pacing that feels natural.
Mild (10-20%). Enough personality to feel warm without being overwhelming. Relatable, not theatrical.
Soft, rounded forms. Approachable proportions. Nothing sharp or intimidating.
Warm colors, rounded corners. Friendly faces when appropriate. Inviting, accessible aesthetics.
| Element | Duration | Easing |
|---|---|---|
| Welcome fade | 250-350ms | ease-out |
| Slide in | 300-400ms | ease-out |
| Hover response | 150-200ms | ease-out |
| Expand/reveal | 250-350ms | ease-in-out |
--friendly-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
--friendly-enter: cubic-bezier(0.0, 0, 0.2, 1);
--friendly-bounce: cubic-bezier(0.34, 1.3, 0.64, 1);
@keyframes friendly-wave {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(14deg); }
40% { transform: rotate(-8deg); }
60% { transform: rotate(10deg); }
80% { transform: rotate(-4deg); }
}
@keyframes friendly-appear {
from {
opacity: 0;
transform: scale(0.95) translateY(8px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}