القائمة
Use when creating animations that soothe users, reduce anxiety, or create peaceful, meditative experiences.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/dylantarre/animation-principles --skill calm-relaxationيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى 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 | calm-relaxation |
| description | Use when creating animations that soothe users, reduce anxiety, or create peaceful, meditative experiences. |
Create animations that soothe, settle, and create peaceful user experiences.
Calm emerges from slow, gentle, predictable motion. Relaxation comes from animations that breathe, flow naturally, and never demand attention or create tension.
Very subtle (2-5%). Gentle breathing or pulsing rather than bouncing. Soft, organic deformation like clouds or water.
Long, gradual preparation (200-400ms). Slow builds create no surprises. Everything telegraphed well in advance.
Soft focus, ambient positioning. No aggressive attention-grabbing. Elements share space harmoniously without competition.
Gentle, organic flow for ambient animations. Drifting clouds, floating particles, subtle gradients—natural randomness.
Extended, graceful follow-through. Long settling times (500ms+). Elements drift to rest like leaves on water.
Heavy easing on both ends. Very gradual acceleration and deceleration. cubic-bezier(0.4, 0, 0.6, 1) for smooth, gentle motion.
Wide, sweeping curves. Gentle parabolas. Motion should flow like water or wind—never angular or abrupt.
Ambient, background motion. Subtle parallax, gentle floating elements. Supporting motion that doesn't demand attention.
Slow and deliberate (400-800ms+). Long durations feel meditative. No quick movements. Breathing rhythm: 4-6 seconds per cycle.
Minimal to none. Realistic, natural movements. Subtlety is calming; exaggeration creates tension.
Soft edges, rounded forms. No sharp angles. Organic shapes that feel natural and comfortable.
Soft colors, low contrast. Gentle gradients. Rounded shapes. Natural, organic aesthetics.
| Element | Duration | Easing |
|---|---|---|
| Fade transitions | 400-600ms | ease-in-out |
| Floating elements | 3000-5000ms | ease-in-out |
| Breathing pulse | 4000-6000ms | ease-in-out |
| Parallax drift | 800-1200ms | ease-out |
--calm-gentle: cubic-bezier(0.4, 0, 0.6, 1);
--calm-float: cubic-bezier(0.37, 0, 0.63, 1);
--calm-breathe: cubic-bezier(0.45, 0, 0.55, 1);
@keyframes calm-breathe {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.02);
opacity: 1;
}
}
.breathing-element {
animation: calm-breathe 5s ease-in-out infinite;
}