How to Build an Animated Website in Claude Code in an Evening

Learn more about working with models in the Ailoot documentation.

Why Is an AI-Built Website Obvious from the First Screen?#

You ask an agent to put together a landing page. Forty minutes later you have a working site: the sections are in place, it has a responsive layout, and the buttons work. And almost immediately you get the feeling you’ve seen it somewhere before.

The reason is mechanical. The model was trained on a huge collection of finished pages, and that collection had a strong bias.

Thousands of tutorials and starter templates copied the same default colors, skewing the sample, and the model learned that buttons are purple. The same mechanism applies to fonts, rounded corners, and shadows.

The “AI look” has changed in the meantime. In the documentation for its frontend-design skill, Anthropic describes different looks now.

The root problem: slop happens when there’s nothing specific to copy, and the model simply averages all web styles together.

“Slop” here means machine-generated work averaged into a generic result without a distinct style.

The practical takeaway is that the agent needs a narrow design grammar instead of an open-ended task. If you say “make it beautiful,” it takes the average. If you give it a specific palette, a couple of typefaces, and one defining visual device, it builds from those.

Motion is the most noticeable signal in this picture. Even a static page with perfect typography still reads like a template, because living websites breathe: elements appear as you scroll, the cursor changes things, and transitions between screens don’t break abruptly.

What Do You Need to Build an Animated Website in Claude Code?#

Let’s go through the tools one by one, because there’s a lot of confusion about pricing.

GSAP is the animation library behind a notable share of award-winning websites. Webflow bought it in October 2024, and rumors that everything had become free started almost immediately. That’s not quite right: at the time, Webflow confirmed that existing pricing would remain in place. The library became free in late April 2025 with version 3.13.

The 3.13 release specifically says that previously paid plugins such as SplitText and MorphSVG also became free, including for commercial use. The current version as of July 2026 is gsap@3.15.0.

Free doesn’t mean open source, though. The license remains proprietary and prohibits building a visual animation editor on GSAP that competes with Webflow. There are no restrictions on websites, client projects, or commercial work.

Anthropic’s frontend-design skill is a set of instructions that changes how the agent works on an interface. Its repository description says:

Inside is a two-pass method. First, the agent puts together a token system: four to six named colors, typefaces for at least two roles, a layout scheme in text sketches, and one defining visual device for the page. Then it critiques its own plan against the task. Only after that does it write code.

How Do You Get Claude Code to Stop Producing Templates?#

Let’s start with the rules file, because it takes effect on every request and costs nothing.

A useful starting point is a block of anti-template guardrails. The logic is simple: list the specific choices the model tends to drift toward by default, and prohibit them by name.

## Anti-Generic Guardrails

- Colors: Never use default Tailwind palette (indigo-500, blue-600).
  Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
  with a clean sans. Apply tight tracking (-0.03em) on large headings,
  generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
  Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
  and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).

The block is written in English intentionally: the model follows short technical instructions more accurately in the language of the documentation.

The animation line sits in the list of prohibitions alongside colors and shadows for a reason. Opacity on the first screen directly hurts the speed metric, as we’ll get to below.

Next, the skill. Anthropic’s official skills can be installed through the plugin:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

One detail: design skills can’t be installed individually; the example-skills plugin brings all twelve at once. If you only want one, copy the folder manually—Claude Code will pick it up without restarting the session:

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

Other skills in this collection that may be useful: theme-factory with ten ready-made themes and a required human confirmation before applying them, web-artifacts-builder for building in React with ready-made components, and algorithmic-art for generative graphics. A separate article explains in detail how to choose skills for a task: how to choose skills for Claude Code.

The rules and skill work together: the rules prohibit bad choices, and the skill imposes a process—system first, critique next, code last.

Everything important here happens before the request. You put the constraints the agent will build by into its context in advance, and the wording of the prompt itself barely matters anymore. This approach is called context engineering, and the CLAUDE.md file is its first building block.

