Back to the site

Design & conversion guide

How the Dr Wheel
site was made

This is the maker's guide for the Dr Wheel template — the concept behind it, the techniques inside it, and the conversion decisions that make it earn phone calls, not just compliments.

01 The concept

Dr Wheel is a mobile rim repair company — the first in Southern California, family-owned, 25+ years in — and the site is built around its single biggest differentiator: the shop comes to you. Every section reinforces that promise, from the hero pitch ("We'll fix them at your location") to a process section with "zero trips to a shop" as the headline.

The aesthetic school is premium-clean automotive: a white canvas, a black/neutral text scale (#222 / #444 / #666), and one loud brand red (#FF3534) that is reserved almost exclusively for actions and proof marks — CTAs, the slider handle, the map pins, the diagnosis cross in the logo. A condensed display face (Oswald) gives it garage-signage confidence; Inter keeps the body copy quiet and legible. Photography is treated dark and rich so the wheels stay the most saturated thing on the page. The "doctor" brand angle lives in the copy — "diagnosis," "second opinion," treatment language — but the tone stays craftsman-credible, never cartoon.

One accessibility detail worth calling out: #FF3534 on white fails AA contrast for small text, so the palette splits the red into two tokens — the brand red for fills and large display, and a darkened #D6201F for small red text and links. Same visual identity, no illegible type.

02 The techniques

The before/after slider (the signature)

The comparison widget uses one photograph twice. The "after" is the original image; the "before" is the same image with a CSS filter chain (saturate(.25) brightness(.72) sepia(.14)) plus two overlay layers: an SVG feTurbulence texture stretched into horizontal scratches via an anisotropic baseFrequency (0.012 × 0.28), and radial-gradient "rash" hotspots blended with mix-blend-mode: overlay near the wheel lip. The divider position is a single CSS custom property:

/* before layer is clipped by --pos; JS only moves one number */
.before-layer { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

The drag control is a full-bleed, invisible <input type="range"> laid over the image. That one decision buys pointer drag, tap-to-jump, touch support, and full keyboard operation (arrow keys) with zero custom event code — the browser's own slider does the work, and a white divider + red handle simply track its value. On the white page, the dark photo block makes the widget the visual anchor of the whole site.

The intro sweep

Sliders die when nobody realizes they're draggable. When the widget first scrolls into view, a one-time requestAnimationFrame loop eases the divider from 50% to 22% and back using a cosine curve — a 1.4-second "look, I move" gesture. It's gated behind an IntersectionObserver and skipped entirely under prefers-reduced-motion.

Choreographed reveals

Every section uses a single .rv class — opacity + 26px translate — flipped on by one IntersectionObserver. Stagger is done declaratively with inline transition-delay on siblings (0 / .07s / .14s), so cards arrive in a wave rather than a clump. Reduced-motion users get everything visible immediately.

Depth on a white page

Light themes go flat fast. The site keeps dimension with a two-tier shadow system (a soft card shadow and a heavier "pop" shadow for the hero photo, slider, and form), alternating #FFF / #F7F7F8 section bands, and a full-bleed near-black stat strip under the hero that gives the page one confident dark note. The service-area "map" is a hand-drawn inline SVG — a faint coastline, pulsing-ring pins for each region, a "+ Greater Houston, TX" chip — locality signaling with zero map-tile dependencies.

03 How it was made

This site is hand-coded HTML, CSS, and JavaScript — no page builders, no frameworks, no off-the-shelf themes. The whole thing is two HTML files, two photographs, and inline SVG, engineered from the ground up for conversion: every layout, animation, and interaction decision serves the goal of turning a visitor into a phone call or a quote request.

04 Why this converts