Concept
Lightgap Blinds Co. is named for the sliver of daylight at a blockout blind's edge — the honest millimetres every blind leaves, and the thing good measuring shrinks. The audience is shift workers who sleep at noon, parents losing the 5am daylight-savings war, and west-facing lounges unwatchable by TV light. Because the product is darkness at will, the page itself sits inside it: a Balcatta bedroom at midday with the blockouts down, the world outside running at full noon, and a blade of gold light held at each edge of the blind.
Palette — blockout noon
Every colour is argued from the room the fabric makes. The bright gold is a line/mark token only — gap lines, meter fills, dimension marks, the CTA — never long body text. Body copy on the dark ground is carried by linen pale (measured contrast ≈ 14.3:1; the muted linen-dim ≈ 8.1:1; both clear the 4.5:1 floor). Link text uses a brightened sage ink derived from the louvre secondary, because the raw louvre sage sat at a marginal ≈ 4.7:1.
Type
- Young Serif — display. A warm, soft-shouldered serif that reads like linen; used large and sparingly (the h1, section heads, the measure-promise quote).
- Onest — body and UI. Quiet, legible at 16px+ on a phone, which is where most blind-buying happens.
- Martian Mono — millimetres, counts and prices. Everything measured wears the mono, so numbers read as instrument output, not decoration.
The Window Studio — signature & techniques
The studio is a single inline SVG rendered from inside the dark room: wall, floor, a bed and bedside lamp in near-black silhouette, and one window whose width is drawn to scale from the stepper (0.19 px/mm, 600–2400 mm). Four product chips swap honest light behaviours: blockout kills the exterior glow except the two gold edge slivers (the namesake — always rendered, with a feGaussianBlur glow); light-filter renders the fabric as a softly glowing panel; double roller layers a half-dropped blockout over the fully-down glowing filter; shutters draw ten sage louvres whose tilt strips the daylight between blades. A day/night toggle swaps the exterior between noon-gold and street-dark — and at night the bedside lamp switches on, because the light-filter honesty line ("lamps on, the street sees shapes") deserves to be shown, not just told.
All geometry is driven from one requestAnimationFrame loop that lerps current values toward targets — no CSS animation ever touches an attribute JS sets, which sidesteps the SVG presentation-attribute conflicts from earlier waves. The blind drifts on a 9s sine with a never-invisible floor: coverage never drops below ~55%, and the drift is phased so the 7-second thumbnail settle lands at ~85% down — the most dramatic frame, measured at cov = 0.846–0.848 in headless runs. The first render earns the slow entrance (the blind draws down over ~1.4s); every subsequent state change uses a faster lerp constant, so stepper taps feel snappy. Reduced motion renders one settled frame at 70% and re-renders instantly per interaction. The loop pauses on document.hidden.
Pricing model — shape and derivation
All anchors are pinned from the spec and plausible for the 2026 Perth market. The studio's displayed figures were verified against an independently reimplemented oracle in the QA harness at rest and across six driven scenarios.
| Item | Meter | Notes |
|---|---|---|
| Roller blockout | $190/window ≤1500 mm · $260 wide (1500–2400) | Width bands apply per-window across all roller products |
| Light-filter roller | $190 / $260 — same meter | Same fabric engineering, different weave — stated on-card |
| Double roller | $330/window · $400 wide | Blockout + light-filter on one bracket |
| Plantation shutters | $340/m² · min $620/window | Joinery: no count discount, stated on-card. The studio prices at an assumed 1200 mm drop (declared on-card); the measure sets the true m² |
| Motorisation | +$290/blind | Services anchor only — the studio's four controls are the ones that move a real quote |
| Minimum install job | $380 | Single blinds clamp up, with the reason on-card. Cheapest studio output = the services floor: "rollers from $190 (installed jobs from $380)" |
| Whole-home 6+ | −10% off the blinds line | Shown as its own card line; shutters excluded (joinery) |
Measured worked examples (displayed card totals, read from the running page by the harness and matched to the oracle):
- Rest state — 3 × roller blockout at 1200 mm = 3 × $190 = $570 ✓ (spec's pinned rest figure, confirmed by the implemented model)
- 7 × blockout at 1200 mm = $1,330 − 10% = $1,197 ✓ (the spec's second worked example)
- 1 × blockout at 600 mm = $190 → clamps to $380, reason on-card ✓
- 2 × double at 1800 mm (wide band) = $800 ✓ · 1 × shutters at 600 mm = $620 minimum ✓ · 2 × shutters at 1600 mm = 2 × $653 = $1,306 ✓
Deliberate shapes, shipped as statements: the light-filter meter is flat against blockout (same engineering, different weave — said on-card); shutters ignore the count discount ("shutters are joinery — priced by the square metre and worth it"); the shutter drop assumption (1200 mm) is declared on the card rather than silently guessed; and the discount applies to the blinds line only. Shutter per-window figures round to the whole dollar (Math.round), which is why 1600 mm reads $653, not $652.80.
Conversion decisions
- Studio in the hero. The signature shares the 1200×750 thumbnail viewport with the h1 (scene top measured at 240px) — the interactive price demo IS the first impression, and its "Use this in my quote" button plus live pre-fill of the enquiry textarea turns play into a warm lead.
- Two CTAs above the fold at 375px (book + call), with name, value proposition and the since-2016 trust line all inside the first viewport — verified by rect probes and screenshot.
- Sticky mobile bar under 720px: call + free measure, 54px targets.
- Form fields match how blind quotes actually start: name, phone, suburb, a rooms-and-windows description (pre-filled by the studio), and a preferred measure day (
type=date, min today). Empty submits raise native validation plus a visible error summary; a valid submit shows a local "Thanks — request received / we'd call you back within one business day" confirmation that names itself a demo. No fake network round-trip. - Honesty as sales copy: the lightgap physics note, the light-filter night warning (which upsells the double roller with its real price), the min-job reason, and the measure-promise band are all conversion surfaces — the trade's credibility is the brand's name.
Local SEO we'd implement for the real business
This demo page carries only WebPage schema naming it a demonstration — fictional structured data in a real index would be dishonest markup. For a real client we would ship LocalBusiness + Review schema like this:
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Your Blinds Company",
"description": "Made-to-measure blinds and plantation shutters, Balcatta and Perth metro.",
"telephone": "+61-8-XXXX-XXXX",
"address": {
"@type": "PostalAddress",
"streetAddress": "Unit X / XX Example St",
"addressLocality": "Balcatta",
"addressRegion": "WA",
"postalCode": "6021",
"addressCountry": "AU"
},
"geo": { "@type": "GeoCoordinates", "latitude": -31.87, "longitude": 115.82 },
"openingHoursSpecification": [{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
"opens": "07:30", "closes": "17:00"
}],
"areaServed": ["Balcatta","Stirling","Karrinyup","Osborne Park","Joondalup","Perth"],
"review": {
"@type": "Review",
"reviewRating": { "@type": "Rating", "ratingValue": "5" },
"author": { "@type": "Person", "name": "Real Customer" },
"reviewBody": "Sourced live from the client's Google Business Profile / review platform."
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9",
"reviewCount": "127"
}
}
What would change for the real client
- Measure-and-quote field software — Buz or BMS-style blind-industry platforms driving quotes, check-measures and order status from one record.
- Workshop cut-sheet generation straight from the confirmed measure, so the saw hears about the sale before a human re-types it.
- Supplier fabric range feeds keeping the product chips and swatches synced with what's actually orderable this month.
- ServiceM8 for install runs and on-site job cards; Square deposits at quote acceptance; Xero invoicing; Podium review flow feeding the real review schema above.
- Their photography could replace nothing — this page is deliberately all-procedural — but their real fabrics, ranges and lead times would drive the studio's data.
Iteration log
Pass 1 — Craft
Full headless suite green on first run (33 checks: oracle scenarios, empty/filled submit, sticky bar, FAQ, chips/steppers/toggle, phone sweep, schema, reduced motion). The screenshot review caught what the asserts couldn't: the gold lightgap edges — the brand's namesake — were too thin to read at display scale (2.6px in a 640 viewBox, ~1.4px rendered); the exterior rooftops rendered as chunky orange blocks; and the 9s drift phased the 7-second thumbnail at the blind's minimum coverage (0.552) — the least dramatic frame. Fixed: gap slivers widened to 3.4px with a doubled glow stack, the skyline redrawn as pitched silhouettes at lower opacity, and the drift sign flipped so the settle lands at 0.848 — blind nearly down, room dark, gold at the edges.
Pass 2 — Depth
Enriched the room so "from inside the dark room" is true: bed and bedside-lamp silhouettes barely lifted off the wall tone. The lamp now switches on in night mode — the light-filter honesty line ("lamps on, the street sees shapes") is rendered, not just written. Second-read detail: across the street, one lit window blinks out every ~20 seconds. Micro-interaction: the gold dimension marks pulse when the width steps. Screenshot-reviewed all four products in day and night: shutters stripe correctly, double shows blockout-over-glow, filter glows one-way at night with the $330 double-roller answer on-card. Caught two card nits in the screenshots: the 12 window pictograms wrapped 11+1 (container widened) and the width-band parenthetical wrapped mid-line (shortened to "standard band / wide band").
Pass 3 — Hardening
Masthead-first at 375px: wordmark right edge 197px vs call-link left 207px — no collision, no overflow (scrollWidth 375). h1 + CTA + trust line inside the first mobile viewport; sticky bar 54px targets in the bottom 140px. Added a real keyboard path to the drivers: focus + Enter switches chips and steps the width (both asserted). Reduced-motion probe settles at exactly cov 0.70 with zero console errors. Chanel rule: removed the glass-sheen diagonal — the scene reads cleaner without it. Final copy read replaced a nonsensical "Security & installs Lic." footer line with the cord-safety standard note (blinds installers aren't licensed builders — a fake licence pattern would have been the dishonest kind of plausible). Re-verified the full suite plus the guide checks after every change: 35 checks green, zero console errors across desktop, 375, and reduced-motion loads.
Honesty statement
Lightgap Blinds Co. is a fictional business — a made-to-measure blinds & shutters industry demonstration designed & built by Sapience Analytics, part of the Generative Assets collection. The phone number (08) 9000 0270 is a reserved demonstration pattern; the ABN is a visible placeholder; reviews are demo copy and are not marked up as structured data. Prices are honest anchors for the 2026 Perth market, and every figure the page displays was measured from its running code.