Guides / Adapt a template / Energy
How to adapt an animated website template for an energy company
To adapt an animated website template for an energy company, start from Kelvane Grid Power for AI, Sunward Solar Year of Sun on Your Roof, Verdant Climate Particle Scene or the closest fit, keep the hero object, hide generic globes, add estimator assumptions, and apply the energy style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit energy and power companies 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
Kelvane Grid Power for AI
Touching a plasma globe and sizing power makes energy tangible for a utility or storage brand.
Pick 2 · Pro
Sunward Solar Year of Sun on Your Roof
A year of sun in six seconds plus a drag-and-place roof suits a residential solar installer.
Pick 3 · Pro
Verdant Climate Particle Scene
A particle wave becoming a planet suits a clean energy mission page.
What to change for an energy company
Keep
- The hero object
- The savings or sizing estimator
- Project gallery
- The quote form
Hide
- Generic globes
- Savings numbers with no assumptions
Add
- Estimator assumptions
- Financing options
- Warranty terms
- Installer license numbers
Copy angles
- Lead with the bill and the roof, not the technology.
- State assumptions beside every estimate.
- Show local projects.
Trust elements
- State license and insurance
- Manufacturer partners
- Real installs with permission
- Warranty terms in plain words
Compliance notes to check
- Savings estimates should list assumptions and state they are estimates.
- Incentive and tax credit rules change, so date them.
- Avoid describing a financed system as free.
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 Kelvane Grid Power for AI and works for the other two picks if you change the name and slug. The example client is Sunbelt Solar Co., a residential installer in Phoenix, Arizona.
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 "kelvane-plasma-globe-grid", 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 "Kelvane Grid Power for AI" (slug: kelvane-plasma-globe-grid) into a website for an energy company.
Example client: Sunbelt Solar Co., a residential installer in Phoenix, Arizona. Replace it with my real business details, which I will give you.
Keep:
- The hero object
- The savings or sizing estimator
- Project gallery
- The quote form
Hide:
- Generic globes
- Savings numbers with no assumptions
Add:
- Estimator assumptions
- Financing options
- Warranty terms
- Installer license numbers
Copy angles:
- Lead with the bill and the roof, not the technology.
- State assumptions beside every estimate.
- Show local projects.
Trust elements to include only if I can supply them:
- State license and insurance
- Manufacturer partners
- Real installs with permission
- Warranty terms in plain words
Style: use the CSS variables and fonts from the Energy style pack. Motion intensity: Medium. Interactive estimators earn motion. Keep quote forms and legal text still.
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.Energy style pack
Bright, optimistic and technical. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Ember
#b8680a
Accent
Pale Citrine
#e4dfce
Surface
Pale Citrine
#f2efe6
Background
Graphite
#1a1a14
Text
Type pairing (Google Fonts)
- Display OutfitSpecimen ↗
- Body InterSpecimen ↗
Motion intensity: Medium
Interactive estimators earn motion. Keep quote forms and legal text still.
The CSS export includes the Google Fonts import and motion variables.
# Energy style pack, Style Reference > Bright, optimistic and technical **Theme:** light · **Template:** Energy style pack (https://animatedwebs.com/guides/adapt/energy) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ember | `#b8680a` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Pale Citrine | `#e4dfce` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Pale Citrine | `#f2efe6` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Graphite | `#1a1a14` | `--color-ink` | Headlines and body copy: the primary typographic colour | ## Typography - **Display:** Outfit, Outfit 600 - **Body:** Inter, Inter 400 ## Motion - Intensity: Medium. One scroll-driven hero effect, simple reveals below it. - Interactive estimators earn motion. Keep quote forms and legal text still. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Ember (`#b8680a`) 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 Outfit + Inter
Questions
Which template is best for an energy company?+
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 energy company site keep, hide and add?+
Keep the hero object and the savings or sizing estimator. Hide generic globes. Add estimator assumptions and financing options.
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.