How Do You Give an Agent Fresh GSAP Documentation in One Line?#

A common problem with animation libraries is that the agent remembers an outdated way of connecting them. It writes an import from an old path, registers a plugin the way it was done two years ago, and the code doesn’t run.

The fix is to put the documentation in the context yourself. GSAP provides it in a machine-friendly format:

https://gsap.com/llms.txt

The file is about 25 kilobytes as of today. Each documentation page is also available in a markdown version—just add .md to the URL.

In practice, it looks like this:

Read https://gsap.com/llms.txt and https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Then build one scene on the home page: the headline appears as you scroll
through the first screen, and the image on the right shifts more slowly than the text.
Use only transform and opacity. No transition-all.

The Motion library (formerly Framer Motion) has the same file, and it’s even larger. Motion is distributed under MIT and remains truly open source; the current version is motion@12.42.2. If the project is in React and only needs simple reveals, you can choose Motion; for complex scroll scenes, use GSAP with the ScrollTrigger plugin.

There are also browser-only options that don’t use libraries. Page state transitions via the View Transitions API entered baseline support on October 14, 2025—but only within a single page; the cross-page version is not supported in Firefox at all. CSS scroll animations have not yet entered baseline support: Chrome supports them, Safari learned them recently, but in Firefox you have to enable them manually in settings, so they simply won’t work for ordinary readers. Ask the agent to check first whether the browser supports them at all, and if not, leave the standard transition in place.

How Do You Turn a Website You Like into a Prompt?#

The most common way to explain what you want is to show an example. That doesn’t work directly with an agent: it doesn’t see the website; it sees text.

One way is to connect the agent to a library of live interface examples through MCP. Mobbin’s official server can be installed with one command:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

After that, open a new session, select the server from the list, and sign in in the browser. The agent gets access to screenshots of real, working apps: more than 621,500 screens are listed. These are screenshots of finished products, not components or code. Important caveat: the Mobbin server doesn’t work on the free plan; it’s available on paid plans (as of July 2026). There’s a separate article about Google Stitch on connecting external services to an agent, using the same method to bring a design system into Claude Code.

Step by Step: An Animated Website in an Evening#

1. Set up a project

   If you don’t have a project yet, start with an empty folder. Create it, open it in a terminal, and run claude there. For your first prompt, ask for a scaffold: “build a single-page website skeleton for my business (describe what it is), plain HTML and CSS, no libraries.” A set of files will appear—that’s the project root, where everything happens from now on.

2. Put the rules in CLAUDE.md

   Copy the Anti-Generic Guardrails block into a CLAUDE.md file at the project root. If there isn’t one, ask the agent to create it. The rules are written for Tailwind; if your scaffold uses plain CSS, tell the agent, “apply these principles to regular CSS”—the meaning of the rules doesn’t change. See a breakdown of four rules for CLAUDE.md for how the file itself works and what else to put in it.

3. Install the frontend-design skill

   Use the example-skills plugin or copy the frontend-design folder, as described above. You can check that the skill loaded with the /doctor command.

4. Choose one visual direction

   One, not two or three. Mixing brutalist documentary style with beige minimalism gives you exactly the averaging you’re trying to avoid.

5. Build a static page

   Without a single animation. Typography, spacing, and grid should come first. Ask the agent to start a local preview and open the address it gives you. To view it on your phone, say, “run it so it opens on other devices on my network,” and the agent will give you an address.

6. Add one motion scene

   Just one. Usually that’s the first screen: the headline appears, and a background layer moves more slowly than the foreground. Give the agent the library’s llms.txt and describe the scene concretely—what moves, where, and over how many milliseconds. Leave opacity alone on the first screen; there’s a separate section below on why.

7. Add a reduced-motion rule

   Apply the CSS rule and the JavaScript reduced-motion setup from the accessibility section. Check the page with reduced motion enabled before publishing.

