Continuous Loops
This teaches Claude to build animations that loop forever without looking janky. Loading spinners, pulsing buttons, skeleton screens, that sort of thing. It applies Disney's animation principles to code, which sounds precious but actually works. The timing table is useful: 700ms for spinners, 2 seconds for pulses, 3-4 seconds for ambient stuff. The main value is the seamless loop advice and performance rules. It reminds Claude to use transform and opacity only, respect prefers-reduced-motion, and make sure the last frame flows into the first. Good for anyone building UI that needs to show loading or processing states without driving users insane.
- skills.sh installs
- 542
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill continuous-loops --agent claude-codeInstalls into .claude/skills of the current project.
Files
Continuous Loop Animations
Apply Disney's 12 principles to animations that never stop.
Principle Application
Squash & Stretch: Subtle scale oscillation (0.98-1.02) creates organic breathing. Avoid rigid mechanical loops.
Anticipation: Build anticipation into the loop cycle. Brief pause at extremes before reversing.
Staging: Loops should support, not dominate. Keep amplitude subtle for background elements.
Straight Ahead vs Pose-to-Pose: Design keyframe poses that loop seamlessly. End frame must flow into start frame.
Follow Through & Overlapping: Multi-part loops have elements at different phases. Three dots pulse with 120° phase offset.
Slow In/Slow Out: Use ease-in-out for smooth oscillations. Linear motion looks mechanical.
Arcs: Circular motion follows true arcs. Spinners rotate, pendulums swing, orbits circle.
Secondary Action: Primary rotation + secondary wobble. Spinner spins while slightly bouncing.
Timing:
- Fast loops: 500-800ms (spinners, urgent indicators)
- Medium loops: 1000-2000ms (pulsing, breathing)
- Slow loops: 2000-4000ms (ambient, background)
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- Lists Grids542
- Urgency Action542
- User Feedback Clarity542
- Power Confidence540
- Feedback Indicators539
- Universal Patterns539
- Continuous Infinite535
- Emotional Disconnect534
- Problem Diagnosis534
- Responsive Adaptive534
- State Changes534
- Popmotion533
- Professionalism Credibility533
- Comfort Safety532
- Implementation Debugging532
- Technical Constraints532
- Friendliness Approachability531
- Motion Sickness531
- Large 500 800ms530
- Medium 300 500ms530
- Universal Industry530
- Trust Reliability529
- Deliberate 1200 2000ms528
- Product Manager528
Recommended
More Design & UI/UX
universal-patternsdylantarre/animation-principlesUse when creating any animation type - provides foundational timing, easing, and principle application that applies to all motion in interfaces.539skills.sh installscontinuous-infinitedylantarre/animation-principlesUse when building ongoing loop animations - loading states, ambient motion, background effects that run indefinitely without user fatigue535skills.sh installsproblem-diagnosisdylantarre/animation-principlesUse when animation "feels wrong" but you can't pinpoint why—debugging floaty movement, stiff characters, unclear action, or any motion that isn't working and ne534skills.sh installsslow-800-1200msdylantarre/animation-principlesUse when building deliberate motion between 800-1200ms - dramatic reveals, loading sequences, storytelling moments where users should pause and absorb520skills.sh installs
governanceplugin87/ux-ui-agent-skillsGovern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user 516skills.sh installs
usability-psychologistmae616/design-skillsEvaluate UI/flows from cognitive load, error prevention, and accessibility perspectives. Apply when reviewing UX, discussing user confusion, high drop-off, or f259skills.sh installs