Claude Code can write GSAP, Motion and Three.js. What it can't do on its own is make motion feel premium. Describe an effect from scratch and it animates from the average of everything it has seen, which is why the result looks generic, bouncy or template-like. So don't start from a description. Start from finished motion.
The quickest way to do step 2 is Subframe's Motion MCP: a library of open-source React animations, Motion components and WebGL shaders that Claude Code can use directly. It's free, needs no account, and also works in Codex and Cursor. If all you need is a few fades, skip it; CSS and a clear spec are enough.
Ask Claude Code for "smooth scroll animations like Apple" and you get the same handful of moves on every site: everything fades up, every card lifts on hover, every heading slides in. Nothing is wrong with the code. The problem is that "like Apple" isn't a spec, so the model fills the gap with the most common answer.
The sites you're trying to match feel expensive for the opposite reason. They animate less, and what moves is choreographed: one strong hero entrance, small hover feedback, a few scroll moments that tell a story. The timing is deliberate and the same motion language runs through the whole page.
You can get there two ways. Learn motion design until you can write that spec yourself, or hand the agent motion that already has those choices made and let it adapt it to your page. The second is faster, and it's how most builders without a motion background get results they're happy with.
Don't pick one library for the whole site. Pick per effect, and avoid loading two libraries that do the same job.
| Effect you want | Use | Why |
|---|---|---|
| Hover states, button feedback, simple fades | CSS transitions | No library, nothing to load |
| Entrances, layout changes, gestures in a React or Next.js app | Motion for React (previously Framer Motion) | Animations tie directly to state and props |
| Scroll storytelling: pinned sections, scrubbing, horizontal scroll, timelines | GSAP with ScrollTrigger | Built to scrub, pin and snap anything tied to scroll |
| Real 3D: objects, particles, scenes | Three.js, or React Three Fiber in React | WebGL scenes the other tools can't draw |
| Shader effects: liquid, chrome, distortion | WebGL shaders | The "how did they do that" backgrounds on award sites |
Tell Claude Code your stack up front ("Next.js, Tailwind, Motion for interface motion, GSAP only for the scroll story") so it doesn't mix approaches.
This is the step most guides skip. Instead of describing an effect and hoping, give the agent a working example to adapt to your content.
Subframe's Motion MCP. Subframe keeps an open-source motion library at subframe.com/motion: React animations, Motion components and WebGL shaders, built for agents to use. The Motion MCP gives Claude Code direct access to the library, with no account needed. In Claude Code:
claude mcp add --transport http subframe-motion https://mcp.subframe.com/motion/mcpThen prompt with intent, not adjectives: "Find a scroll-driven image reveal in the Subframe motion library and adapt it to the case studies section." The same Motion MCP works in Codex and Cursor. If you already use the Subframe MCP, the motion tools are included.
Skills for API correctness. GSAP publishes official AI skills that teach coding agents how to use GSAP correctly, with plugin folders for Claude Code and Cursor. For 3D, Three.js skills such as threejs-fundamentals give Claude Code working scene, camera and renderer setup, so it stops producing a black canvas. Motion offers its own skill and MCP for its API.
Skills and docs make the code correct. A library of finished motion makes it look good. You want both.
Pick two or three sites whose motion you like, from Awwwards, a competitor, or the library itself. Watch them slowly and write down what you see in numbers, then put that in your prompt or your project's CLAUDE.md:
That turns "make it feel premium" into instructions Claude Code can follow, and it keeps every section speaking the same motion language.
Motion only shows up when it runs. A screenshot of a scroll animation tells Claude Code nothing, and one giant prompt for the whole page makes problems hard to find.
Build the hero first. Run the dev server, scroll it, hover it, resize it to phone width. Then tell Claude Code exactly what's off in the same terms as your spec ("the heading arrives too late; cut the delay in half"). Move to the next section only when this one feels right.
Before you ship:
transform and opacity wherever you can, rather than layout properties like top or height, so animations stay smooth.prefers-reduced-motion check, so people who turn motion off in their system settings get a calm version.The guides that rank for this each teach one route: an AI video hero with GSAP, a Three.js skill stack, or a set of prompt templates. They all have Claude Code build effects from a description. That's the root of the generic look. Giving the agent finished, curated motion to adapt, then checking it running and tuning it, is what closes the gap between "AI-made" and "award site", and it works for any effect, not just one.
Yes, if you give it more than a description. Pick the right tool for each effect, give it a finished example to adapt (for example from the Subframe Motion MCP), and write a short spec of timing and distance taken from the site you admire.
Use CSS for simple hovers, Motion for React interface motion and GSAP with ScrollTrigger for scroll storytelling and timelines. AOS is fine for basic scroll reveals but limited for anything custom.
Animate less, keep distances small, use one smooth easing curve, stagger related elements and reuse the same values everywhere. Bounce reads as template-like unless the brand calls for it.
Yes. Install a Three.js skill such as threejs-fundamentals first so it gets scene setup right, and build the scene in layers: geometry, then materials, then animation.
No. The Motion MCP at https://mcp.subframe.com/motion/mcp works without an account in Claude Code, Codex and Cursor.
Browse open-source React animations, Motion components and WebGL shaders at subframe.com/motion, then add the Motion MCP to Claude Code and let it adapt the ones you like to your site.