8. Publish and check the speed

   Publish to any free static hosting service—Vercel, Netlify, or GitHub Pages. Ask the agent, “publish this project on Vercel and give me the link.” Only after publication, run the resulting URL through PageSpeed Insights: the service works with public URLs and can’t see a local page. Look at “Largest Contentful Paint”—the time it takes to render the largest element; the green zone is up to 2.5 seconds. The agent can measure the local version before publication: Chrome DevTools MCP will open it in Chrome and show the same metric.

Step six is where it’s easiest to ruin the work of the previous five.

Why Does Excess Animation Make a Website Look Even More AI-Generated?#

This is where the thinking of almost everyone who comes to the subject breaks down: too little animation looks cheap, so you need to add more.

That’s in the very frontend-design skill you installed to improve the design. Anthropic warns against overdoing it in the tool the agent uses to decorate the page.

It also lists other stock techniques: a large number with a small caption and gradient accent as the standard response to any task; numbered blocks like 01 / 02 / 03, appropriate only when there’s actually a sequence.

What overdoing it looks like in practice: the agent gets the task “add animations” and adds a scroll reveal to every section. The heading slides in, three cards pop up one after another, testimonials slide in from the side, and the footer fades in. Each effect is fine on its own. Together, they make a page that never stops moving and emphasizes nothing.

A live website works differently: one deliberate scene, usually on the first screen, and restraint after that. Motion works like emphasis—it makes sense as long as it falls on a single word.

That gives you a rule for the prompt. Phrase it like this: “make one scene on the first screen and leave everything else static.” That’s only a few words different from “add animations,” but the result is an order of magnitude better.

How Do Animations Kill Website Speed?#

The three metrics Google uses to evaluate a page are: time to render the largest element—no more than 2.5 seconds; responsiveness to an interaction—no more than 200 milliseconds; and layout shift—no more than 0.1. They’re measured at the 75th percentile of real visits.

When choosing the largest element, the browser excludes elements with zero opacity—those invisible to the user—from the candidates.

Let’s unpack why this matters here. By default, the agent builds a reveal like this: it sets a section to zero opacity, then removes that setting when the section enters the viewport. If that reveal is on the first screen, the image may be fully loaded and decoded, but the metric still won’t count it until rendering begins. It’s worse if a script removes the opacity after loading—then the metric waits for the entire script.

There are two ways to fix this. Either start the reveal from a small nonzero opacity instead of zero, so the initial rendering counts. Or leave opacity alone on the first screen and animate only the shift.

The second issue is what’s cheap to animate and what’s expensive.

In plain English: the browser assembles the image in layers, and changes to position and opacity happen at the last, cheapest step. Everything else makes it recalculate the page. Measurements from the same documentation: animating with top and left offsets takes 37 milliseconds for layout and 79 for rendering; the same visual effect via transform takes zero for both.

And here’s a contradiction worth remembering: opacity is cheap to composite, but disqualifies an element from the speed metric. So an animation that’s cheap for the browser and safe for performance are two different things.

One more thing about the will-change property, which agents love to sprinkle around “for optimization.” MDN documentation says the opposite:

It also says that the property is intended as a last resort for existing performance problems. It doesn’t work as prevention. A line like will-change: transform, opacity on fifty elements is a typical telltale sign of generated code.

The story is simpler with layout shift. Google’s documentation doesn’t blame animations; on the contrary, careful transitions help update content without startling the reader. The recipe is the same: change scale with transform instead of width and height, and move with offsets instead of coordinates.

What About People Who Are Physically Harmed by Motion?#

This section matters for more than just courtesy. The audience buying from a business owner is precisely people aged forty and older.

The W3C consortium describes the consequences without softening them: nausea and migraine, sometimes severe enough to require lying down.

You can address this with three lines of styles:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Three points to keep in mind.

