Guides / Adapt a template / AI startup
How to adapt an animated website template for an AI startup
To adapt an animated website template for an AI startup, start from Halcyon Private AI with a Living Particle Iris, Ansa Glass Cards Over Sliding Type, Bimo AI Support Teammate or the closest fit, keep the hero with a plain statement of what the model or agent does, hide abstract chapters that never show an output, add a real example input and output, and apply the ai startup style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit AI startups and AI product teams best
Every pick has a live demo. Open it, scroll it on your phone, then edit it in Create or fetch its prompt.
Pick 1 · Pro
Halcyon Private AI with a Living Particle Iris
A single living focal object signals a serious AI product without stock robot imagery.
Pick 2 · Pro
Ansa Glass Cards Over Sliding Type
A light, card-based page that shows an assistant at work and loads quickly on phones.
Pick 3 · Pro
Bimo AI Support Teammate
A friendly mascot and a comparison table suit a support or agent product that needs to feel approachable.
What to change for an AI startup
Keep
- The hero with a plain statement of what the model or agent does
- A live or recorded demo
- The use case cards
- The pricing or waitlist block
Hide
- Abstract chapters that never show an output
- Claims about a model you do not run
Add
- A real example input and output
- A data handling and model provider note
- A limitations section
- A docs and API link
Copy angles
- Show one real task end to end before any big claim.
- Say what the product does not do. It builds trust faster than superlatives.
- Name the humans in the loop if there are any.
Trust elements
- A plain data use statement
- Named pilot customers with permission
- A link to docs and a changelog
- An honest list of limitations
Compliance notes to check
- Back up claims about accuracy or savings with evidence you can show. The FTC has warned against unsupported AI claims.
- Tell users when content or support replies are AI generated.
- Explain how customer data is used and whether it trains models.
General guidance only, not legal advice. Rules differ by state and change over time, so confirm the details with a licensed attorney or compliance professional before you publish.
Copy-ready adaptation prompt
Paste it into Claude, Cursor or Lovable. It is written for Halcyon Private AI with a Living Particle Iris and works for the other two picks if you change the name and slug. The example client is Plainwater, an AI assistant that drafts replies for dental front desks in Denver.
1. Fetch the template with the MCP
claude mcp add --transport http animatedwebs https://mcp.animatedwebs.comUse the animatedwebs MCP. Call get_template_prompt for "halcyon-private-ai", then build it as a Next.js site and adapt it with the prompt below.Setup for every client is on the MCP page. Pro templates use a Prompt Pack credit or come with Pro.
2. Adapt it
Adapt the AnimatedWebs template "Halcyon Private AI with a Living Particle Iris" (slug: halcyon-private-ai) into a website for an AI startup.
Example client: Plainwater, an AI assistant that drafts replies for dental front desks in Denver. Replace it with my real business details, which I will give you.
Keep:
- The hero with a plain statement of what the model or agent does
- A live or recorded demo
- The use case cards
- The pricing or waitlist block
Hide:
- Abstract chapters that never show an output
- Claims about a model you do not run
Add:
- A real example input and output
- A data handling and model provider note
- A limitations section
- A docs and API link
Copy angles:
- Show one real task end to end before any big claim.
- Say what the product does not do. It builds trust faster than superlatives.
- Name the humans in the loop if there are any.
Trust elements to include only if I can supply them:
- A plain data use statement
- Named pilot customers with permission
- A link to docs and a changelog
- An honest list of limitations
Style: use the CSS variables and fonts from the AI startup style pack. Motion intensity: High. A 3D or particle hero is fine here, but pause it when the tab is hidden and show a still frame for reduced motion.
Rules:
- Keep the template's motion, and respect prefers-reduced-motion.
- Make it mobile first and keep the main action visible on a phone.
- Never invent testimonials, statistics, licenses or credentials. Use clearly marked TODO placeholders instead.
- Add the legal pages and notices this business type usually needs, and flag anything I should confirm with a licensed professional.AI startup style pack
Dark, deep and curious, with a violet signal color. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Iris
#a98bff
Accent
Deep Indigo
#1b1730
Surface
Void
#07060f
Background
Bone White
#f1eefb
Text
Type pairing (Google Fonts)
- Display SoraSpecimen ↗
- Body InterSpecimen ↗
Motion intensity: High
A 3D or particle hero is fine here, but pause it when the tab is hidden and show a still frame for reduced motion.
The CSS export includes the Google Fonts import and motion variables.
# AI startup style pack, Style Reference > Dark, deep and curious, with a violet signal color **Theme:** dark · **Template:** AI startup style pack (https://animatedwebs.com/guides/adapt/ai-startup) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Iris | `#a98bff` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Deep Indigo | `#1b1730` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Void | `#07060f` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Bone White | `#f1eefb` | `--color-ink` | Headlines and body copy: the primary typographic colour | ## Typography - **Display:** Sora, Sora 600 - **Body:** Inter, Inter 400 ## Motion - Intensity: High. Full scroll-driven scenes, always with a reduced-motion fallback. - A 3D or particle hero is fine here, but pause it when the tab is hidden and show a still frame for reduced motion. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Iris (`#a98bff`) for primary actions, links and highlights only - Let the hero motion carry the page; type and buttons sit on a scrim above it - Respect prefers-reduced-motion: no pinning or scrubbing, show final states ### Don't - Don't fill large sections with the accent colour; it is a signal, not a surface - Don't add typefaces beyond Sora + Inter
Questions
Which template is best for an AI startup?+
Start with the first of the three picks on this page, then compare the other two. Each has a live demo you can scroll, and all three can be edited in Create.
What should an AI startup site keep, hide and add?+
Keep the hero with a plain statement of what the model or agent does and a live or recorded demo. Hide abstract chapters that never show an output. Add a real example input and output and a data handling and model provider note.
Does this page give legal advice?+
No. The compliance notes are general reminders of topics to check. Laws differ by state, so confirm the details with a licensed attorney or compliance professional before you publish.
How do I use the style pack?+
Copy or download the CSS variables, the Tailwind theme or the DESIGN.md snippet, and give it to your AI builder with the adaptation prompt so the colors, fonts and motion stay consistent.