AI builders · Copy and paste
Animated website templates for ChatGPT
To use an AnimatedWebs template in ChatGPT, copy its build prompt from the template page, paste it into a new chat with a line about your business, and send. ChatGPT writes the site's code in its reply, and OpenAI's help center says it shows a Preview option for supported HTML and React code.
- How it works
- Copy the prompt on the template page, then paste it into a chat
- What you get
- The site's code in the reply, with Preview when ChatGPT supports it
- Cost to try
- Free templates with a free AnimatedWebs account. What ChatGPT costs is set by OpenAI
How a template gets into ChatGPT
- 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
Paste it into a new ChatGPT chat
Open a new chat at chatgpt.com. Paste one of the example prompts below first, so ChatGPT knows your business and which parts of the template to keep. Then paste the build prompt right after it and send.
- 4
Look for Preview, or save the file
OpenAI's help center says ChatGPT shows a Preview option for supported HTML and React code, and that code without a Preview option is not supported for preview. If you see Preview, use it. If not, copy the code into a file named index.html and open it in your browser.
- 5
Change one thing at a time
Compare the result with the live demo, then ask for one change per message: the hero copy, the section order, the colors, the mobile layout. Check a phone-width screen and your system's reduced-motion setting, because the build prompts for live-demo websites ask for reduced-motion support.
12 prompts to paste into ChatGPT
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 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 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 Lodgepole Live Contour Map Climate Fund
Below is the AnimatedWebs build prompt for the "Lodgepole Live Contour Map Climate Fund" 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 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 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 Pocket Projector Beam Chapters
Below is the AnimatedWebs build prompt for the "Pocket Projector Beam 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 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 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 ChatGPT
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

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

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

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

Lodgepole Live Contour Map Climate Fund
A live topographic map whose contour lines drift and rise into a hill under your cursor, on map paper

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

Bumblecode Kids Coding Club With a Playable Lesson
A playful kids' coding club page with a real mini lesson: stack arrow blocks and run them to guide a bee

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

Somna Visor Portrait With Live Sleep Cards
A teal visor portrait with glass cards that chart sleep stages and recovery live as the frame turns

Iridescent Voice Orb
Voice-AI landing page built around a living gradient orb

Liquid Chrome Audio
Raymarched mercury blobs merge, split and chase your cursor above a luxury headphone launch

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

Thinair Particle Sky Journey
Particles become a blue galaxy, rising embers, purple wind and a green vortex you fall into as you scroll
Tips for ChatGPT
- Paste the example prompt first and the build prompt after it. The instruction at the top tells ChatGPT how to use the long spec below it.
- Ask for the complete code in one reply and for a list of what it 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.
- Replace the placeholder text, photos and prices yourself. The build prompt describes a design, not your business.
Limits to know
- ChatGPT'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.
- Our larger WebGL and three.js templates are a lot of code for one chat reply. For those, a coding tool such as Claude Code or Cursor, which work in your project files, is a better fit.
- OpenAI's help center describes Preview for supported HTML and React code only. If your reply has no Preview option, save the code to a file and open it in a browser.
- 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 ChatGPT
How do I use an AnimatedWebs template in ChatGPT?+
Open a template page, play the live demo, sign in, and click Copy prompt. Paste an instruction about your business into a new ChatGPT chat, paste the build prompt after it, and send. ChatGPT replies with the site's code.
Can ChatGPT show me the website?+
OpenAI's help center says ChatGPT shows a Preview option for supported HTML and React code. If your reply has no Preview option, copy the code into a file named index.html and open it in your browser.
Is there a button that opens ChatGPT with the prompt filled in?+
No. Lovable, v0 and Bolt have buttons on the template page, but ChatGPT does not have one. Click Copy prompt and paste it into the chat yourself.
Will the result match the live demo?+
It will be close at best. ChatGPT reads the prompt as text and cannot see the demo, so compare the two, then ask for one fix at a time. Big WebGL templates may work better in Claude Code or Cursor.
Is it free?+
Free templates open with a free AnimatedWebs account. A Pro template needs Pro, Lifetime or a Prompt Pack credit. What ChatGPT costs is set by OpenAI, so check its pricing.
Facts checked on
What this page says about ChatGPT comes from its official documentation, linked below, and ChatGPT can change its product, so check its docs for the latest. What it says about AnimatedWebs comes from how our own site works.
- ChatGPT shows a Preview option for supported HTML and React code blocks. If Preview does not appear, the code is not supported for preview. Availability varies by plan, device and workspace settings. OpenAI Help Center: Working with writing blocks and code blocks in ChatGPT ↗
- AnimatedWebs has no button that opens ChatGPT 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 ChatGPT
Play the live demos, open the one you like, and start with a free template or unlock the whole library.