The concept & aesthetic school
BrightWash borrows from industrial / utilitarian design — the visual language of heavy equipment, safety signage and sports branding — and cools it down with a "fresh clean water" palette. The result should feel powerful and energetic, never clinical.
The display face is Archivo Expanded, set wide and heavy in uppercase with open letter-spacing. Extended sans-serifs read as capable and physical — they take up space the way a pressure washer takes up a driveway. Body copy is Inter for calm legibility. The palette commits to a deep slate-blue (#14384B / #0E2735) grounding a single high-energy accent, bright aqua #35C4D6, used only for the accent and every call-to-action so the eye always knows where to click.
Techniques
Everything is hand-written vanilla — no frameworks, no build step, one external request for the two Google Fonts.
The wipe reveal (clip-path + one image, twice)
There's no separate "dirty" photo. The same image is layered twice: a grimy copy (desaturated, darkened, sepia'd via CSS filter) under a clean copy that's clipped from the left by a single custom property. Move the property and the clean surface grows.
/* two identical images, opposite filters */ .grime{filter:saturate(.38) brightness(.62) sepia(.34)} .clean{filter:saturate(1.18) brightness(1.06); clip-path:inset(0 calc(100% - (var(--wipe) * 1%)) 0 0)}
Pointer follows the squeegee
In the hero, a pointermove listener maps the cursor's X position across the photo to --wipe, so sweeping the mouse literally cleans the surface. A glowing "squeegee" bar is pinned to the same variable with mix-blend-mode:screen so it reads as a spray of light. Touch scrolls the page instead of hijacking the gesture.
el.addEventListener('pointermove', e => {
const r = media.getBoundingClientRect();
const pct = (e.clientX - r.left) / r.width * 100;
media.style.setProperty('--wipe', clamp(4, pct, 97));
});
Auto-sweep on scroll-into-view
The proof panel below the hero animates itself once. An IntersectionObserver fires a requestAnimationFrame tween of --wipe from 8% to 94% with an ease-in-out curve — a single, deliberate "one pass" that mirrors how the crew actually works. It runs exactly once, then disconnects.
new IntersectionObserver(([e],io) => {
if(e.isIntersecting){ sweep(); io.disconnect(); }
}, {threshold:.45}).observe(panel);
Reduced-motion is a real state, not a kill switch
Under prefers-reduced-motion, nothing auto-animates: the panel loads already ~70% cleaned so the payoff is still visible, the hero starts at 70% and drops its clip transition. The site stays calm but never loses its argument.
How it was made
This site was hand-coded — plain HTML, CSS, and JavaScript, written line by line. No page builders, no drag-and-drop themes, no off-the-shelf frameworks. Every detail, from the power-wash wipe that reveals clean under grime to the sticky call bar, was engineered specifically to move a homeowner toward one action: picking up the phone.
That's the Tiny Mammoth approach to a client website: a template built to convert, not just to look good.
Why this converts
- The phone is never more than a glance away. A tel: link sits in the sticky top bar, a giant tel: button anchors the hero, and a fixed call bar owns the bottom of every mobile screen.
- The trust strip answers objections instantly — 4.9★ from 438 reviews, licensed & insured, 9 years in business — right under the first CTA, where doubt would otherwise creep in.
- The signature interaction is the proof. Watching grime disappear does the persuading that paragraphs of copy can't, then hands off to the quote button.
- The form is deliberately short — name, phone, service, message. Four fields is enough to call someone back; every extra field is a lost lead.
- Every service card ends in a CTA, so interest converts to action at the exact moment it peaks instead of forcing a scroll back up.
- One signature moment, then out of the way. After the reveal, the page turns quiet and functional — services, process, reviews, book — so nothing competes with the decision to call.
Why this one is unique
Every template in our template library deliberately differs from our other service templates along four axes. Here's where BrightWash stakes its own ground.
Palette
Deep slate-blue grounding a single electric aqua — "clean water," energetic, not the soft pastels or earth tones other trades lean on.
Typography
Archivo Expanded, wide and heavy in uppercase — an industrial, physical voice, not a friendly rounded or elegant serif.
Layout
Full-bleed photographic hero over a scrim, followed by a confident stat band — image-forward, not a card grid or split layout.
Signature
A power-wash wipe reveal: pointer-cleaned in the hero, auto-swept once on scroll. Pointedly not a draggable before/after slider.
Design hypothesis: pressure washing sells on the satisfying transformation. Letting a visitor watch dirty become clean in one motion is the strongest possible proof — it triggers the "I want that for my house" impulse faster than any headline can.
What that buys the business owner: the most emotional part of your service — the reveal — happens on the homepage, before anyone reads a price. Prospects arrive at your quote form already convinced, so the form's only job is to be short enough not to lose them. The wipe also doubles as your portfolio: it demonstrates results without needing a wall of matched before/after photos, and it recolors to your brand automatically. Because it's plain HTML with no dependencies, it loads instantly on a phone in a driveway and will still run, untouched, years from now.