Selling water you never think about.

The concept & aesthetic school

The aesthetic school is resort-grade serenity — a lineage that runs from spa and boutique-hotel branding through editorial travel photography. High-contrast Didone display type (Playfair Display) sits over full-bleed water, with a humanist sans (Inter) doing the calm, legible work below. The palette is committed and narrow: deep marine, teal, and one electric aqua accent, warmed by a single sand tone so the cool water never feels clinical.

Layout follows an immersive full-bleed hero into horizontal "ribbon" sections — alternating light, tinted, and deep-marine bands that give the page a calm tidal rhythm as you scroll.

Techniques

Water-caustics shimmer. The hero photo is filtered through an SVG feTurbulence + feDisplacementMap. Fractal noise displaces the image pixels; JavaScript nudges the turbulence baseFrequency a few thousandths per frame so the refraction slowly breathes like real pool light. A separate screen-blended gradient layer adds moving light dapples on top.

<!-- offscreen filter -->
<filter id="caustics">
  <feTurbulence type="fractalNoise"
     baseFrequency="0.011 0.019" numOctaves="2"/>
  <feDisplacementMap in="SourceGraphic" scale="12"/>
</filter>

Pointer-eased intensity. A pointermove handler measures distance to the hero's center and eases the displacement scale toward the cursor, so the water gets livelier where you look. The loop is throttled to ~30fps and paused via IntersectionObserver when the hero scrolls away.

scaleTarget = 20 - dist * 12;         // 8 far … 20 at center
scaleCur += (scaleTarget - scaleCur) * 0.06; // ease
disp.setAttribute('scale', scaleCur.toFixed(2));

Clarity scrim. Because text over bright water fails contrast fast, a layered gradient scrim (a bottom-weighted linear plus a corner radial anchored under the headline) sits between the shimmer and the copy, holding the white type safely above AA regardless of how the caustics move.

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 living water-caustics shimmer 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 large tel: button in the hero, a header pill, a sticky mobile call bar, and the footer all repeat one number.
• Two CTAs, two temperaments — a bold "call now" for the ready buyer and a low-commitment "free quote" for the researcher, both above the fold.
• Trust is front-loaded — rating, review count, license, and years-in-business sit in a strip immediately under the hero, before any scrolling.
• Every service card ends in an action — no dead ends; each of the six cards routes to the quote form with in-context anchor text.
• A believable process removes friction — four numbered steps make "what happens after I call?" obvious, and the free water test lowers the cost of saying yes.
• The signature stays subordinate — the shimmer is atmosphere, never a gate; it sits behind a scrim and beneath the CTA, so delight never taxes the conversion.

Why this one is unique

Against our other service templates, ClearBlue moves along a few deliberate axes:

Advantages. The living-water hero is memorable and hard to knock off, yet it costs almost nothing to serve and degrades gracefully to a crisp static image under prefers-reduced-motion. Because the effect is atmosphere rather than a barrier, it raises perceived quality — and therefore price tolerance — without ever standing between the visitor and the phone number.