---
title: Motion resources worth knowing
slug: motion-worth-knowing
url: "https://dontmakeitugly.com/collections/motion-worth-knowing"
resources:
  - autoanimate
  - number-flow
  - gsap
  - lenis
  - react-three-fiber
  - shadergradient
  - thinking-orbs
  - liquid-logo
createdAt: "2026-09-02"
updatedAt: "2026-09-03"
---

# 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.

## Resources, in order

1. [AutoAnimate](https://dontmakeitugly.com/resources/autoanimate.md) — One line of code that animates list changes for you.
   Agent: Excellent. Install: `npm install @formkit/auto-animate`
   The highest return on effort in this whole directory. Todo lists, filters, notifications, anything that adds or removes items, instantly feels polished.
2. [NumberFlow](https://dontmakeitugly.com/resources/number-flow.md) — Animated number transitions that make counters, prices and stats feel expensive.
   Agent: Excellent. Install: `npm install @number-flow/react`
   A tiny detail that makes dashboards, pricing toggles and stat counters feel like a premium product. Use it on numbers that actually change.
3. [GSAP](https://dontmakeitugly.com/resources/gsap.md) — The professional-grade animation toolkit, now free including all plugins.
   Agent: Excellent. Install: `npm install gsap`
   When you want the scroll-driven, cinematic stuff you see on Awwwards sites, this is the tool. It's more imperative than Motion, so it suits vanilla JS and complex sequences better than routine React UI.
4. [Lenis](https://dontmakeitugly.com/resources/lenis.md) — Smooth scrolling that doesn't fight the browser.
   Agent: Excellent. Install: `npm install lenis`
   Smooth scroll is easy to overdo. Lenis is the one implementation that feels good rather than sluggish. Keep the lerp subtle.
5. [React Three Fiber](https://dontmakeitugly.com/resources/react-three-fiber.md) — Three.js as React components, with a huge helper ecosystem.
   Agent: Excellent. Install: `npm install three @react-three/fiber @react-three/drei`
   If you're on React and want 3D, this is the way. The drei helpers are where the productivity is. Look at the examples gallery before you start.
6. [ShaderGradient](https://dontmakeitugly.com/resources/shadergradient.md) — Slow-moving 3D gradients for React, Framer and Figma that look like expensive motion design.
   Agent: Excellent. Install: `npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls`
   The good version of the animated-gradient hero. Keep the speed low and the colours close together and it reads as calm rather than loud. Check the compatibility notes: Next.js App Router needs React Three Fiber v9.
7. [Thinking Orbs](https://dontmakeitugly.com/resources/thinking-orbs.md) — An animated orb that shows what your AI is doing: listening, thinking, searching, working.
   Agent: Excellent. Install: `npm install thinking-orbs`
   Most agent-powered apps show a spinner or three dots while the model works. This is a better answer, and a rare example of motion designed for AI products rather than bolted on. Use one state per moment and keep the size modest.
8. [Liquid Logo](https://dontmakeitugly.com/resources/liquid-logo.md) — Drop in your logo and get it back as flowing liquid metal, rendered live with shaders.
   Agent: Good.
   One of the best examples of a single effect done with real craft. Use it for a launch page or a loading state, not for every logo on the site. The source is more valuable than the app: it shows how to wire a shader into a React app properly.

Work down the list in order. Each linked page says what the resource is, why it's here and how an agent can use it.