A sales landing page for Velvetry, a fictional company that deep-cleans sofas, booths and chairs for cafés, hotels and offices overnight. The brief was the opposite of the other Lab pieces: no engine, no spectacle for its own sake, just a fast page built the way pages that sell are built.
The sales structure
- Hero: an outcome promise ("Sofas that look new again. Overnight, while you're closed."), who it is for, the risk reversal in one sentence, one primary button and a quiet secondary one, with a rating and an insurance line right under the button.
- Show, don't tell: the hero visual is the product result itself, a before/after of the same sofa.
- Problem, proof, process: three pains in the buyer's words, four figures, then four steps that each remove a reason to hesitate.
- Instant quote: the calculator answers "how much?" before the visitor has to ask, and its button carries the quote into the form so nobody types it twice.
- Pricing: three plans with the middle one highlighted and slightly larger (anchoring), prices per seat, VAT and fees stated up front.
- Reviews, guarantee, FAQ: specific quotes with roles, a "dry by opening or free" promise, and answers to the real objections (drying time, fabrics, stains, safety, invoices).
- Close: limited night slots shown as a bar (scarcity tied to a real constraint: three crews), a three-field form, and what happens next. On phones a bar with the main button follows the reader between the hero and the form.
How it's built
- Plain HTML, CSS and SVG. The sofa scene is hand-drawn SVG, drawn twice (worn and stained, or clean with sheen and sparkles); the stained copy is clipped with
clip-path: inset() driven by one CSS variable. No images, so it is crisp at any size and costs no image bytes. - Accessible comparison. A real
<input type="range"> covers the scene, so mouse, touch and arrow keys all work and screen readers hear the position. On load GSAP sweeps the divider once like a cleaning pass, and stops the moment the visitor touches it. - Quote maths live in
pricing.ts (per-item rates, protection surcharge, volume discount, quarterly discount, minimum visit, time on site) with unit tests. The price rolls to its new value with GSAP; a separate quiet live region announces the final figure once. - Motion budget. One batched ScrollTrigger reveal for all blocks, counters on the figures, a CSS marquee for client names. Everything animates transform and opacity only.
- Fonts. Bricolage Grotesque for headlines and Figtree for text, loaded with
next/font inside this experiment only; the loader waits for both so headlines never reflow.
Reduced motion
No reveals, no cleaning sweep, no rolling numbers, no marquee and no sparkle twinkle. The comparison starts at the middle and every figure is shown as its final value.
Velvetry, its venues, prices, figures and reviews are invented for this demo.
