The 3 Website Motion Tools and the Claude Code Prompt That Adds Them

Claude can build a website. It just doesn't know how it should move. Here are the 3 free tools that fix that, what each one does, and the one prompt that hands them to Claude Code.

A free guide by Zach Crawford

Most people ask Claude to "make my website look better." It guesses. New colors, softer shadows, maybe a little graphic that loops forever. Nothing moves as you scroll.

Claude can build a website. It just doesn't know how it should move. That's the gap between a site that looks like AI and one that looks designed.

Give it these 3 tools and tell it where you want the motion.

Before you start

This works on a site that's code you can open in a folder on your computer: plain HTML files, or a React or Next.js project. If Claude Code built your site, you have that.

If your site lives on Wix, Squarespace, Kajabi or Stan, read the part near the end first.

Tool 1. GSAP

The animation tool the pros use. Things slide, fade and stick as you scroll. A heading fades up as you reach it. A photo slides in from the side. A section holds still on the screen while you scroll past it.

Free to use, business sites included. Webflow owns it now and made the whole thing free, plugins too. The part that runs the scroll moves is called ScrollTrigger. It comes with GSAP.

Link: https://gsap.com

Tool 2. Lenis

Smooth scrolling. The whole page glides instead of jumping. It makes the site feel expensive.

It's free, open source and tiny. It works hand in hand with GSAP, so the moves stay in step with the scroll. On phones and tablets it leaves normal touch scrolling alone, so the glide is something you feel with a mouse or trackpad.

Link: https://lenis.dev

Tool 3. React Bits

A free library of ready-made animations: moving text, backgrounds, buttons. Over 200 of them. You pick one on the site, watch it move, and grab the code.

One catch. They're built for React. If your site runs on React or Next.js, it's copy, paste, done. If it's plain HTML, don't let Claude add React just for one effect. Use React Bits as a menu: find the look you like, give Claude Code its link, and it builds that look with GSAP. The prompt below sets that up.

Free for your own sites, business ones included. You just can't resell the pieces.

Link: https://reactbits.dev

Step 1. Hand it to Claude Code

Open Claude Code in your website's folder and paste this. The 3 links are already in it. It looks at your files first, asks you a few questions, then adds the motion.

The rule that matters most: one or two moves per section. More looks cheap.

I want to add motion to my website with these 3 free tools:
GSAP (scroll animations): https://gsap.com
Lenis (smooth scrolling): https://lenis.dev
React Bits (ready-made animations): https://reactbits.dev

Before you change anything:
1. Look at the files in this folder. Tell me in plain words what my site is built with and which pages you found.
2. Then ask me these in one message, and wait for my answers:
- What is the site, and who is it for?
- Which page should we start with?
- What feel do I want? (For example: calm and premium, bold and fast, warm and friendly.)
- Is there anything you should leave alone?

When I answer, add the motion to that page with these rules:
- Keep it light. One or two moves per section, at most. Nothing that loops forever, and nothing that moves while someone is reading. Buttons, links and forms must work right away.
- Use GSAP and its ScrollTrigger plugin for things that slide, fade or stick as you scroll. Use Lenis for smooth scrolling, set up to work with ScrollTrigger, and make sure my menu links still take people to the right section.
- React Bits: if my site is built with React or Next.js, use at most one or two of its pieces that fit the feel. If it isn't, don't add React just for this. Treat React Bits as a menu of looks, and build the one you pick with GSAP, or skip it.
- Load the tools from their official links. Check each tool's site for the current link before you use it. If my site uses npm, add them as packages to this project. Never install anything globally on my computer.
- Don't change my words. No new headlines, testimonials, numbers, stats or claims. If you think a section needs new text, tell me. Don't write it.
- Respect people who turn motion off. If their device is set to reduce motion, there's no smooth scrolling and nothing slides or fades. They see the finished page right away.
- Everything must still show if the scripts don't load. Don't hide anything in the CSS that only the animation brings back.
- Before you change the page, save a copy of it as it is now, so I can compare or go back.

When you're done:
- Tell me what moves, section by section, in plain words.
- Check the page still loads fast: the tools load after the page content, nothing blocks the text from showing, and tell me how much the tools add to the page size.
- Tell me how to see it, and how to turn on reduce motion on my computer to check that version.

When it asks, answer in your own words. "Calm and premium" or "bold and fast" is plenty for the feel.

Found a React Bits look you like? Once it's done, paste that look's link and say where it goes, like "put this on my main headline."

Step 2. Check it yourself

Open the page and scroll slowly, top to bottom. Then check 3 things.

• It all still works. Click your main button, use the menu, fill in the form.
• Your words are still yours. Read the page. If Claude changed a line, ask it to put yours back.
• It works with motion off. On a Mac: System Settings, Accessibility, Display, Reduce motion. On Windows: Settings, Accessibility, Visual effects, then turn Animation effects off. Load the page again. It should show up finished, with nothing sliding.

Then look at it on your phone.

If a move feels like too much, it is. Tell Claude Code "take the motion off the [section name]".

If your site is on Wix, Squarespace, Kajabi or Stan

The prompt needs your site's code in a folder on your computer. These builders keep the code on their side, so Claude Code can't open your pages and change them.

Here's what you can and can't do.

• Squarespace, Wix and Kajabi each have a box where you can paste your own code. On Squarespace that's the Core, Plus and Advanced plans. On Wix the site has to be published on your own domain. Claude Code can write a small piece for you to paste in, like a fade-in on one section or Lenis smooth scrolling for the whole site. It can't see your page, so expect some back and forth. Squarespace says plainly its support team won't help with custom code.
• Stan builds your page from its own blocks, and its help center has nothing on adding your own code. Leave this one alone.
• React Bits pieces won't paste into any of them. They need React.
• The bigger move: have Claude Code build the one page that matters most, like your home page or a sales page, as a real coded page. Keep the builder for checkout and the rest. Then run the prompt on that page.

The limits, honestly

• Motion won't fix a page that says the wrong thing. Get the words right first.
• Every tool adds weight. GSAP, its scroll plugin and Lenis add about 50 KB together. That's small, but check speed again after you add anything else.
• A move on the very first thing people see can flicker on a slow connection, because your words show before the tools load. That's the price of a page that shows up fast. Keep the top of the page still, or keep that move small.
• React Bits is built for React. On a plain HTML site, Claude Code builds the look with GSAP instead, which takes more back and forth than copy and paste.
• GSAP is free under its own license from Webflow, not an open source one. The only thing it rules out is building a no-code animation tool that competes with Webflow. React Bits is free on your own sites, but you can't sell its pieces.
• Claude Code can't see the motion. It writes the code and checks it. You're the one who scrolls the page and decides if it feels right.

Want the next guide? Follow @iamzachcrawford