Instant 0 100ms
This is for those moments when you need UI feedback to feel immediate, not animated. Button presses, toggles, checkboxes, anything under 100ms where users shouldn't consciously see motion, just feel responsiveness. The guidance here is smart about what actually works at instant speeds: subtle scale changes (0.95-1.05), ease-out only, linear paths, skip anticipation and follow-through entirely. It's basically telling you that most animation principles don't apply when you're working in 1-3 frames at 60fps. The key insight is right: at this speed you're confirming actions, not communicating through motion. Use this when perceived performance matters more than fancy transitions.
- skills.sh installs
- 524
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill instant-0-100ms --agent claude-codeInstalls into .claude/skills of the current project.
Files
Instant Animations (0-100ms)
Animations under 100ms feel instantaneous to users. This duration is for immediate feedback that confirms actions without perceived delay.
Disney Principles at Instant Speed
Works Well
Squash & Stretch: Subtle - 2-5% compression on button press creates tactile feel without visible deformation.
Anticipation: Skip entirely - no time for preparation at this speed.
Staging: Minimal - rely on position/color change, not movement.
Straight Ahead/Pose to Pose: Straight ahead only - too fast for keyframe complexity.
Follow Through: None - motion completes before follow-through registers.
Slow In/Slow Out: Use ease-out only - starts at full speed, slight deceleration.
Arcs: Linear paths only - curves don't register at this speed.
Secondary Action: Skip - brain can't process multiple simultaneous instant changes.
Timing: 1-3 frames maximum. 60fps = 16.67ms per frame.
Exaggeration: Minimal - subtle scale (0.95-1.05) or opacity changes.
Solid Drawing: Focus on color/opacity shifts, not spatial transformation.
Appeal: Crisp, immediate response builds trust and perceived performance.
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
- Frontend Development, Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Ux Friction524
- Media Publishing521
- Slow 800 1200ms520
- Universal Mindset519
- Universal Timing519
- Animation Principles Absolute Beginner
- Animation Principles Advanced
- Animation Principles Deep Dive
- Animation Principles Expert
- Animation Principles Intermediate
- Animation Principles Master
- Animation Principles Novice
- Animation Principles Quick Start
- Animation Principles Refresher
- Animation Principles Teaching Others
- Animation Principles Troubleshooting
- Animation Principles Universal Reference
- Video Motion Graphics2.7K
- Mobile Touch2.4K
- Framer Motion1.8K
- Motion Designer1.7K
- Micro Interactions1.5K
- Web Motion Design1.4K
- Scroll Animations1.2K
Recommended
More Frontend Development
groove-work-docandreadellacorte/grooveCreate a 'how does X work' documentation file for a codebase component or concept. Use $ARGUMENTS as the doc topic if provided.518skills.sh installs
golang-grpcbobmatnyc/claude-mpm-skillsProduction gRPC in Go: protobuf layout, codegen, interceptors, deadlines, error codes, streaming, health checks, TLS, and testing with bufconn518skills.sh installs
hook-tacticsmotion-team/creative-strategy-skillsReference library of 35+ hook and headline tactic types. Use this when a user asks for hooks organized by tactic, wants to know which tactic to use for a given 518skills.sh installs
social-contentopenclaudia/openclaudia-skillsCreate and publish social media posts for Reddit, Twitter/X, LinkedIn, Instagram, Facebook, and TikTok. Platform-specific formats, character limits, hashtag str518skills.sh installs
canghe-infographicfreestylefly/canghe-skillsGenerates professional infographics with 20 layout types and 17 visual styles. Analyzes content, recommends layout×style combinations, and generates publication516skills.sh installs
xparse-parseintsig-textin/xparse-skillsParse PDFs, images, Office files, HTML, OFD, and other supported documents into Markdown or structured JSON through xparse-cli. Use when a user asks to read, co516skills.sh installs