Guides / Adapt a template / SaaS
How to adapt an animated website template for a SaaS product
To adapt an animated website template for a SaaS product, start from Heightwell Ten Thousand Cubes That Reshape With Your Data, Kestrel PC AI with a Scroll-Scrubbed Fiber Iris Film, Summitline Planet Rising Over a Cave Valley or the closest fit, keep the hero with one clear promise and one button, hide decorative chapters that do not show the product, add a short demo video or interactive product tour, and apply the saas style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit SaaS companies and software 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
Heightwell Ten Thousand Cubes That Reshape With Your Data
Its hero is a live data board, so a visitor sees what your product does before reading a word.
Pick 2 · Pro
Kestrel PC AI with a Scroll-Scrubbed Fiber Iris Film
A quiet dark page with one strong focal point suits a product that has to explain itself fast.
Pick 3 · Pro
Summitline Planet Rising Over a Cave Valley
A calm, story-led scroll that works well for a productivity or planning tool.
What to change for a SaaS product
Keep
- The hero with one clear promise and one button
- The product screenshot or live data section
- The pricing table
- The FAQ
Hide
- Decorative chapters that do not show the product
- Any section that repeats the hero claim
Add
- A short demo video or interactive product tour
- An integrations row
- A security and privacy page link
- A changelog link
Copy angles
- Lead with the job your customer hires the product for, not the feature list.
- Name the before and after in one line: what the team does today, what it does with you.
- Put the price or a clear starting point on the page so buyers do not have to ask.
Trust elements
- Real customer logos you have permission to show
- A named customer quote with a role and company
- Links to your security, privacy and terms pages
- A visible status page link
Compliance notes to check
- Publish a privacy policy that matches what you actually collect. Several states have consumer privacy laws that can apply to a US software company.
- Only claim a security certification, such as SOC 2, if you hold a current report.
- Automatic renewal and cancellation rules vary by state, so state the renewal terms next to the price.
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 Heightwell Ten Thousand Cubes That Reshape With Your Data and works for the other two picks if you change the name and slug. The example client is Harbor Ledger, a bookkeeping app for small contractors in Columbus, Ohio.
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 "heightwell-live-data-dashboards", 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 "Heightwell Ten Thousand Cubes That Reshape With Your Data" (slug: heightwell-live-data-dashboards) into a website for a SaaS product.
Example client: Harbor Ledger, a bookkeeping app for small contractors in Columbus, Ohio. Replace it with my real business details, which I will give you.
Keep:
- The hero with one clear promise and one button
- The product screenshot or live data section
- The pricing table
- The FAQ
Hide:
- Decorative chapters that do not show the product
- Any section that repeats the hero claim
Add:
- A short demo video or interactive product tour
- An integrations row
- A security and privacy page link
- A changelog link
Copy angles:
- Lead with the job your customer hires the product for, not the feature list.
- Name the before and after in one line: what the team does today, what it does with you.
- Put the price or a clear starting point on the page so buyers do not have to ask.
Trust elements to include only if I can supply them:
- Real customer logos you have permission to show
- A named customer quote with a role and company
- Links to your security, privacy and terms pages
- A visible status page link
Style: use the CSS variables and fonts from the SaaS style pack. Motion intensity: Medium. Let one hero effect carry the page. Keep scroll effects out of the pricing and signup sections so buyers can decide without fighting the page.
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.SaaS style pack
Precise, dark and confident, with one electric accent. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Electric Cyan
#38d4ff
Accent
Deep Cobalt
#1a2233
Surface
Void
#0a0e18
Background
Bone White
#eef2fa
Text
Type pairing (Google Fonts)
- Display Inter TightSpecimen ↗
- Body InterSpecimen ↗
Motion intensity: Medium
Let one hero effect carry the page. Keep scroll effects out of the pricing and signup sections so buyers can decide without fighting the page.
The CSS export includes the Google Fonts import and motion variables.
# SaaS style pack, Style Reference > Precise, dark and confident, with one electric accent **Theme:** dark · **Template:** SaaS style pack (https://animatedwebs.com/guides/adapt/saas) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Cyan | `#38d4ff` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Deep Cobalt | `#1a2233` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Void | `#0a0e18` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Bone White | `#eef2fa` | `--color-ink` | Headlines and body copy: the primary typographic colour | ## Typography - **Display:** Inter Tight, Inter Tight 600 - **Body:** Inter, Inter 400 ## Motion - Intensity: Medium. One scroll-driven hero effect, simple reveals below it. - Let one hero effect carry the page. Keep scroll effects out of the pricing and signup sections so buyers can decide without fighting the page. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Electric Cyan (`#38d4ff`) 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 Inter Tight + Inter
Questions
Which template is best for a SaaS product?+
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 a SaaS product site keep, hide and add?+
Keep the hero with one clear promise and one button and the product screenshot or live data section. Hide decorative chapters that do not show the product. Add a short demo video or interactive product tour and an integrations row.
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.