AI builders · Copy and paste

Animated website templates for Claude

To use an AnimatedWebs template in Claude, copy its build prompt from the template page, paste it into a new chat on claude.ai with a line about your business, and send. Claude can return the site as an artifact that opens beside the chat, where you can ask for changes.

How it works
Copy the prompt on the template page, then paste it into a chat on claude.ai
What you get
A site as an artifact beside the chat, per Anthropic's help article
Cost to try
Free templates with a free AnimatedWebs account. Anthropic lists artifacts on Free, Pro, Max, Team and Enterprise

How a template gets into Claude

  1. 1

    Play a demo and pick one

    Open a template from /templates and play its live demo on the template page. Open full screen shows it at full size. The demo is your target, so pick the one whose motion you want your own site to have.

  2. 2

    Sign in and copy the prompt

    Click Copy prompt on the template page. Signed out, the button sends you to sign in first, and a free AnimatedWebs account opens every free template. A Pro template opens with Pro or Lifetime, or by spending one Prompt Pack credit the first time. With none of those, the button sends you to pricing.

  3. 3

    Turn on file creation, then start a chat

    Anthropic's help article says to turn on Cloud code execution and file creation in Settings, then Capabilities, on Free, Pro and Max plans. Its newer layout calls the setting Create and edit files. Then open a new chat at claude.ai.

  4. 4

    Paste your instruction, then the build prompt

    Paste one of the example prompts below first, so Claude knows your business and which parts of the template to keep. Paste the build prompt right after it, and ask Claude to put the finished site in one artifact.

  5. 5

    Work in the artifact

    Anthropic says artifacts open beside your conversation and that you can edit and revisit them. Compare the result with the live demo, then ask for one change per message. If the artifact shows an error, the Try fixing with Claude button can help, but Anthropic says success is not guaranteed.

12 prompts to paste into Claude

Paste one of these first, then paste the build prompt of the template named in it. Change the business details to yours. Each one is paired with a live-demo template from a nearby category, and any other template works the same way.

1. For a cybersecurity SaaS with Relay AI Model Router Control Room

paste first
Below is the AnimatedWebs build prompt for the "Relay AI Model Router Control Room" template. Use it as the design spec and rebuild it for my cybersecurity SaaS, which monitors cloud accounts for small IT teams. Keep its scroll interactions and replace the copy with placeholder headlines about threat detection. Give me the complete code in one reply, and list anything you simplified. Here is the build prompt:

2. For a payments startup with Command Palette Productivity

paste first
Below is the AnimatedWebs build prompt for the "Command Palette Productivity" template. Use it as the design spec and rebuild it for a payments startup in Austin, Texas that pays freelancers the same day. Keep the motion, swap the hero for a clear one-line promise, and add a pricing section with three plans. Give me the complete code in one reply, and list anything you simplified. Here is the build prompt:

3. For a dental practice with Somna Visor Portrait With Live Sleep Cards

paste first
Below is the AnimatedWebs build prompt for the "Somna Visor Portrait With Live Sleep Cards" template. Use it as the design spec and rebuild it for a family dental practice in Columbus, Ohio. Calm down any fast motion, keep the layout, and add a booking button and an office hours block. Give me the complete code in one reply, and list anything you simplified. Here is the build prompt:

4. For a restaurant with Hatchlight Night Truck That Lights Up on Scroll

paste first
Below is the AnimatedWebs build prompt for the "Hatchlight Night Truck That Lights Up on Scroll" template. Use it as the design spec and rebuild it for a seafood restaurant in Charleston, South Carolina. Keep the scroll feel, use placeholders for the menu photos, and add a reservations section. Give me the complete code in one reply, and list anything you simplified. Here is the build prompt:

5. For a law firm with Foxglow Pointer That Burns Through

paste first
Below is the AnimatedWebs build prompt for the "Foxglow Pointer That Burns Through" template. Use it as the design spec and rebuild it for a small law firm in Chicago that handles employment cases. Keep it restrained, use only the motion that helps people read, and add a contact form section. Give me the complete code in one reply, and list anything you simplified. Here is the build prompt:

6. For a photographer's portfolio with Showreel Through the Letters

paste first
Below is the AnimatedWebs build prompt for the "Showreel Through the Letters" template. Use it as the design spec and rebuild it as the portfolio of a wedding photographer in Denver, Colorado. Keep the transitions, use placeholder images in a gallery of 12, and add an inquiry form. Give me the complete code in one reply, and list anything you simplified. Here is the build prompt:

7. For a coffee roaster with Swaywool Pendulum Rug Studio