Write the animation as the default behavior and disable it inside this rule—that way the page degrades more safely than if you do the opposite.

The specification says “removes, reduces, or replaces”—complete removal isn’t even the first option. Replacing a sharp slide-in with a brief fade works better than cutting it off entirely: disabling all animations breaks loading indicators and progress bars.

JavaScript-driven animations need their own preference handling; a CSS duration override does not cancel a GSAP timeline. Merely storing matchMedia(...).matches in a variable does nothing unless the setup branches on it. For GSAP, keep the element visible in its ordinary HTML/CSS, then create motion only when the user allows it:

// Run after GSAP and the page elements have loaded.
function mountMotion() {
  const mm = gsap.matchMedia();
  mm.add('(prefers-reduced-motion: no-preference)', () => {
    gsap.from('.hero-title', { y: 24, duration: 0.35 });
  });
  return () => mm.revert();
}

const cleanupMotion = mountMotion();
// Call cleanupMotion() when this page or component is removed.

The title must have no hidden or translated base style. With reduced motion enabled, it stays visible and static. If the preference changes while the page is open, GSAP reverts the animation when the query stops matching. mm.revert() also removes the collected animation on teardown. In Motion, implement the equivalent branch in that library’s setup; the CSS rule alone is insufficient. See the GSAP matchMedia lifecycle and cleanup documentation.

There is also a formal accessibility criterion to keep in mind. WCAG 2.2.2, a Level A criterion, requires that if anything moves, blinks, or scrolls automatically, lasts more than five seconds, and is shown alongside other content, the user must be able to stop it. This applies to auto-rotating carousels and infinite marquees, which agents readily insert.

Seven Places Where It Falls Apart#

1. The first screen is hidden until it fades in. An element with zero opacity doesn’t count as a candidate for the rendering metric. This is the most costly mistake, because it hurts a metric that affects search rankings.

2. Everything is animated. Every section slides in, every card pops up. Anthropic says plainly that this increases the impression of generated design.

3. Scrolljacking. When a website replaces the normal behavior of the mouse wheel with its own “cinematic” logic.

4. Layout properties are animated. Coordinates and dimensions instead of transforms. 37 and 79 milliseconds versus zero.

5. Animations are too long. The useful range is 100 to 400 milliseconds, with 400 already very slow and suitable only for large movements. Agents like to use a full second by default.

6. There’s no reduced-motion rule. The agent won’t add one on its own.

7. The website gets slower with every interaction. Specific to React: an animation created without a reference to the element and without cleanup multiplies with every component update. The page gradually starts slowing down for no apparent reason.

There’s an eighth trap. The approach where “the agent takes a screenshot and fixes what it sees” works great on static pages, but with animated elements it traps the agent in an endless edit loop: it sees an in-between frame, thinks it’s a bug, fixes it, and sees another in-between frame. Plus, every screenshot eats up context.

How Much Does It Cost, and How Do You Avoid Burning a Month’s Limit on One Website?#

A typical story: someone builds a flashy page with a scroll through space, and the one site uses up their entire monthly quota.

That’s to be expected. Animations cost more than regular layout work for several reasons at once. You can’t verify the result by reading the code; it takes iterations. Every edit entails rereading files. And a screenshot loop on moving elements adds unnecessary passes.

What helps:

Build one scene at a time and lock down the result. A one-shot request to “add animations across the whole site” guarantees overspending. You can turn off screenshot verification on animated elements and inspect them visually yourself. Keep CLAUDE.md short so the rules don’t consume context on every request. And give the agent the library’s llms.txt in advance, or it will invent an outdated connection method and then debug its own fabrication.

The article why Claude Code rereads the whole project explains where tokens go when working on a project; the article how not to burn through your Claude Code limits covers ways to keep usage in check.

What Next?#

Build your first page using the eight steps. Choose one visual direction, create one scene on the first screen, and run a speed check.

For your next steps—Ailoot.