Website redesign · 4 complete concepts
Four fully-built, working websites — not mockups. Each one uses Mr. Restoration's real logo, real contact details and real copy, with a colour system sampled pixel-by-pixel from the logo itself. Every concept carries the same on-device AI, and all four are live below.
Live and fully interactive inside the frame — scroll it, click it, try the AI. For the full effect (and the load animation), open a concept in its own tab.
The four directions
Each concept solves the same problem — get a panicking homeowner to call — but bets on a different instinct.
The emotional one. A real WebGL fire burns behind the headline, and the signature moment is a scroll-driven scene where a burnt room physically heals back to new as you scroll through the restoration timeline.
The trustworthy one. Light, calm and editorial — built to reassure someone whose house just flooded. Leads with proof rather than drama: draggable before/after sliders and a drying-data chart that argues “dry is a number, not an opinion”.
The competence one. A dark operations console that says these people are technicians, not a guy with a van. Centrepiece is a drag-rotatable 3D cutaway house with four clickable damage zones.
The brand one. It takes the two flames in the existing logo — one water, one fire — and makes them the entire structure of the site. The hero is split live between a water shader and a fire shader, and the whole page recolours to whichever element you're dealing with.
Side by side
| Feature | Ignition | Response | Dispatch | Duality |
|---|---|---|---|---|
| AI damage triage | Yes | Yes | Yes | Yes |
| AI photo damage scanner | Yes | — | — | — |
| Live cost estimator | Yes | — | — | Yes |
| WebGL shaders | Fire · smoke · embers | — | — | Fire + water split |
| 3D motion graphics | Parallax emblem, tilt cards | Tilt cards, floating chips | Rotatable 3D house | Depth-split hero |
| Scroll-triggered scene | Room heals as you scroll | Before/after + chart draw | Reveals + zone sync | Split-panel reveals |
| Plays an animation on load | Full intro sequence | Slider auto-sweep | House auto-rotate | Shaders ignite |
| Tone | Cinematic, urgent | Calm, editorial, trusted | Technical, precise | Bold, art-directed |
| Best for | Emotional impact & ads | Insurance-led referrals | Commercial clients | Brand-building |
Under the hood
The brand system wasn't invented — it was extracted. Every colour comes from sampling the logo directly, and it turns out the logo already uses the official US flag colours.
Old Glory Blue #0B3162 and Old Glory Red #B31942 from the flag arc, the wordmark navy #262364, plus the fire and water gradients lifted straight from the two flames.
A Naive Bayes damage classifier trained on a labelled corpus, a computer-vision photo scanner using luminance and Sobel edge analysis, and a parametric cost model. Nothing is uploaded, no API key needed, and the classifier tests at 7/7 on its evaluation set.
Hand-written GLSL shaders and vanilla JavaScript. Nothing to install, nothing to break, and it deploys as static files that load fast on a phone in a driveway.
Full keyboard navigation, skip links, ARIA labelling, visible focus rings, and every animation disables itself under prefers-reduced-motion.
The logo and the drying-equipment photo are Mr. Restoration's own, pulled from the current site. The rest were generated to fill the gaps and are clearly marked everywhere they appear — swap them for real job photography before launch.
Before this goes live
Nothing here blocks reviewing the concepts — but each one is a real gap that has to be closed before launch, and I deliberately did not invent any of them.
assets/ai.js) or I can remove the tool.