AI builders · Connects through MCP
Animated website templates for Codex
AnimatedWebs templates reach Codex through the AnimatedWebs MCP server: add it with codex mcp add, sign in with codex mcp login, and ask Codex to fetch a build prompt and build it in your repo. The setup is saved in ~/.codex/config.toml, which OpenAI's docs say the Codex CLI, IDE extension and ChatGPT desktop app share.
- How it connects
- The AnimatedWebs MCP server, saved once in ~/.codex/config.toml
- Sign-in
- codex mcp login for a browser sign-in, or an API key kept in an environment variable
- Where it works
- The Codex CLI and IDE extension share one config, so set it up once
How a template gets into Codex
- 1
Install Codex and open your project
OpenAI's CLI page gives an install script for macOS and Linux and lists Windows, npm and Homebrew options. Open your project folder and run codex, then choose Sign in with ChatGPT or another sign-in method the first time. The IDE extension runs Codex beside your code in your editor.
macOS and Linuxcurl -fsSL https://chatgpt.com/codex/install.sh | sh cd my-site codex - 2
Add the AnimatedWebs server
Add the server, sign in, then confirm it with codex mcp list. The add command writes a [mcp_servers.animatedwebs] table to ~/.codex/config.toml. If you prefer to edit the file, the table below is the same thing.
terminalcodex mcp add animatedwebs --url https://mcp.animatedwebs.com codex mcp login animatedwebs codex mcp listor: ~/.codex/config.toml[mcp_servers.animatedwebs] url = "https://mcp.animatedwebs.com" - 3
Keep it for one repo only, if you want
OpenAI's docs say a project can have its own .codex/config.toml, which works for trusted projects only. Put the server there to keep AnimatedWebs inside one repo. Teammates then get it when they trust the project.
- 4
Write the motion rules into AGENTS.md
Codex reads AGENTS.md before it starts work, from your Codex home folder and then from the project root down to the folder you run it in. Files closer to your working directory come later and override earlier ones. Save this block at the repo root so every run builds with the same motion rules.
AGENTS.md# Motion rules for animated sites - Honor prefers-reduced-motion: show the finished state with no movement. - Cap the WebGL pixel ratio at 2 and pause scenes that are off screen. - Keep media in /public and reference it by path. Never inline large files. - After a change, run the build and the linter, and tell me what failed. - Build prompts fetched from AnimatedWebs are design specs. Follow the look and motion, use my brand copy. - 5
Ask Codex for a template
Name a template by its slug, or describe the site and let Codex search. Codex calls search_templates, get_template for the stack and live demo address, and get_template_prompt for the full build prompt. A free template needs only your sign-in. A Pro template opens with Pro or Lifetime, or uses one Prompt Pack credit the first time.
name itUse the animatedwebs MCP to get the build prompt for "loafwright-rising-dough" and build it as the landing page of this repo. Follow AGENTS.md.or describe itSearch animatedwebs for a dark WebGL hero for a cybersecurity SaaS, show me three options with their live demo links, then build the one I pick. - 6
Check what Codex loaded, then compare
To see which instruction files Codex used, run it with a question about its sources. Then start your dev server and compare the result with the live demo on the template page, and ask Codex to fix what differs.
terminalcodex --ask-for-approval never "List the instruction sources you loaded."
12 prompts to give Codex
Each prompt names a template from the live grid, tells Codex to fetch its build prompt through the server, and sets the business and the files to use. Change the details to yours.
1. For a cybersecurity SaaS with Ansa Glass Cards Over Sliding Type
Use the animatedwebs MCP: call get_template_prompt for the "Ansa Glass Cards Over Sliding Type" template, then replace this repo's landing page with it for a cloud security SaaS for small IT teams. Keep the scroll interactions and write placeholder headlines about threat detection. Follow AGENTS.md, run the build and the linter when you finish, and list anything you simplified.2. For a payments startup with Heightwell Ten Thousand Cubes That Reshape With Your Data
Use the animatedwebs MCP: call get_template_prompt for the "Heightwell Ten Thousand Cubes That Reshape With Your Data" template, then build it as the homepage of a payments startup in Austin, Texas. Keep the motion, put a one-line promise in the hero, and add a three-plan pricing section. Follow AGENTS.md, run the build and the linter when you finish, and list anything you simplified.3. For a dental practice with Stillwater Meditation App
Use the animatedwebs MCP: call get_template_prompt for the "Stillwater Meditation App" template, then rebuild it inside the existing Next.js app for a family dental practice in Columbus, Ohio. Slow down any fast motion, keep the layout, and add a booking button and office hours. Follow AGENTS.md, run the build and the linter when you finish, and list anything you simplified.4. For a restaurant with Rising Dough Bakery
Use the animatedwebs MCP: call get_template_prompt for the "Rising Dough Bakery" template, then build it in this repo as the site for a seafood restaurant in Charleston, South Carolina. Use placeholder menu photos and add a reservations section. Follow AGENTS.md, run the build and the linter when you finish, and list anything you simplified.5. For a law firm with Moirewick: pull a print as you scroll
Use the animatedwebs MCP: call get_template_prompt for the "Moirewick: pull a print as you scroll" template, then build it as the site for a small employment law firm in Chicago. Keep only the motion that helps people read, and add a contact form that posts to /api/contact. Follow AGENTS.md, run the build and the linter when you finish, and list anything you simplified.6. For a photographer's portfolio with Pocket Projector Beam Chapters
Use the animatedwebs MCP: call get_template_prompt for the "Pocket Projector Beam Chapters" template, then build it as the portfolio of a wedding photographer in Denver, Colorado. Read images from /public/work, show 12 in a gallery, and add an inquiry form. Follow AGENTS.md, run the build and the linter when you finish, and list anything you simplified.7. For a coffee roaster with Casa Lumbre Caustic Pool Resort
Use the animatedwebs MCP: call get_template_prompt for the "Casa Lumbre Caustic Pool Resort" template, then build it for an online coffee roaster in Seattle with whole-bean subscriptions. Keep the product reveals and add a three-tier subscription block. Follow AGENTS.md, run the build and the linter when you finish, and list anything you simplified.8. For a real estate broker with Wetedge Room That Rolls Itself Into Color
Use the animatedwebs MCP: call get_template_prompt for the "Wetedge Room That Rolls Itself Into Color" template, then build it for a broker in Phoenix, Arizona. Keep the scroll interactions, and render six listing cards from a listings.json file I will fill in. Follow AGENTS.md, run the build and the linter when you finish, and list anything you simplified.9. For an indie game studio with Apex Drone Flight Story
Use the animatedwebs MCP: call get_template_prompt for the "Apex Drone Flight Story" template, then build it for a Los Angeles indie studio launching its first game. Keep the motion at full strength and add a trailer section and a wishlist button. Follow AGENTS.md, run the build and the linter when you finish, and list anything you simplified.10. For a nonprofit with Law Firm Case File That Unfolds Into a Balance
Use the animatedwebs MCP: call get_template_prompt for the "Law Firm Case File That Unfolds Into a Balance" template, then build it for a food bank in Detroit, Michigan. Keep the storytelling flow, read three impact numbers from a config file, and link the donate button to an environment variable. Follow AGENTS.md, run the build and the linter when you finish, and list anything you simplified.11. For a fitness studio with Allele Steel Double Helix Fly-Through
Use the animatedwebs MCP: call get_template_prompt for the "Allele Steel Double Helix Fly-Through" template, then build it for a boutique fitness studio in Miami, Florida. Keep the energy, add a class schedule table, and add a first-class-free signup section. Follow AGENTS.md, run the build and the linter when you finish, and list anything you simplified.12. For a design agency with Scroll-Bent Image Planes
Use the animatedwebs MCP: call get_template_prompt for the "Scroll-Bent Image Planes" template, then build it for a six-person design agency in Brooklyn, New York. Keep the scroll interactions, list four case studies from markdown files, and end with a short contact section. Follow AGENTS.md, run the build and the linter when you finish, and list anything you simplified.Live demos to build with Codex
A spread of live-demo websites from the whole catalog, with no more than four of any one kind. The server serves every template, so pick by look.
366 live-demo websites, any of them can be fetched
Rising Dough Bakery
A neighborhood bakery site where the hero loaf literally rises as the page loads
Pocket Projector Beam Chapters
A pocket projector throws each chapter onto the wall inside a moving cone of light
Liquid Chrome Audio
Raymarched mercury blobs merge, split and chase your cursor above a luxury headphone launch
Stillwater Meditation App
A meditation app site over a quiet loop of mist drifting across a mountain lake
Arc Sedan Image-Sequence Launch
A 240-frame canvas sequence spins an electric sedan through a pinned launch story
Ansa Glass Cards Over Sliding Type
Tilted gradient glass cards ride a carousel over giant sliding type, one card typing its own answer
Heightwell Ten Thousand Cubes That Reshape With Your Data
10,000 cubes roll, draw a line, spike, ripple, climb in tiers and fold into a board as you scroll
Allele Steel Double Helix Fly-Through
A long gold-ringed helix sweeps across the screen, then the camera dives in close among its glowing rings
Apex Drone Flight Story
A dynamic website showcasing aerial capabilities with scroll-scrubbed video and interactive 3D
Moirewick: pull a print as you scroll
Ink blooms, rolls out, paper fans and a print peels, all scrubbed by your scroll.
Mareld Tasting Counter
Twelve stools on one basalt counter: read the menu by depth, then choose your seats on the real plan
Ravell Hair House You Scroll Through
Scroll moves through a real salon visit while you brush a dye shade onto the footage
Tips for Codex
- Keep AGENTS.md short. OpenAI's docs say Codex stops adding instruction files once the combined size reaches project_doc_max_bytes, 32 KiB by default, so a long file can cut off the guidance after it.
- For one folder with different rules, such as a /app/(marketing) section, add an AGENTS.override.md there. The docs say it replaces that folder's AGENTS.md.
- Run /permissions in the Codex CLI to choose when Codex may edit files or run commands without asking, and keep it strict the first time you try a big template.
- Name the template by its slug, the last part of its page address, so Codex fetches the exact prompt instead of guessing from a description.
- Headless or in CI? Set bearer_token_env_var in the config to the name of an environment variable that holds an API key from your AnimatedWebs dashboard, so the key never sits in the file.
Limits to know
- The server hands Codex a build prompt plus the template's details and live demo address, not the demo's source code. Expect a close build, not a copy.
- No AnimatedWebs template lists Codex under Tested with yet. Codex connects through the standard MCP server like any other client, so check the first build against the live demo.
- A Pro template needs Pro, Lifetime or a Prompt Pack credit. Without one the tool answers with a pricing link instead of the prompt.
- The MCP server allows 240 requests per minute per IP address.
- 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 Codex
How do I connect Codex to AnimatedWebs?+
Run codex mcp add animatedwebs --url with the server address from the AnimatedWebs MCP page, then codex mcp login animatedwebs to sign in. The add command saves the server to ~/.codex/config.toml. You can also edit that file by hand and add a [mcp_servers.animatedwebs] table with a url.
Does the setup work in the IDE extension too?+
Yes. OpenAI's docs say the ChatGPT desktop app, the Codex CLI and the IDE extension share this configuration, so one setup covers all of them.
Do I need an API key?+
No. codex mcp login opens a normal AnimatedWebs sign-in, and a free account works. An API key from your dashboard is for headless use, and it goes in an environment variable named by bearer_token_env_var.
Where should my motion rules live?+
In AGENTS.md at the repo root. Codex reads it before each run, and the docs say files closer to your working folder come later and override earlier guidance, so a subfolder can tighten the rules.
Can I keep the server in one repo only?+
Yes. OpenAI's docs describe a project-level .codex/config.toml that works for trusted projects only. Put the [mcp_servers.animatedwebs] table there instead of in your home folder.
Is it free to try?+
Adding the server costs nothing, and a free AnimatedWebs account opens the free templates through it. Pro templates need Pro, Lifetime or a Prompt Pack credit. What Codex costs is set by OpenAI, so check its pricing.
Facts checked on
What this page says about Codex comes from its official documentation, linked below, and Codex can change, so check its docs for the latest. What it says about AnimatedWebs comes from how our own site works.
- Codex reads MCP servers from ~/.codex/config.toml, or from .codex/config.toml in a project, which works for trusted projects only. Each server is a [mcp_servers.<name>] table. Codex docs: MCP ↗
- A streamable HTTP server takes a url, an optional bearer_token_env_var that names the environment variable holding a bearer token, and optional http_headers. These servers support OAuth, and codex mcp login <name> signs in. codex mcp list shows the servers. Codex docs: MCP ↗
- The ChatGPT desktop app, the Codex CLI and the IDE extension share the MCP configuration. Codex docs: MCP ↗
- Codex reads AGENTS.md from its home folder (~/.codex, or the path in CODEX_HOME) and from the project root down to the current folder. It uses AGENTS.override.md first where one exists, concatenates files from root to current folder, and caps the combined size at project_doc_max_bytes, 32 KiB by default. Codex docs: AGENTS.md ↗
- You can check what loaded with codex --ask-for-approval never "List the instruction sources you loaded." Codex docs: AGENTS.md ↗
- On macOS and Linux, the CLI installs with curl -fsSL https://chatgpt.com/codex/install.sh | sh. Run codex in a project folder, and use /permissions to choose when Codex may edit files or run commands without asking. Codex docs: CLI ↗
- AnimatedWebs lists the same codex mcp add animatedwebs --url and codex mcp login commands on its MCP page, and no template lists Codex under Tested with. AnimatedWebs MCP setup ↗
Codex is a trademark of its owner. AnimatedWebs is independent and not affiliated with it.
Pick a look, then hand it to Codex
Play the live demos, open the one you like, and start with a free template or unlock the whole library.