Calm Relaxation
If you're building meditation apps, healthcare interfaces, or anything that needs to feel gentle and undemanding, this gives you the timing and easing curves to pull it off. Think 4-6 second breathing cycles, minimal squash and stretch (2-5%), and long settling times that make elements drift to rest like leaves on water. The CSS easing functions and duration tables are immediately useful, and the principle-by-principle breakdown keeps you from accidentally introducing tension through quick movements or aggressive staging. It's opinionated about what calm actually means in motion: slow, predictable, organic, with heavy easing on both ends.
- skills.sh installs
- 566
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill calm-relaxation --agent claude-codeInstalls into .claude/skills of the current project.
Files
Calm & Relaxation Animation
Create animations that soothe, settle, and create peaceful user experiences.
Emotional Goal
Calm emerges from slow, gentle, predictable motion. Relaxation comes from animations that breathe, flow naturally, and never demand attention or create tension.
Disney Principles for Calm
Squash & Stretch
Very subtle (2-5%). Gentle breathing or pulsing rather than bouncing. Soft, organic deformation like clouds or water.
Anticipation
Long, gradual preparation (200-400ms). Slow builds create no surprises. Everything telegraphed well in advance.
Staging
Soft focus, ambient positioning. No aggressive attention-grabbing. Elements share space harmoniously without competition.
Straight Ahead Action
Gentle, organic flow for ambient animations. Drifting clouds, floating particles, subtle gradients—natural randomness.
Follow Through & Overlapping Action
Extended, graceful follow-through. Long settling times (500ms+). Elements drift to rest like leaves on water.
Slow In & Slow Out
Heavy easing on both ends. Very gradual acceleration and deceleration. cubic-bezier(0.4, 0, 0.6, 1) for smooth, gentle motion.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Joy Delight566
- Attention Grabbers565
- Brand Consistency565
- Timing Principle Mastery565
- Micro 100 200ms564
- Exaggeration Mastery562
- Performance Optimization562
- React Spring562
- Enterprise B2b558
- Cards Containers557
- Orchestrated Sequences557
- Universal Emotion556
- Loaders Spinners554
- Forms Inputs553
- Secondary Action Mastery551
- Social Media551
- Attention Management550
- Brand Strategist548
- Exit Animations547
- Exaggerated Clarity546
- Accordions Dropdowns545
- Straight Ahead Pose Mastery543
- Timing Calibration543
- Continuous Loops542
Recommended
More Design & UI/UX
enterprise-b2bdylantarre/animation-principlesUse when designing animations for enterprise software, B2B platforms, admin dashboards, or corporate applications558skills.sh installs
prototypeadobe/skillsRender a proposed redesign of a page on the current website as a self-contained static HTML file, then iterate via the impeccable craft loop. Per-page, idempote555skills.sh installsstraight-ahead-pose-masterydylantarre/animation-principlesUse when planning animation workflows, deciding between spontaneous vs controlled approaches, or balancing creative freedom with structural precision.543skills.sh installs
brand-guidelinesbillevansonline/brand-guidelinesApplies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand color542skills.sh installsfeedback-indicatorsdylantarre/animation-principlesUse when confirming user actions - success checkmarks, error alerts, form validation, save confirmations, or any animation acknowledging what the user did.539skills.sh installsemotional-disconnectdylantarre/animation-principlesUse when animation feels wrong, creates unintended emotional response, or mismatches context534skills.sh installs