A website that moves, built with Claude
Anyone can make a plain website. What makes people say “wow” is the motion. The trick: start from a ready-made animated template, and let Claude adapt it to your business.
Pick a template you like
Go to 21st.dev. It’s a gallery of ready-made, animated website components. Search for “hero” or “animated hero”: it’s the first section of a site, and the one that matters most.
- Browse, and keep the one whose mood fits your business.
- Open it and click the button that copies the code.
One template is enough to start. Don’t mix five: the site ends up looking like nothing.
Give it to Claude, with your business
Open a chat on claude.ai, copy this prompt, fill in the brackets, and paste the template’s code at the end.
Here is the code of a component I like. I want to use it as the base for the website of my [restaurant / salon / company…]. Convert it into simple HTML, CSS and JavaScript, in a single index.html file (no React, nothing to install). Keep its style and its animations. Replace the texts with mine: - name: [your name] - tagline: [one sentence] - services: [list] - contact: [phone, address, opening hours] Then add sections for services, customer reviews and contact. The site must look good on a phone. Here is the code: [paste the code here]
Why “no React”? A single HTML file goes online with a simple drag and drop. A React project needs an extra technical step.
Make it move
Once the base looks right, ask for scroll animations. This is what makes a site feel like it cost thousands.
Add scroll animations with GSAP and its ScrollTrigger plugin, loaded from a CDN in the same file. - titles slide in slightly from below - cards arrive one after the other - images reveal softly Keep it subtle: nothing should get in the way of reading. Turn the animations off for people who asked their device for reduced motion.
Then one last polish:
Improve the look: more space between sections, one font for titles and one for text, two main colors at most. Check how it displays on a small screen.
One request at a time. If a detail bothers you, say it in your own words: “the title is too big”, “I want more black”.
Put it online
Put the whole site in a zip file I can download.
- Download the zip Claude gives you.
- Open app.netlify.com/drop and drop the zip in.
- You get a link ending in
.netlify.app: that’s your site, online.
To change it later: ask Claude again, make a new zip, and drop it in the same place.
Frequently asked questions
Can I use the template as-is for a client?
Check the component’s terms of use before using it for a client. The safest way: use it as a starting point, then change the texts, colors and layout so the result is yours.
Claude doesn’t give me a zip
In Claude’s settings, turn on file creation. Otherwise ask “Give me the complete code in a single block”, paste it into a file named index.html, and drop that file on Netlify: it also accepts a single HTML file.
The animation doesn’t work
Tell Claude exactly that: “The scroll animations don’t trigger. Fix it.” It usually finds the error by itself.
Is it really free?
21st.dev, Claude and Netlify each have a free plan, with limits that may change. Only a custom domain name costs money.
Prefer to have it done for you?
A site designed to bring you customers, with a fixed price quoted before we start. Tell me about your business, I handle the rest.