AI Website Guides · 2026-10-06 · 5 min read

How to Make an Animated Website With Claude Code (2026)

Claude Code can build an animated website in an afternoon if you give it a clear brief, a visual reference and a plan for motion. This guide shows the exact workflow, prompts included.

Written by AmJ, founder of Scrollhaus, and edited by the Scrollhaus editorial team. Sources and methodology are documented in the article.

A scroll-driven animated website built with an AI coding assistant — Scrollhaus Journal · AI Website Guides

Key takeaways

Disclosure: ScrollHaus publishes this guide. The workflow uses public tools (Claude Code, GSAP, Lenis, FFmpeg), and the examples are ScrollHaus websites you can scroll and inspect.

Can Claude Code make an animated website?

Yes. Claude Code is an agentic coding tool that runs in your terminal, reads your project and edits files. It can write the HTML, CSS and JavaScript for scroll animation, install libraries such as GSAP and Lenis, and fix its own bugs when you describe what you see. What it cannot do alone is invent a good visual direction or render cinematic footage, so give it a reference and real assets.

Step 1: Pick a visual direction first

The biggest quality lever is the reference. Browse live animated sites in the ScrollHaus library, scroll them, and choose one close to your brand. A concrete reference beats an adjective list like "modern and bold".

Step 2: Set up the project

mkdir my-site && cd my-site
npm create vite@latest . -- --template vanilla
npm install gsap lenis
claude

Starting a fresh Vite project keeps things simple. You can also start from a template folder so Claude edits working code instead of generating from nothing, see stop starting websites from scratch.

Step 3: Write the brief

Paste a structured prompt. This one works well as a starting point:

Build a single-page marketing site for [brand], [one-line description].
Sections: hero, three feature rows, proof/testimonials, pricing, footer CTA.
Style: [reference site], dark background, large serif headline, restrained palette.
Motion: Lenis smooth scrolling; GSAP ScrollTrigger reveals (fade+rise, stagger 0.1s);
a pinned hero that scrubs a canvas image sequence from /frames/f_0001.webp to f_0144.webp
over 300vh. Respect prefers-reduced-motion. Mobile-first, no horizontal scroll.
Keep headlines as real HTML text. Do not add libraries beyond gsap and lenis.

More prompt patterns: AI website prompts for Lovable, Bolt and Claude and the MotionSites prompts workflow with Claude Code.

Step 4: Build section by section

Ask for one section at a time and check it in the browser before moving on. Large single-shot prompts drift. After each section, say what is wrong in plain terms: "the headline wraps to three lines on mobile" or "the reveal fires too early". Claude Code fixes specific observations faster than vague ones.

Step 5: Add the cinematic part

For the pinned scroll film, render or export a short clip, extract frames, and let Claude wire the canvas. Frame extraction:

ffmpeg -i hero.mp4 -vf "fps=24,scale=1920:-2" -c:v libwebp -quality 82 frames/f_%04d.webp

Then follow the image sequence canvas tutorial, and add Lenis and GSAP ScrollTrigger patterns for the rest of the page.

Step 6: Fix mobile and performance

Serve a smaller frame set to phones and cap canvas pixel ratio at 2.
Show a poster frame immediately for a fast largest contentful paint.
Test on a mid-range phone, not only your laptop.
Ask Claude to run a Lighthouse pass and fix what it reports. See Core Web Vitals for animated websites.

Step 7: Launch checklist

Unique title and meta description on every page.
Real HTML headings and copy over any canvas.
Reduced-motion fallback.
Images and frames compressed and cached.
Sitemap submitted to Google Search Console.

Common problems with Claude Code and animation

It reinvents the design: give a reference site and say what to keep.
Animations work on desktop but jitter on phones: reduce frames and pixel ratio, animate only transforms and opacity.
Scroll positions are off: call ScrollTrigger.refresh() after images and fonts load.
It adds too many libraries: state the allowed list in the prompt.

Skip the blank page

If you would rather start from working animated source, ScrollHaus ships complete scroll-driven sites you can preview first and then take into Claude Code. See how to make an animated website with AI for the wider workflow.

Frequently asked questions

Can Claude Code make an animated website?

Yes. It writes the HTML, CSS and JavaScript, installs libraries like GSAP and Lenis and fixes bugs from your descriptions. You supply the visual reference and any rendered footage.

What is the best prompt for an animated website in Claude Code?

A structured brief with sections, a visual reference, named motion libraries, mobile and reduced-motion rules, and an explicit list of allowed dependencies.

Which libraries should Claude Code use for scroll animation?

GSAP with ScrollTrigger for scroll-linked animation and Lenis for smooth scrolling. Add a canvas frame sequence for cinematic pinned heroes.

Why does my Claude Code animation lag on mobile?

Usually too many large frames or effects. Serve a smaller frame set, cap pixel ratio, animate transforms only and test on a real phone.

Do I need to know how to code?

Basic comfort helps for testing and reviewing, but describing visible problems in plain language is enough for Claude Code to fix most issues.

Explore animated website templates at Scrollhaus →

Need help with a template, account, or project? Email admin@scrollhaus.ai.