Continuous Infinite
This is your reference when building animations that loop forever without driving users crazy. It walks through how to apply Disney animation principles to loading spinners, ambient backgrounds, and breathing UI elements. The real value is in the specific guidance: use prime number durations so elements don't sync up, keep motion subtle (5-10% oscillation), and treat continuous animation as atmosphere rather than something users should consciously notice. Includes timing recommendations for different contexts (800ms for spinners, 5-15 seconds for background effects) and easing functions that create seamless loops. The anti-pattern list alone will save you from common mistakes like synchronizing everything or animating during user input.
- skills.sh installs
- 535
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill continuous-infinite --agent claude-codeInstalls into .claude/skills of the current project.
Files
Continuous Animations (Infinite)
Infinite animations run without end state. They indicate ongoing processes, create ambient atmosphere, or provide persistent visual interest. The challenge: avoiding fatigue.
Disney Principles for Continuous Motion
Sustainable Application
Squash & Stretch: Subtle, rhythmic - 5-10% oscillation that doesn't demand attention. Breathing, not bouncing.
Anticipation: Built into loop - each cycle should flow naturally into the next without visible restart.
Staging: Background hierarchy - continuous motion must not compete with interactive elements.
Straight Ahead/Pose to Pose: Pose to pose for seamless loops - endpoint must match startpoint perfectly.
Follow Through: Wave propagation - elements should move in sequence, creating natural flow.
Slow In/Slow Out: Smooth, endless curves - no sharp accelerations that call attention.
Arcs: Circular, orbital paths - return to origin naturally. Figure-8s, ellipses, waves.
Secondary Action: Layered ambient motion - multiple elements at different speeds create depth.
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- 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
- Small 200 300ms528
- Universal Elements528
- Universal Practitioner527
- Universal Solutions527
- Universal Tool527
- Accessibility Issues525
- Universal Fallback525
Recommended
More Design & UI/UX
problem-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
critiquenexu-io/open-designRun a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–255skills.sh installssimple-decknexu-io/open-designSingle-file horizontal-swipe HTML deck. Built by copying the seed `assets/template.html` (which carries the proven 5-rule iframe nav script) and pasting slide l242skills.sh installs