paste first
Below is the AnimatedWebs build prompt for the "Swaywool Pendulum Rug Studio" template. Use it as the design spec and rebuild it for an online coffee roaster in Seattle that sells whole-bean subscriptions. Keep the product reveals, add a three-tier subscription block, and use placeholder product names. Give me the complete code in one reply, and list anything you simplified. Here is the build prompt:

8. For a real estate broker with Hearthline Live Mortgage Calculator

paste first
Below is the AnimatedWebs build prompt for the "Hearthline Live Mortgage Calculator" template. Use it as the design spec and rebuild it for a real estate broker in Phoenix, Arizona who sells homes in three neighborhoods. Keep the scroll interactions, add a section of six listing cards, and use placeholder prices. Give me the complete code in one reply, and list anything you simplified. Here is the build prompt:

9. For an indie game studio with Noctiluca Glowing Ocean Landing Page

paste first
Below is the AnimatedWebs build prompt for the "Noctiluca Glowing Ocean Landing Page" template. Use it as the design spec and rebuild it for an indie game studio in Los Angeles launching its first game. Keep the motion at full strength, add a trailer section and a wishlist button, and use placeholder art. Give me the complete code in one reply, and list anything you simplified. Here is the build prompt:

10. For a nonprofit with Carbon Buoy Ocean Chapters

paste first
Below is the AnimatedWebs build prompt for the "Carbon Buoy Ocean Chapters" template. Use it as the design spec and rebuild it for a food bank in Detroit, Michigan. Keep the storytelling flow, show three impact numbers I will fill in later, and add a donate button that links to my donation page. Give me the complete code in one reply, and list anything you simplified. Here is the build prompt:

11. For a fitness studio with Tensile Design Engineering Summit

paste first
Below is the AnimatedWebs build prompt for the "Tensile Design Engineering Summit" template. Use it as the design spec and rebuild it for a boutique fitness studio in Miami, Florida. Keep the energy of the motion, add a class schedule table, and add a first-class-free signup section. Give me the complete code in one reply, and list anything you simplified. Here is the build prompt:

12. For a design agency with Brindl No-Code Studio Portfolio

paste first
Below is the AnimatedWebs build prompt for the "Brindl No-Code Studio Portfolio" template. Use it as the design spec and rebuild it for a six-person design agency in Brooklyn, New York. Keep its scroll interactions, list four case studies with placeholder titles, and end with a short contact section. Give me the complete code in one reply, and list anything you simplified. Here is the build prompt:

Live demos to try in Claude

Business-site categories and lighter live demos come first, because a smaller site is a smaller reply to generate and check. Free templates are marked Free.

The longest build prompt among the 366 live-demo websites is 12,652 characters, and you paste it as plain text.

366 live-demo websites, any of them can be pasted

Showreel Through the Letters, animated website template live preview
Live canvas40 KBWebsite templatePro

Showreel Through the Letters

A motion designer's reel plays inside giant letterforms, then bursts to full screen on scroll

Portfolio
Relay AI Model Router Control Room, animated website template live preview
Live canvas18 KBWebsite templatePro

Relay AI Model Router Control Room

A live control room where every AI job flies into a ring and is sent to the cheapest model that can do it

AI / SaaS
Command Palette Productivity, animated website template live preview
Live canvas33 KBWebsite templateFree

Command Palette Productivity

A live Cmd+K palette types its own queries and filters results right in the hero

AI / SaaS
Brindl No-Code Studio Portfolio, animated website template live preview
Live motion52 KBWebsite templatePro

Brindl No-Code Studio Portfolio

A button that chases your cursor, project cards that stack as you scroll and a pinned six-step process

Portfolio
Carbon Buoy Ocean Chapters, animated website template live preview
Live canvas86 KBWebsite templateFree

Carbon Buoy Ocean Chapters

A hand-drawn ocean line guides you through pinned chapters about capturing carbon at sea

Storytelling
Closebook AI Month-End Close, animated website template live preview
Live motion26 KBWebsite templatePro

Closebook AI Month-End Close

A dashboard that runs the month-end close while you watch, then module tabs that swap the app view

Fintech
Tandem Shared Budget With a Live Split Slider, animated website template live preview
Live motion29 KBWebsite templatePro

Tandem Shared Budget With a Live Split Slider

Drag the split slider and both shares, the donut and the phone rebalance live, then flip through insight cards

Fintech
Hearthline Live Mortgage Calculator, animated website template live preview
Live motion24 KBWebsite templatePro

Hearthline Live Mortgage Calculator

A real mortgage calculator hero: sliders update the payment, a cost split bar and a thirty-year balance chart

Real Estate & Architecture
Ringfall Ringed Planet Over the Mesa, animated website template live preview
Video hero54 KBWebsite templatePro

Ringfall Ringed Planet Over the Mesa

A ringed planet rises over a rust desert mesa while italic serif cuts across the sand

