HaulOff ← Back to the site
Tiny Mammoth · Template Guide

How this one got made.

HaulOff is a fictional junk-removal brand built to test one idea: that the fastest way to sell "we'll take your stuff away" is to let people watch it happen. Here's the concept, the code, and why it should convert.

01 / CONCEPT & AESTHETIC

Loud, confident, poster-brutalist.

Junk removal is an emotional purchase disguised as a logistics one. The customer isn't buying a truck; they're buying relief from a room that stresses them out. So the whole design leans into speed and certainty — no soft pastels, no timid stock-photo calm.

The aesthetic school is poster brutalism meets utility signage: an ultra-bold Anton display face set in tight all-caps, a near-black graphite ground, and a single jolt of electric lime (#A6E22E) doing all the pointing. Diagonal section splits and oversized numerals borrow from work-truck livery and construction wayfinding — the visual language of people who show up and get it done. Inter carries the body copy so everything stays readable at 16px and up.

The palette, committed

Graphite #1A1B1A · near-black #0F100F · electric lime #A6E22E (accent & CTA only) · white #F5F7F2 · mid-gray #6B6F68. Lime is treated strictly as a display/signal color — body text uses AA-contrast graphite on white and off-white on dark, never lime on white.

02 / TECHNIQUES

The signature: haul-away clear.

A cluster of clutter — an old TV, a mattress, a chair, moving boxes, a lamp — is drawn as inline SVG and stacked with absolute positioning. An IntersectionObserver flips one class on the stage when it scrolls into view; every item then flies toward the truck on a staggered transition, and the space visibly empties as you read.

/* each item carries its own stagger via --d */
.stage.cleared .clutter .item{
  opacity:0;
  transform:translate(360px,-40px) rotate(18deg) scale(.65);
  transition-delay:var(--d);
}

The reveal is driven by the smallest possible JS — observe, add a class, disconnect:

new IntersectionObserver(function(e){
  if(e[0].isIntersecting){ stage.classList.add("cleared"); so.disconnect(); }
}, { threshold:0.4 }).observe(stage);

Under prefers-reduced-motion the CSS renders the cleared/empty state directly — same story, no flying — so nobody gets motion-sick to read a headline. The rest of the page reuses one .reveal observer for gentle fade-ups, and the quote form intercepts submit to show a personalized client-side "thanks" with zero network calls.

03 / HOW IT WAS MADE

Hand-coded, vanilla, by hand.

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 clutter that flies out of frame into the truck 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.

  • Stack: a single hand-written index.html. Vanilla HTML, CSS and a few dozen lines of JS. No frameworks, no build step, no dependencies.
  • External resources: only Google Fonts (Anton + Inter). Every icon, the truck, the clutter, and the favicon are inline SVG or data-URIs — nothing else is fetched.
04 / WHY THIS CONVERTS

Built to book, today.

  • Speed is the whole pitch. "Point at it. It's gone today." answers the only question an overwhelmed customer has before they finish reading.
  • Price certainty kills hesitation. Flat "from $79" figures and "you approve before we start" defuse the #1 fear — a surprise bill.
  • Two CTAs, always paired. A giant tel: call button for the ready-to-go, a "Free Quote" scroll for the researchers — no dead ends.
  • Friction-free form. Four fields, a photo-or-text nudge, and an instant personalized thank-you keep the ask tiny.
  • Trust stacked early. 4.8★ / 694 reviews, Licensed & Insured, and "since 2018" sit under the hero, before the scroll even starts.
  • The signature sells the feeling. Watching clutter fly out to the truck is a 3-second dopamine hit that makes "book now" feel like relief.
05 / WHY THIS ONE IS UNIQUE

What sets it apart.

Across our template library, each template is pushed along a few deliberate axes. HaulOff's dials:

VoiceMaximum-confidence, imperative, almost cocky — "point at it" — vs. the reassuring-neighbor tone most trades default to.
EnergyHigh-contrast poster brutalism with one loud accent, tuned for urgency, not calm premium polish.
MotionA literal, narrative interaction (space empties) instead of decorative reveals, before/after sliders, or door-slat wipes.
LayoutDiagonal splits and oversized numerals carry the structure, echoing work-truck and jobsite signage.

Design hypothesis

Junk-removal buyers are overwhelmed by stuff and crave speed and relief. A loud, confident "point at it and it's gone today" voice — paired with literally watching the clutter disappear — sells the feeling of a cleared space and should drive same-day booking over slower, timid competitors who lead with logistics.

The advantages

  • Emotional payoff up front. Most competitors describe the service; this one lets you feel the result before you've decided.
  • Unmistakable brand. Anton + lime + graphite is instantly recognizable and near-impossible to confuse with the sea of blue-gradient handyman sites.
  • Featherweight and fast. One file, no libraries, all-inline graphics — it loads instantly on a phone in a driveway, which is exactly where it'll be opened.