Comfort Safety
This gives you animation guidelines grounded in Disney principles but adapted for interfaces where users need to feel secure. You get specific timing ranges (300-450ms for most transitions), custom easing curves, and keyframe patterns for common reassurance scenarios like confirmations and protective reveals. The approach is intentionally gentle: minimal squash and stretch, no surprises, soft landings on everything. Use it when you're building financial apps, healthcare tools, or anything involving passwords and sensitive data where sudden motion would feel wrong. The constraint against exaggeration and unpredictability is the real discipline here, it forces you to communicate safety through consistency rather than flashiness.
- skills.sh installs
- 532
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill comfort-safety --agent claude-codeInstalls into .claude/skills of the current project.
Files
Comfort & Safety Animation
Create animations that reassure, protect, and make users feel secure.
Emotional Goal
Comfort comes from predictable, gentle motion that never startles. Safety means animations that communicate protection, stability, and user control.
Disney Principles for Comfort
Squash & Stretch
Minimal, soft (5-10%). Gentle give without instability. Like a cushion—absorbs impact, maintains structure.
Anticipation
Clear, reassuring preparation (150-200ms). Users always know what's coming. No surprises, no hidden actions.
Staging
Enclosed, protected compositions. Clear boundaries. Safe spaces. Visual hierarchy that guides without overwhelming.
Straight Ahead Action
Avoid. Safety requires predictability. Every movement should be controlled and expected.
Follow Through & Overlapping Action
Gentle, cushioned settling. Soft landings. Elements ease into place like being tucked in.
Slow In & Slow Out
Smooth, gentle curves throughout. No sudden changes. ease-in-out for predictable, comfortable motion.
Arc
Soft, natural curves. Cradling, embracing paths. Motion that wraps around rather than cuts through.
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
- Categories
- Security, Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Implementation Debugging532
- Technical Constraints532
- Friendliness Approachability531
- Motion Sickness531
- Large 500 800ms530
- Medium 300 500ms530
- Universal Industry530
- Trust Reliability529
- Deliberate 1200 2000ms528
- Product Manager528
- Small 200 300ms528
- Universal Elements528
- Universal Practitioner527
- Universal Solutions527
- Universal Tool527
- Accessibility Issues525
- Universal Fallback525
- Instant 0 100ms524
- Ux Friction524
- Media Publishing521
- Slow 800 1200ms520
- Universal Mindset519
- Universal Timing519
- Animation Principles Absolute Beginner
Recommended
More Security
release-reviewrshankras/claude-code-apple-skillsSenior developer-level release review for macOS/iOS apps. Identifies security, privacy, UX, and distribution issues with actionable fixes. Use when preparing an529skills.sh installs
pinme-authglitternetwork/pinmeUse when a PinMe project (Worker TypeScript) needs to integrate user authentication — creating email/password users, verifying id_tokens, querying user info, or511skills.sh installs
raindrop-apiintellectronica/agent-skillsThis skill provides comprehensive instructions for interacting with the Raindrop.io bookmarks service via its REST API using curl and jq. It covers authenticati507skills.sh installs
react-doctorposthog/posthogDiagnose and fix React codebase health issues. Use when reviewing React code, fixing performance problems, auditing security, or improving code quality.507skills.sh installsgeneratorsrshankras/claude-code-apple-skillsCode generator skills that produce production-ready Swift code for common app components. Use when user wants to add logging, analytics, onboarding, review prom505skills.sh installs
code-reviewjwynia/agent-skillsProvide structured code review guidance for catching defects and improving quality. This skill should be used when the user asks to 'review this code', 'check f504skills.sh installs