Guides / Adapt a template / Electric vehicles
How to adapt an animated website template for an electric vehicle brand
To adapt an animated website template for an electric vehicle brand, start from Corsa Nera Electric Coupe Launch, EV Scroll Camera Journey, Arc Sedan Image-Sequence Launch or the closest fit, keep the hero film, hide specs you cannot back up, add charging network and home charging info, and apply the electric vehicles style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit electric vehicle makers and dealers 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
Corsa Nera Electric Coupe Launch
Light racing down a tunnel past the car gives a launch page a clear mood.
Pick 2 · Pro
EV Scroll Camera Journey
A camera flying around the car and stopping at each design detail suits a design-led maker.
Pick 3 · Pro
Arc Sedan Image-Sequence Launch
A pinned frame sequence turns a spec story into a launch event.
What to change for an electric vehicle brand
Keep
- The hero film
- Range, charging and performance stats
- Configurator or reservation button
- The dealer or test drive form
Hide
- Specs you cannot back up
- Extra chapters before pricing
Add
- Charging network and home charging info
- Pricing with fees
- Test drive booking
- Incentive notes with a date
Copy angles
- Answer range and charging first.
- Show the car in daily use, not only studio shots.
- Be plain about price and delivery timing.
Trust elements
- Safety ratings with source
- Warranty length
- Real owner reviews
- Service locations
Compliance notes to check
- Range figures should be labeled as estimates and cite the test method.
- Tax credit and incentive eligibility changes, so date every claim.
- Some states restrict direct sales by manufacturers, so check dealer rules.
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 Corsa Nera Electric Coupe Launch and works for the other two picks if you change the name and slug. The example client is Redline Electric, a multi-brand EV dealer in Sacramento, California.
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 "corsa-nera-ev", 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 "Corsa Nera Electric Coupe Launch" (slug: corsa-nera-ev) into a website for an electric vehicle brand.
Example client: Redline Electric, a multi-brand EV dealer in Sacramento, California. Replace it with my real business details, which I will give you.
Keep:
- The hero film
- Range, charging and performance stats
- Configurator or reservation button
- The dealer or test drive form
Hide:
- Specs you cannot back up
- Extra chapters before pricing
Add:
- Charging network and home charging info
- Pricing with fees
- Test drive booking
- Incentive notes with a date
Copy angles:
- Answer range and charging first.
- Show the car in daily use, not only studio shots.
- Be plain about price and delivery timing.
Trust elements to include only if I can supply them:
- Safety ratings with source
- Warranty length
- Real owner reviews
- Service locations
Style: use the CSS variables and fonts from the Electric vehicles style pack. Motion intensity: High. Scroll-driven film is the product here. Keep configurator and pricing static.
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.Electric vehicles style pack
Sleek, nocturnal and fast. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Cobalt
#8fd3ff
Accent
Deep Cobalt
#171a21
Surface
Void
#08090c
Background
Bone White
#f1f3f6
Text
Type pairing (Google Fonts)
- Display ArchivoSpecimen ↗
- Body InterSpecimen ↗
Motion intensity: High
Scroll-driven film is the product here. Keep configurator and pricing static.
The CSS export includes the Google Fonts import and motion variables.
# Electric vehicles style pack, Style Reference > Sleek, nocturnal and fast **Theme:** dark · **Template:** Electric vehicles style pack (https://animatedwebs.com/guides/adapt/electric-vehicles) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cobalt | `#8fd3ff` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Deep Cobalt | `#171a21` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Void | `#08090c` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Bone White | `#f1f3f6` | `--color-ink` | Headlines and body copy: the primary typographic colour | ## Typography - **Display:** Archivo, Archivo 700 - **Body:** Inter, Inter 400 ## Motion - Intensity: High. Full scroll-driven scenes, always with a reduced-motion fallback. - Scroll-driven film is the product here. Keep configurator and pricing static. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Cobalt (`#8fd3ff`) 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 Archivo + Inter
Questions
Which template is best for an electric vehicle brand?+
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 electric vehicle brand site keep, hide and add?+
Keep the hero film and range, charging and performance stats. Hide specs you cannot back up. Add charging network and home charging info and pricing with fees.
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.