AutoAnimate
01One line of code that animates list changes for you.
excellent agent friendlinessPackageFreeOpen sourceStaff pick
All collections
Collection 8 resources
Motion resources worth knowing
From a one-line list animation to full scroll-driven 3D, in order of effort.
Motion is where agent-built sites most often go wrong, in both directions: nothing moves, or everything does. Start at the top of this list and stop when it feels right. Most products never need to go past the first four.
For agents: this collection as markdown
AutoAnimate NumberFlow 
NumberFlow
02Animated number transitions that make counters, prices and stats feel expensive.
excellent agent friendlinessPackageFreeOpen sourceGSAP GSAP
03The professional-grade animation toolkit, now free including all plugins.
excellent agent friendlinessPackageFreeStaff pickLenis 
Lenis
04Smooth scrolling that doesn't fight the browser.
excellent agent friendlinessPackageFreeOpen sourceReact Three Fiber 
React Three Fiber
05Three.js as React components, with a huge helper ecosystem.
excellent agent friendlinessPackageFreeOpen sourceShaderGradient 
ShaderGradient
06Slow-moving 3D gradients for React, Framer and Figma that look like expensive motion design.
excellent agent friendlinessPackageFreeOpen sourceThinking Orbs 
Thinking Orbs
07An animated orb that shows what your AI is doing: listening, thinking, searching, working.
excellent agent friendlinessPackageFreeStaff pickLiquid Logo 
Liquid Logo
08Drop in your logo and get it back as flowing liquid metal, rendered live with shaders.
good agent friendlinessToolFreeStaff pick