How Rescue Electric was built — and why it converts

The concept

Rescue Electric is a fictional Pasadena electrician, built as a conversion-first service template — the kind of site where a homeowner with a dead breaker panel should find a phone number in under ten seconds. The aesthetic school is safety-placard modernism: the near-black charcoal and electric yellow of an arc-flash warning label, treated with the restraint of a design studio rather than the clutter of a hardware aisle. High contrast, hairline borders, one accent color doing all the talking.

The name leans into the brand's core promise — we come when it matters — so the emergency service card, the 24/7 badge, and the always-visible phone number aren't decoration; they're the product.

• #17191D ink
• #1E2126 panel
• #0F1114 recess
• #2C3036 line
• #FFD426 volt
• #F5F6F8 paper
• #B9BFC9 mist

Typography is a single sharp grotesque — Archivo — pushed hard: 900-weight display with −0.02em tracking, outlined numerals for the process steps, and uppercase letter-spaced kickers as wayfinding.

The techniques

1 · The rescue line (signature interaction)

A crisp 2px yellow line behaves like current flowing through the page, in three coordinated layers. First, a fixed progress line at the very top of the viewport scales with scroll position — throttled to one paint per frame with requestAnimationFrame:

window.addEventListener("scroll", function(){
  if (!ticking) { ticking = true; requestAnimationFrame(paint); }
}, { passive: true });
// paint(): line.style.transform = "scaleX(" + scrollY/max + ")"

Second, every major section carries a .wired::before pseudo-element — a glowing 2px line that sweeps across the section's top edge the moment it enters the viewport. Third, each h2 underline draws itself left-to-right 250ms later, so the current appears to arrive at the border and then jump to the heading. All three are pure transform: scaleX(), so nothing triggers layout.

2 · Flicker-on hero

The hero copy switches on like a fluorescent tube: a keyframed opacity sequence with steps(1,end) so it cuts hard between on and off instead of fading — that's what sells the "electric" feeling.

@keyframes flicker-on{
  0%{opacity:0} 6%{opacity:1} 9%{opacity:.25} 13%{opacity:1}
  17%{opacity:.4} 20%{opacity:1} 100%{opacity:1}
}
.flick{animation:flicker-on 1.15s steps(1,end) forwards}

Under prefers-reduced-motion, the flicker is replaced with a simple fade (not removed — the content still arrives gracefully), the sweep lines render pre-drawn, and the progress line is hidden entirely.

3 · One IntersectionObserver, many effects

A single observer adds a .lit class to each section on entry, then unobserves it. Every entrance effect — the border sweep, the underline draw, the staggered card rises via :nth-child transition delays — hangs off that one class. One JS hook, all choreography in CSS.

4 · Art-directed photography

Both photos are stock-neutral until the palette gets involved. The hero sits under a two-layer scrim: a 100° diagonal gradient (dense charcoal over the text column, thinning to 45% on the right so the electrician stays visible) plus a bottom fade into the page background, so the photo "lands" instead of ending at a hard edge. The dusk exterior shot gets a lighter bottom-only scrim and a yellow caption tab, tying it to the brand system.

5 · A service-area map with zero map tiles

The locality section uses a hand-drawn inline SVG — grid streets, a dashed foothill ridge, Foothill Blvd labeled, and a glowing dashed service-radius circle around the shop. It weighs about 2KB, matches the palette perfectly, and never needs an API key.

How it was made

This site was hand-coded — vanilla HTML, CSS, and JavaScript written line by line, no page builders, no frameworks, no off-the-shelf theme. The only external resource is the Archivo typeface from Google Fonts. Everything else, from the SVG map to the bolt logo to the flicker keyframes, lives in two HTML files.

That's a deliberate choice: fewer dependencies means faster load times, no plugin bloat, and every pixel engineered toward one goal — turning a visitor into a phone call.

Production note: the quote form here shows a client-side "thanks" state only — this is a static demo. In a real deployment it wires to the client's CRM (webhook or form endpoint), with the same markup.

Why this converts

• The phone number never leaves the screen. It's in the sticky header on desktop, a fixed bottom call bar on mobile, the hero's primary button, the emergency card, the form aside, and the footer. A panicked homeowner at 11 PM should never scroll to find it — every tel: link dials in one tap.
• Trust is settled above the fold. Star rating with a review count, "Licensed & Insured" with an actual license number, and years in business sit directly under the hero copy — the three questions every homeowner asks, answered before they scroll.
• Two CTAs for two temperaments. "Call now" serves the urgent visitor; "Get a Free Quote" serves the researcher who won't phone a stranger yet. Both are visible in the first viewport, styled as clear primary/secondary so they don't compete.
• The three-step process reduces fear, not just friction. "Call → diagnose & written quote → fixed and cleaned up" tells the visitor exactly what happens after they commit, including that they approve the price first. Anxiety about the unknown is the #1 reason people don't call trades.
• The form asks for four things. Name, phone, service, optional message. Every extra field costs completions; the details can wait for the callback. The "no spam, we call once" note under the button handles the last objection.
• Locality is stated street-level. Neighborhood names in reviews (Bungalow Heaven, Madison Heights), a 626 number, "20 minutes from our shop," and a radius map — local specificity is the strongest trust cue a service site has, and generic templates can't fake it.