How this move was mapped out.

01The concept

Homestead Moving Co. is a website template for a fictional family-run moving company based in Monrovia, serving the San Gabriel Valley and beyond. The aesthetic school is "organized calm" — warm sand and deep indigo instead of the loud reds and exclamation points most moving-company marketing reaches for, because the buyer here isn't shopping on excitement. They're shopping on relief.

Moving is reliably ranked among the most stressful life events people pay money for. Nobody hires a mover because they're excited — they hire one because their life is already in boxes and they need someone to tell them, calmly, exactly what happens next.

So the whole site is built around one idea: show the plan, don't sell the muscle. Instead of stock photos of biceps and a wall of "WE MOVE ANYTHING" copy, the page itself is organized like the move's own timeline — quote, packing day, moving day, home — with a route line running down the page connecting them, and a small truck that drives it as you scroll. The design's actual job is to make a frazzled homeowner feel like someone already has this handled.

02The techniques

The route line & the driving truck

A dashed vertical line (a repeating CSS gradient, not an image) runs through the process, reviews, service-area, and quote sections. A small inline-SVG truck sits on top of it, and its vertical position is tied directly to scroll progress — not a fixed scroll-jack, just a value computed on every frame:

var target = scrollY + innerHeight * 0.42 - routeTop;
stops.forEach(function(s){
  if (Math.abs(target - s.y) < PARK_BAND) { parked = true; truckY = s.y; }
});
truckWrap.style.transform = "translate(-50%," + truckY + "px)";

The milestones aren't hard-coded pixel values — they're measured live from the actual "Free Quote," "Packing Day," and "Moving Day" step numbers using getBoundingClientRect(), so the truck always parks exactly on the right stop even if the copy reflows at a smaller viewport. When the truck is within a 46px band of a milestone, it locks onto that exact position and its wheels stop spinning — a small, readable "we've arrived" moment — then releases and keeps driving once you scroll past.

Alternating timeline layout

On wide screens the three process steps alternate left/right around the centered route line using CSS order inside a three-column grid, with an empty spacer column doing the layout work so the text card always sits on the outside of the line. On narrow screens the grid collapses to a single left-aligned column and the spacer is hidden — no JavaScript reflow required, just a media query.

Reduced-motion fallback

Under prefers-reduced-motion: reduce, the scroll listener never attaches. The truck is placed once, statically, at the final "Moving Day" milestone with its wheels frozen, and all three stops are marked reached — the calm version of "you're home," delivered instantly instead of earned by scrolling.

Art-directed photography

The hero photo carries a two-part indigo scrim — a diagonal gradient plus a bottom fade — so white headline text clears AA contrast at every point it overlaps the image. The detail photo (boxes and moving blankets) sits inside a dark indigo band with a soft coral-tinted multiply wash, tying the photography back into the five-color palette instead of floating on top of it as raw stock.

Choreographed reveals

A single IntersectionObserver adds an .in class as cards, steps, and reviews enter the viewport, staggered with delay utility classes (.d1–.d6) instead of per-element timers — the same lightweight pattern used across the template set.

04How it was made

Hand-coded HTML, CSS, and JavaScript — no page builders, no drag-and-drop themes, no off-the-shelf frameworks. One HTML file, one stylesheet in its head, one script at its foot; the only external requests are two Google Fonts families. Every decision, from the route-line math to the four-field form, was engineered for conversion rather than pulled from a template library.

That's the Tiny Mammoth approach to a client site: build the thing a business owner can actually explain to their next hire, and make sure every pixel is either building trust or asking for the call.

05Why this one is unique

Across the template library, each site deliberately moves on four axes — palette, typography, layout, and signature — so no two feel related, even within the same trade category. Homestead's coordinates:

Concrete advantages: the timeline structure gives the page an obvious, self-explaining information architecture that a business owner can point to and say "yes, that's the order it happens in"; the truck is a single small, dependency-free rAF loop rather than a scroll-jacking library, so it costs almost nothing and degrades to a calm static image under reduced motion; and because the milestones are measured live off real DOM elements rather than hard-coded pixels, the interaction stays correct even as the client edits their own copy later.