The concept
SwiftLift is a website template for a real category of business: the local garage door company whose customers arrive stressed — a snapped spring at 7 AM, a car trapped, a door hanging off its track. The aesthetic school is clean industrial-modern: brushed-steel grays, one loud hit of safety orange, and a squared technical sans (Chakra Petch) that reads like the lettering on a well-kept work truck. It borrows from tool-brand design language — DeWalt's discipline, not grunge-texture cosplay.
Every visual choice defers to one job: a stressed homeowner should find a phone number and believe in the company within ten seconds. The wow moment happens once, at the top, then the page gets out of the way.
The techniques
1 · The garage-door reveal
The signature moment: on load, the hero photo is hidden behind five full-width "slats" styled as steel door panels (gradient face, seam line, recessed panel shadow). Each slat sits inside an overflow:hidden strip and slides up translateY(-102%) with a 90ms stagger, top slat first — so the hero opens exactly like a sectional door rolling up. Total run: about 1.1 seconds, then the whole layer is removed from the DOM flow.
.door.open .door-slat span { transform: translateY(-102%); }
.door.open .door-slat:nth-child(2) span { transition-delay: .09s; }
/* … 5 slats, .72s cubic-bezier(.65,.02,.23,1) each */
/* prefers-reduced-motion: .door { display:none } — photo is just there */It runs once, it's fast, and under prefers-reduced-motion the panels never render at all — the visitor simply sees the finished hero.
2 · Art-directing stock-style photos with CSS
Both photos are tinted into the palette rather than dropped in raw. The hero gets a two-layer scrim (a vertical steel-gray gradient plus a horizontal one that darkens the text side) so white type passes AA on top of a dusk photo. The detail shot gets a mix-blend-mode: multiply overlay that pushes steel-gray and a whisper of orange into the highlights, so it feels shot for the brand.
3 · Hazard-stripe accents, used twice
A repeating-linear-gradient(-45deg, …) in orange and near-black makes a caution-tape stripe. It appears as a 6px band on the dark sections' top edge and as a hover-reveal on service cards — enough industrial flavor to set the tone without turning the page into a construction site.
background: repeating-linear-gradient(-45deg,
#F26722 0 16px, #1C1F22 16px 32px);4 · Staggered scroll entrances
One IntersectionObserver adds an .in class to elements tagged .rise; CSS handles the 26px lift-and-fade with sibling-based transition-delay so grids cascade instead of popping in as a block. Each element is unobserved after firing — the animation never re-runs and the observer costs nothing after first scroll.
5 · The chunky "pressed" buttons
CTAs use a flat box-shadow: 0 4px 0 <darker> instead of a blur — a machined, mechanical look that matches the brand. On hover the button lifts 2px and the shadow deepens, so it reads like a physical button you could press. Focus states stay visible with a 3px orange outline.
The palette
Four steels, a paper white, and two oranges. Orange is rationed: it only marks actions and trust — never decoration for its own sake.
Why this converts
- The phone number appears five times — header, hero, service cards, quote section, footer — and it's a live
tel:link every time. A stressed homeowner never has to hunt or scroll back. - Two CTAs for two temperaments. "Call now" for the emergency caller, "Get a Free Quote" for the researcher who won't phone a stranger. Both are above the fold; both repeat down the page.
- Trust strip in the first viewport. Star rating + review count, license number, and years in business sit directly under the hero — the three things a homeowner subconsciously checks before dialing.
- Sticky mobile call bar. On phones (where most emergency searches happen) a fixed bottom bar keeps Call Now and Free Quote one thumb away at every scroll depth, with body padding so it never covers content.
- The 3-step process kills the biggest anxiety — "what happens after I call?" Naming the flat-quote-before-work step preempts the price-gouging fear this industry is famous for.
- The form asks for four things only. Name, phone, service, optional note. Every extra field costs completions; the note under the button ("we call once, with a price") removes the spam fear. In production the form posts to the client's CRM — this static demo shows the thanks state client-side.
How it was made
This entire site — markup, styles, copy, interactions — was hand-coded HTML, CSS, and JavaScript by the Tiny Mammoth team. No page builders, no frameworks, no off-the-shelf themes; one lean HTML file plus this guide, engineered from the ground up for conversion.