Agency
Petalform Floating Marble Still Life, animated website template live preview
Video hero81 KBWebsite templatePro

Petalform Floating Marble Still Life

A floating marble still life of moss, crystals and peonies turns on deep teal beside stats ending in zero

Agency
Synthwave Terrain Racer, animated website template live preview
Live WebGL44 KBWebsite templateFree

Synthwave Terrain Racer

An endless neon wireframe landscape rushes toward a striped sunset for a retro racing game

Gaming & Entertainment
Halden Glass Camera Taken Apart, animated website template live preview
Live WebGL29 KBWebsite templatePro

Halden Glass Camera Taken Apart

A glass and brass rangefinder turns, points out its parts, then floats apart into lenses, blades and circuits

Ecommerce

Tips for Claude

  • Paste the example prompt first and the build prompt after it. The instruction at the top tells Claude how to use the long spec below it.
  • Ask for one artifact that holds the whole site, and for a list of what Claude simplified, so you know what to ask for next.
  • Keep the live demo open in another tab. When something differs, name the exact difference, such as the headline does not fade in on scroll.
  • Artifacts start private to you, per Anthropic. Anthropic has a separate article on who can open an artifact you share.

Limits to know

  • Claude's output is a starting point. It reads the build prompt as text and cannot see the live demo, so expect a close build and not a copy.
  • Anthropic's help article does not say whether an artifact can load libraries such as three.js, so test the first build. Our larger WebGL templates may work better in Claude Code, which has its own page here, or in Cursor.
  • Anthropic's help article says artifacts store up to 20 MB of text data each. A site with large photos or video should keep them as separate files in your own project.
  • A Pro template's prompt is for your own use and client work. Do not resell the prompt.
  • Photos and video in the live demos come from licensed stock and generators and are licensed to AnimatedWebs for display in the demos only, so replace them with media you own or license before you publish.

Questions about Claude

How do I use an AnimatedWebs template in Claude?+

Open a template page, play the live demo, sign in, and click Copy prompt. Paste an instruction about your business into a new chat on claude.ai, paste the build prompt after it, and send. Claude can return the site as an artifact.

What is a Claude artifact?+

Anthropic's help article describes artifacts as content Claude creates that you would show to someone else, such as a design, a document, a dashboard or a small interactive tool. They open beside your conversation, and you can edit, revisit and share them.

Do I need to change a setting first?+

Anthropic's help article says to turn on Cloud code execution and file creation under Settings, then Capabilities, on Free, Pro and Max plans. Its updated layout calls the setting Create and edit files.

Should I use Claude on claude.ai or Claude Code?+

Use claude.ai to try a design quickly and iterate on one artifact. Use Claude Code, which has its own page here, when the template is large or you want the site built in your project files. Claude Code fetches the build prompt itself.

Is it free?+

Free templates open with a free AnimatedWebs account. A Pro template needs Pro, Lifetime or a Prompt Pack credit. Anthropic's article lists creating artifacts in chat on Free, Pro, Max, Team and Enterprise plans, and Anthropic sets the rest of its pricing.

Facts checked on

What this page says about Claude comes from its official documentation, linked below, and Claude can change its product, so check its docs for the latest. What it says about AnimatedWebs comes from how our own site works.

  • Artifacts are content Claude creates that you would show to someone else, such as a design, deck, document, dashboard or small interactive tool. They open beside your conversation, and you can edit, revisit and share them. Anthropic Help Center: What are artifacts ↗
  • Claude creates an artifact when the content is significant, self-contained (typically over 15 lines) and likely to be reused. Single-page websites are among the things it can make. Anthropic Help Center: What are artifacts ↗
  • Turn on Cloud code execution and file creation in Settings, then Capabilities, on Free, Pro and Max plans. Creating artifacts in chat is listed for Free, Pro, Max, Team and Enterprise. Anthropic Help Center: What are artifacts ↗
  • Artifacts start private to you. If an artifact shows an error, the Try fixing with Claude button can help, but success is not guaranteed. Storage is 20 MB per artifact, text only. Anthropic Help Center: What are artifacts ↗
  • AnimatedWebs has no button that opens Claude on claude.ai with a prompt. The Copy prompt button on each template page copies the full build prompt to your clipboard. AnimatedWebs templates ↗

Lovable, v0, Bolt, Claude Code, Cursor, ChatGPT and Claude are trademarks of their owners. AnimatedWebs is independent and not affiliated with them.

Pick a look, then hand it to Claude

Play the live demos, open the one you like, and start with a free template or unlock the whole library.

We use essential cookies to keep you signed in, a referral cookie only if you arrive through a partner link, and cookie-free analytics. No ads, no tracking. Cookie Policy