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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
A motion designer's reel plays inside giant letterforms, then bursts to full screen on scroll

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

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

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

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

Closebook AI Month-End Close
A dashboard that runs the month-end close while you watch, then module tabs that swap the app view

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

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

Ringfall Ringed Planet Over the Mesa
A ringed planet rises over a rust desert mesa while italic serif cuts across the sand

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

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

Halden Glass Camera Taken Apart
A glass and brass rangefinder turns, points out its parts, then floats apart into lenses, blades and circuits
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.