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. 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

    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. 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. 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

paste first
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

paste first
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

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 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 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 Pocket Projector Beam Chapters

paste first
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

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 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 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, 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
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
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
Lodgepole Live Contour Map Climate Fund, animated website template live preview
Live canvas21 KBWebsite templatePro

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

Fintech
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
Bumblecode Kids Coding Club With a Playable Lesson, animated website template live preview
Live motion26 KBWebsite templatePro

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

Education
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
Somna Visor Portrait With Live Sleep Cards, animated website template live preview
Live motion87 KBWebsite templatePro

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

Health & Wellness
Iridescent Voice Orb, animated website template live preview
Live WebGL19 KBWebsite templateFree

Iridescent Voice Orb

Voice-AI landing page built around a living gradient orb

AI / SaaS
Liquid Chrome Audio, animated website template live preview
Live WebGL32 KBWebsite templateFree

Liquid Chrome Audio

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

Fashion & Luxury
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
Thinair Particle Sky Journey, animated website template live preview
Live WebGL24 KBWebsite templatePro

Thinair Particle Sky Journey

Particles become a blue galaxy, rising embers, purple wind and a green vortex you fall into as you scroll

3D / WebGL

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.

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.

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