01The concept
Ember & Oak is a website template for a fictional two-generation chimney sweep company in Sierra Madre, California. The aesthetic school is hearth gothic — soot black, ember-orange gradients, and warm cream, built on an old-style serif with a small-caps flavor. It's dark and warm at once: the palette of a fireplace at night, not a hazard sign.
"Keep the fire. Clear what's hiding above it." — the whole site hangs off that tension. A dirty chimney is an invisible risk attached to a beloved ritual. The design's job is to hold both truths on screen at the same time: the coziness that makes people love their fireplace, and the quiet, certified authority that tells them what's wrong with it.
But this is a service template, not an art piece. A homeowner who hasn't swept in three winters should feel both reassured and gently urged to act — and find the phone number in under ten seconds. Every decorative decision defers to that.
02The techniques
The ember drift canvas
The hero runs a sparse canvas of 40-odd particles rising slowly through the frame, each wobbling on its own sine wave and flickering in brightness independently — a chimney fire's embers caught mid-air rather than a snowfall in reverse. Density is kept low on purpose: the headline and phone number stay the dominant thing on screen.
e.y -= e.speed; // rise
e.x += e.drift + Math.sin(e.wob) * 0.3; // gentle sideways wobble
var flicker = 0.4 + 0.6 * (0.5 + 0.5 * Math.sin(e.flick));
ctx.fillStyle = "rgba(" + e.hue + "," + (fade*flicker*0.85) + ")";Under prefers-reduced-motion, the canvas never runs — a static warm radial glow pools at the base of the hero instead, so the room still feels lit without anything moving.
The flue rule
A thin vertical line runs down the center of every section, and where sections meet, a small glowing ember node marks the joint — the page reads like a chimney drawn in cross-section, with each service, review, and form "hanging" off the same flue as it descends. It's a quiet structural metaphor rather than a loud one: opacity stays under 40% so it never competes with copy.
The inspection-tag panel
The $189 sweep-and-inspection offer is styled as a physical job ticket: a punched hole built from an inset box-shadow circle, a dashed inner rule via an ::after pseudo-element, a curved SVG string, and a slight rotation that eases upright on hover — the same skeuomorphic trick used sparingly, on one element, so the offer feels like something you could hold.
Art-directed photography
The rooftop hero photo wears a warm-soot diagonal scrim so cream text clears AA contrast everywhere it sits. The fireplace detail photo, used in the "Why Ember & Oak" band, gets a multiply wash tinted toward ember rather than neutral charcoal — the one photo in the whole page allowed to look purely cozy, because the copy beside it is doing the safety-and-certification work.
Type and texture
EB Garamond carries the display work with small-caps used on kickers, stamps, and eyebrows for an old-ledger feel; Source Sans 3 keeps the body quiet and legible. A fixed full-page SVG feTurbulence grain at 3% alpha keeps the cream background from feeling like a flat hex value.
Choreographed reveals
A single IntersectionObserver adds an .in class as elements enter the viewport; staggering comes from five delay utility classes (.d1–.d5) rather than per-element JS timers. Elements animate once, then the observer lets go of them.
03Why this converts
The atmosphere is in service of a funnel. If you're a business owner evaluating this template, these are the engineered decisions:
- The phone number appears five times — header, hero button, job ticket, footer, and the mobile call bar — and every instance is a live
tel:link. A homeowner on a phone never has to type your number. - Trust strip directly under the headline: star rating with count, certification number, and years in business sit above the fold, because "can I trust these people near my open flame" gets answered before any scrolling happens.
- A sticky mobile call bar pins "Call Now" and "Free Quote" to the bottom of every phone screen. Chimney concerns spike right before cold snaps, often searched on a phone; the primary action is always one thumb away. Body padding ensures it never covers content.
- The offer is a priced, named service — "$189 sweep & inspection," not "contact us." A concrete, low-risk first step with a stated deliverable (creosote removal, camera inspection, written report) out-converts a vague form, and matches how homeowners already think about the job ("get it swept").
- The form asks four things. Name, phone, a dropdown, an optional message. Every additional field costs completions; everything else can be asked on the callback. The "Dana reads them at 7am" line answers the silent question — will anyone actually see this?
- Locality everywhere: a 626 phone number, Sierra Madre Boulevard, Altadena and Monrovia in the reviews, an eight-city service chip list. For home services, "they work on my street" is the strongest trust cue there is.
Note: this is a static template, so the quote form shows a client-side "thank you" state only. In production it wires to the client's CRM (webhook or form endpoint) with the same markup.
04Why this one is unique
Home-service templates default to one emotional register: urgency. Red, yellow, exclamation points, "call now before it's worse." Ember & Oak deliberately runs the opposite axis, because the chimney trade sells a feeling — the fireplace, the ritual, the cold night made warm — before it sells a repair. The design hypothesis: cozy sells the call; certification closes it. Preserve the warmth of the fireplace on screen, and let a certified expert quietly name the danger (creosote, a cracked flue) rather than shouting it. Fear alone reads as a sales tactic; warmth plus a specific, credentialed risk reads as an expert telling you the truth.
Palette hazard vs. hearth
Most trade sites reach for safety orange or caution yellow at full saturation. This one uses an ember gradient that only ever appears against soot black or warm cream — the same orange a real fire throws on a dark room, never the orange of a traffic cone.
Structure flue rule vs. generic divider
Instead of a decorative wave or angle between sections (the default for this kind of template), the page borrows its own subject: a chimney's cross-section, with sections literally hanging off a central flue line. The metaphor is specific to this trade and would look wrong ported to a plumber or an electrician.
Motion ember drift vs. attention-grabbing hero video
The signature interaction is sparse and slow on purpose — a handful of embers, not a roaring fire animation. It signals craft and restraint rather than trying to be the most exciting thing on the page; the headline and the phone number stay the loudest elements.
Voice generational calm vs. sales urgency
Copy leans on continuity — "since 1998," "his daughter runs the crews now," a job-ticket number tied to the founding year — instead of scarcity language ("call today!", "limited slots"). Trust is built by implying the company will still be there next year, which is exactly the reassurance a chimney customer wants.
The concrete advantage for a real chimney business: this template doesn't ask the homeowner to be scared into a booking. It asks them to notice a feeling they already have — love for the fireplace — and hands them a specific, credentialed reason to protect it. That's a lower-friction path to a phone call than fear, and it's more durable across an annual-maintenance business model where the same customer needs to come back happy every year, not just once in a crisis.
05How it was made
Hand-coded HTML, CSS and JavaScript — no page builders, no frameworks, no off-the-shelf themes. One HTML file, one stylesheet in its head, one script at its foot. The only external requests are the Google Fonts files for EB Garamond and Source Sans 3. Every choice, from the ember canvas to the four-field form, is engineered for conversion rather than borrowed from a template library.