A fictional Malaga signage fabricator — shopfront signs, lightboxes and vehicle graphics — built as a single conversion-focused landing page. The page's one job: get a shop owner to type their own name, see it lit, and send the quote form.
Kilnlit Sign Co. is the dark site of Wave 19: the workshop doorway at dusk, a finished lightbox glowing on the bench for its first switch-on. Signage is the one trade whose product is typography, so the signature element hands the visitor the fabricator's own moment — type your business name, watch it appear lit on a procedural SVG shopfront. The audience is café owners three weeks from opening, tradies whose ute is their only ad, and strip landlords due a facelift; every scene, price and FAQ answer is pointed at getting them into the quote form with a warm, specific enquiry.
A warm plum-violet dusk, deliberately different from the collection's other dark trades (locksmith's navy night, earthmoving's iron dusk, concreter's wet-slab charcoal). The coral carries every conversion mark — sign glow, section rules, the CTA — and it measures 5.8:1 on the dusk ground, so short marks like prices stay legible; long copy still goes to the white and lavender inks per the ink/line token split.
Display. Condensed American-signpainter capitals — this trade is typography, so the bravery budget went here: the masthead, the h1, and the sign faces in the studio itself all set in it. The typed name renders in the same face a fabricator would proof it in.
Body and UI. A plain-spoken workhorse that keeps quotes, FAQs and trust copy legible at 16px+ on a phone — professional beats expressive on a conversion page.
Dimensions, lm rates and prices. Every number on the page — $850/lm, 4.0 m, $3,400 — is set in mono so figures read as workshop measurements, not marketing.
The signature is one procedural SVG shopfront at dusk (960×560): gradient sky, neighbouring rooflines, fascia band, shop window, door with a flickering cyan OPEN tube, kerb and road. A text input (maxlength 24) drives the sign — the value is sanitised (control characters stripped, sliced to 24) and written with textContent onto SVG <text> nodes only, never innerHTML, so a typed <script> renders as inert glyphs on the fascia. Four sign-type chips swap nested <g> groups via the hidden attribute (with the [hidden]{display:none !important} guard): the lightbox draws a lit acrylic face with a blurred coral glow rect; the acrylic letters render as a white text layer over a blurred coral halo copy; window vinyl arcs the name across the glass on a textPath whose arc chord is recomputed per width; the A-frame stands a trapezoid board on the kerb. A 2–8 m slider scales the lightbox geometry and the estimate; a lit/unlit toggle switches scene classes. Text is fitted with getComputedTextLength() (re-run on document.fonts.ready), so 24-character names compress honestly instead of overflowing the box.
Motion discipline: the glow flickers on once at load (1.15s, like a warming tube), then pulses on a CSS keyframe whose floor is opacity 0.72 — the never-invisible floor from LEARNINGS W18, so the signature is alive at any thumbnail capture instant. Position and animation live on separate nested elements (SVG presentation attributes never share an element with CSS animation, per LEARNINGS W16/W17). A moth orbits the glow — but only when the sign is lit and glowing; reduced motion kills the flicker, pulse and moth and renders the settled, fully-lit scene. No canvas, no rAF loop: the whole page is SVG + CSS, cheap on a 4G phone.
State is exposed on window.__signage (name, type, width, lit, price, formStatus) and the studio pre-fills the quote form — typed name into the business-name field, chip into the sign-type select (both with dirty-guards so a visitor's own edits are never clobbered), and a live "From the studio" line carrying name + type + width + estimate into the enquiry.
| Sign type | Model | Worked example |
|---|---|---|
| LED lightbox fascia | run × $850/lm, slider floored at the 2 m minimum | 4 m = $3,400 (rest state); 2 m floor = $1,700, matching the services grid |
| 3D acrylic letters | flat from $2,600 — deliberately flat: letter count and height set the real price, quoted from artwork. The width slider scales the preview and the card says so on-page | any width shows from $2,600 |
| Window vinyl | $190/m² × (run × 0.6 m lettering band), floored at the $380 minimum supply-and-install visit | 4 m run ≈ 2.4 m² = $456; 2 m run computes $228 → floors to $380, with the floor stated on-card |
| A-frame | flat $290; the width slider disables with the on-page reason "A-frames are a standard size — $290, pavement-ready" | $290 — the studio's cheapest possible output, equal to the services grid floor |
Derivations the spec left to the builder: the vinyl area model uses a 600 mm lettering band (the same 600 mm the lightbox is deep — one workshop dimension) times the run, and the $380 minimum visit exists so no studio output ever undercuts the $290 A-frame floor dishonestly. The acrylic flatness is shipped as a documented pricing statement, not an invented gradient — a control that can't honestly move a figure explains itself instead (LEARNINGS W15/W18). Every displayed figure was verified against an independently reimplemented oracle in the QA harness across eight driven scenarios, and the cheapest output across the whole model measures $290 — the grid's A-frame anchor.
This demo page carries only WebPage schema naming it a demonstration — fictional structured data in a real index is dishonest markup. For a real signage client we would ship LocalBusiness + Review schema like this, wired to their real NAP, ABN, hours and review feed:
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Their Sign Co.",
"description": "Shopfront signs, LED lightboxes, acrylic letters and vehicle graphics. Fabricated in Malaga, installed across Perth.",
"url": "https://www.theirsignco.com.au",
"telephone": "+61 8 XXXX XXXX",
"address": {
"@type": "PostalAddress",
"streetAddress": "Unit X / XX Example Road",
"addressLocality": "Malaga",
"addressRegion": "WA",
"postalCode": "6090",
"addressCountry": "AU"
},
"geo": { "@type": "GeoCoordinates", "latitude": -31.85, "longitude": 115.89 },
"openingHoursSpecification": [{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
"opens": "07:30", "closes": "16:30"
}],
"areaServed": ["Malaga","Wangara","Balcatta","Morley","Osborne Park","Perth"],
"priceRange": "$$",
"review": {
"@type": "Review",
"author": { "@type": "Person", "name": "Real Customer" },
"reviewRating": { "@type": "Rating", "ratingValue": "5" },
"reviewBody": "Pulled from their real Google reviews feed — never invented."
},
"aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "87" }
}Plus: Google Business Profile with the workshop's service-area settings, per-suburb landing sections only where there's real work to show, and review acquisition through the Podium flow below.
white-space:nowrap; flex:none on .btn.<script> payload set programmatically (bypassing maxlength): it renders as inert uppercase text on the fascia, sliced to 24 characters, zero script nodes injected.none, the glow settles at opacity 1, the moth is display:none, hero copy fully visible.