Guides / Adapt a template / Roofing
How to adapt an animated website template for a roofing company
To adapt an animated website template for a roofing company, start from Galewright Storm You Scroll Through, Sunward Solar Year of Sun on Your Roof, Ridgelight Solar Roofs Installer Site That Wakes on Hover or the closest fit, keep the hero with a storm or roof image, hide chapters that talk about technology instead of roofs, add photos of finished local roofs, and apply the roofing style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit roofers and roofing contractors 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
Galewright Storm You Scroll Through
A real storm that clears to sky tells the roofing story: protection when the weather turns.
Pick 2 · Pro
Sunward Solar Year of Sun on Your Roof
Dragging panels onto your roof suits a roofer that also installs solar.
Pick 3 · Pro
Ridgelight Solar Roofs Installer Site That Wakes on Hover
A slate roof turning to solar panels under your pointer shows a replacement before and after.
What to change for a roofing company
Keep
- The hero with a storm or roof image
- Service list
- Estimate form
- Service area map
Hide
- Chapters that talk about technology instead of roofs
- Anything that slows the estimate form
Add
- Photos of finished local roofs
- Financing information
- Warranty terms
- Storm damage checklist
Copy angles
- Lead with the problem: a leak, a hail season, an aging roof.
- Name your service area by city.
- Make the free estimate one tap away on a phone.
Trust elements
- State contractor license number
- Proof of insurance
- Manufacturer certifications you hold
- Real before and after photos with permission
Compliance notes to check
- Show your license number where your state requires it.
- Some states restrict contractors from offering to cover or waive insurance deductibles. Check yours.
- Door-to-door sales can carry a cancellation right. Put it in writing.
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 Galewright Storm You Scroll Through and works for the other two picks if you change the name and slug. The example client is Ridgeview Roofing, a family roofer serving Tulsa, Oklahoma.
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 "galewright-storm-roofing", 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 "Galewright Storm You Scroll Through" (slug: galewright-storm-roofing) into a website for a roofing company.
Example client: Ridgeview Roofing, a family roofer serving Tulsa, Oklahoma. Replace it with my real business details, which I will give you.
Keep:
- The hero with a storm or roof image
- Service list
- Estimate form
- Service area map
Hide:
- Chapters that talk about technology instead of roofs
- Anything that slows the estimate form
Add:
- Photos of finished local roofs
- Financing information
- Warranty terms
- Storm damage checklist
Copy angles:
- Lead with the problem: a leak, a hail season, an aging roof.
- Name your service area by city.
- Make the free estimate one tap away on a phone.
Trust elements to include only if I can supply them:
- State contractor license number
- Proof of insurance
- Manufacturer certifications you hold
- Real before and after photos with permission
Style: use the CSS variables and fonts from the Roofing style pack. Motion intensity: Low. A storm hero is enough. Keep the estimate form, phone number and reviews still and fast.
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.Roofing style pack
Solid, weathered and dependable. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Ember
#f4a95b
Accent
Deep Cobalt
#1c2736
Surface
Deep Cobalt
#0e1520
Background
Bone White
#f1f4f8
Text
Type pairing (Google Fonts)
- Display Barlow CondensedSpecimen ↗
- Body InterSpecimen ↗
Motion intensity: Low
A storm hero is enough. Keep the estimate form, phone number and reviews still and fast.
The CSS export includes the Google Fonts import and motion variables.
# Roofing style pack, Style Reference > Solid, weathered and dependable **Theme:** dark · **Template:** Roofing style pack (https://animatedwebs.com/guides/adapt/roofing) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ember | `#f4a95b` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Deep Cobalt | `#1c2736` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Deep Cobalt | `#0e1520` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Bone White | `#f1f4f8` | `--color-ink` | Headlines and body copy: the primary typographic colour | ## Typography - **Display:** Barlow Condensed, Barlow Condensed 700 - **Body:** Inter, Inter 400 ## Motion - Intensity: Low. Reveal on load, no scroll scrubbing, no parallax. - A storm hero is enough. Keep the estimate form, phone number and reviews still and fast. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Ember (`#f4a95b`) 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 Barlow Condensed + Inter
Questions
Which template is best for a roofing 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 a roofing company site keep, hide and add?+
Keep the hero with a storm or roof image and service list. Hide chapters that talk about technology instead of roofs. Add photos of finished local roofs and financing information.
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.