Build guide · site 351 · Wave 39, Industry Demos XXVIII

How the Linen & Line Curtains demo was built

A fictional made-to-measure curtain business — curtains, sheers, tracks, rods and motorised tracks, measured and fitted across Perth metro from a showroom and workroom in Osborne Park. The page has one job: a measure-and-quote request with the window, fabric, heading and track already priced per window.

Concept

The audience is the couple who just moved into a new build with bare windows, the owner whose west-facing bedroom needs blockout, the renovator who wants sheers under linen on one track, and the downsizer replacing thirty-year-old pencil pleats. Curtain pricing is confusing from the outside — per metre of what, at which drop, is the track extra — so the page prices one window openly: width × a per-metre rate at the chosen drop, with the measure, the fitting and a standard track declared included. It is deliberately distinct from the collection's blinds demo (rollers and plantation shutters): this is soft furnishings on tracks.

The direction is the showroom in afternoon light — linen ground, walnut ink, dusty-plum CTAs, brass linework for tracks, rods and rules — soft, tactile, unhurried, like a sample held up to a window. The signature is the Window Dresser: a drawn window in a drawn wall with cornice, skirting and a slice of oak floor, curtains hung on a drawn track. The width stepper resizes the window; the drop chips move the hem to the sill, to the floor, or lift the track to the cornice; the fabric chips redraw sheer (the garden shows through), linen-look (opaque with a slub) or blockout (heavier folds and a lining edge); the heading chips redraw an S-fold wave or pinched fans; the toggles draw a second sheer on an inner track, a brass rod with rings and finials, or a motor housing on the track and a remote on the sill. A breeze lifts the hems on a loop, and the price hangs from the track as a fabric swing tag.

Palette — measured, not assumed

Every ratio below was computed by WCAG relative-luminance arithmetic from the shipped hex tokens in Pass 1 (the spec's figures were hypotheses; they landed within 0.1). Dusty plum #6B4A5E measured 6.62:1 on the linen ground and 7.59:1 under white labels — no two-token remedy needed for buttons or links; selected chips and button hover use the deeper fill #573B4C (9.84:1) and plum-coloured copy uses the ink #4F3545 (9.51:1 on linen, 10.19:1 on the swing tag). Brass #B7955A is 2.46:1 on the ground and is used only for lines and marks; brass-coloured copy uses #7A5C2A (5.40:1 on linen, 5.79:1 on the tag).

Type

Techniques

• Procedural SVG scene, built in JS. Two layouts (900×540 wide at 1.4 units/cm; 600×440 tall at 1.1 units/cm under 600px) share one draw routine: a ceiling gradient, cornice, plaster-wall gradient, skirting, an oak floor with plank lines; a window frame with mullions (one pane per ~120 cm of width) and a transom, garden gradient and clipped shrubs behind the glass, a sill with its shadow; then the inner track and sheer, the standard track or brass rod, the two main panels, the marks and the tags. Every layer is a <g class="layer"> so the first draw staggers them in.
• Geometry from the state. geom() derives everything in centimetres × scale: the ceiling 270 cm above the floor, the track 240 cm above the floor (or 5 units under the cornice for ceiling-to-floor), the window head 20 cm below the track, the sill 100 cm above the floor, 15 cm of track overhang each side, panels stacked back to 30% of the track width, the hem 2 units above the sill or 1 above the floor. Drawn cap: the window is left-anchored and grows to the right; on the tall layout it caps at 317 units (about 288 cm) so the swing tag always hangs beside it, and the dimension tag keeps printing the true centimetres — one window is drawn whatever the windows stepper says, and the tag prints the count.
• Panels are parametric paths. panelD() builds each panel as a straight outer edge, a cubic inner edge whose foot sways with the breeze, and a quadratic hem that lifts at the inner corner. The same d fills four stacked paths: fabric gradient, a userSpaceOnUse fold pattern (a soft 26-unit gradient stripe for S-fold, a sharper 22-unit stripe for pinch pleat, a second copy for blockout's heavier shadow), a slub pattern of short horizontal hairlines for linen-look, and an offset shadow on the wall. Blockout adds a stroked lining edge along the inner curve. The heading is a separate stroked path — a wave along the top for S-fold, three-line fans from a pinch point plus a falling fold line for pinch pleat.
• Breeze loop. A rAF loop with dt = min(max(now − last, 0)/1000, .05) drives sway (two sines per side, amplitude 7 for sheer, 4.5 for linen, 3 for blockout), hem lift, and the inner sheer's segmented hem wave. Panel opacity is always 1 and the sheer fill never drops below 0.58 — the never-invisible floor is structural. Reduced motion renders one settled frame at t = 1.7 s; the loop pauses on document.hidden.
• Marks are SVG groups toggled by attribute (hidden with the [hidden]{display:none!important} guard, never the IDL property): the sheer layer, the rod (which hides the track group), and the motor housing + remote fade in via a CSS animation on the group.
• The swing tag is an HTML overlay so the price, subtitle and notes are real text (selectable, screen-readable, live region), styled as a card with a clipped corner and a punched brass hole; placeBadge() hangs it from the track's right end (clamped inside the stage) and draws the string in SVG from the track end to the hole, so a clamped tag reads as swung sideways. It rotates ±1.4° on a slow alternate loop. Three width variants: wide (200px), mid 900–1099px (176px, smaller price), mobile (122px, short subtitle and note templates).
• Dimension tags — width on the floor slice under the hem, drop as a rotated bracket left of the track — sit where neither the panels nor the swing tag can reach them.
• Procedural Perth-metro map: coastline, Rottnest, Swan River, a Darling Scarp hint, a dashed metro ring, seventeen suburb dots and the Osborne Park star, plus a free-samples tag. No raster anywhere; the favicon is an inline SVG data-URI.
• No libraries — vanilla JS, one <style>, Google Fonts the only external request.

Signature implementation

State is one object — width, drop, fabric, heading, three toggles, windows — and compute() is a pure function over it: main line = rate[fabric][drop] × width, billed at $260 when the arithmetic is under; pinch pleat +$15/m; the sheer layer at the sheer rate for the selected drop × width, only when the fabric is not sheer and the remembered choice is on; rod +$40/m; motor $450; per-window sum × windows; the whole-house note at five. Every rate is a multiple of 5 and every width a multiple of 20 cm, so every line is a whole dollar by construction. render() writes the result to every surface in one pass: the display line, the swing tag (name, price, subtitle, per-window line, notes), the scene (geometry, panels, marks, tags), the sheer switch (disabled with the on-card reason on sheer, aria-checked mirroring the effective state), the itemised ledger and the plain-text mirror list under the drawing. Restore-vs-reset is by memory: state.sheerLayer is never overwritten by the sheer chip, so sheer → linen-look or blockout restores the prior choice exactly. Every handler bumps a scene token before touching state; the settle timer publishes window.__curtains.settled only for the latest token, so a rapid-fire run of clicks ends on one definite, settled state.

Pricing model (pinned anchors)

Totals are integer by construction and display to the whole dollar. The estimator's cheapest outputs equal the services grid floors: made-to-measure curtains from $260 a window; sheers from $110/m; linen-look from $160/m; blockout from $190/m.

Worked examples — measured from the running page against an independent oracle

Conversion decisions

• Above the fold at 375px: name, "Made-to-measure curtains & tracks across Perth — measured, made, hung", Book-a-measure and Call buttons, three trust chips (measure & fit included, made in Osborne Park, est. 2013 · samples free). Measured: h1 bottom 274px, CTA bottom 342px, trust bottom 498px in a 740px viewport.
• Click-to-call in the masthead (icon-only under 420px so the wordmark never collides — measured wordmark right 234px vs call button left 318px) and a fixed Call / Book bar on mobile. No emergency-line treatment — curtains have none.
• Form fields: name, phone, suburb, home type (new build / established / apartment / office — it changes when we can measure and what the track fixes to), a textarea pre-filled from the Window Dresser, and a free-samples checkbox. Front-end validation with per-field messages and aria-invalid; the confirmation panel is hidden on load and on empty submit and appears only after a valid filled submit ("Thanks — we've received your measure request… we'd call you back within one business day").
• Signature → form handoff: "Book a measure for this window" writes the windows count, width, drop, fabric, heading, extras, estimated total and any notes into the textarea and focuses the name field.
• Reviews are the spec's three stories in demo copy (the west bedroom that finally sleeps in, the new build done in a day, the sheers that made the living room look twice the size); the trust strip is plausibly formatted and clearly fictional (ABN 00 000 000 351).

Local SEO we'd implement for the real business

The live page carries only WebPage + WebSite + BreadcrumbList JSON-LD naming it a demonstration — fictional business data in a real search index would be dishonest markup. For the real Linen & Line we would ship a HomeGoodsStore entity (the exact schema.org organization subtype for a curtain showroom) with opening hours, geo, price range, the service catalogue and a reviews feed:

{
  "@context": "https://schema.org",
  "@type": "HomeGoodsStore",
  "@id": "https://linenandline.example/#showroom",
  "name": "Linen & Line Curtains",
  "image": "https://linenandline.example/showroom.jpg",
  "url": "https://linenandline.example/",
  "telephone": "+61 8 9000 0351",
  "priceRange": "$260–$2,270 per window",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Scarborough Beach Road",
    "addressLocality": "Osborne Park",
    "addressRegion": "WA",
    "postalCode": "6017",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.900, "longitude": 115.812 },
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"], "opens": "09:00", "closes": "17:00" },
    { "@type": "OpeningHoursSpecification", "dayOfWeek": "Saturday", "opens": "09:00", "closes": "13:00" }
  ],
  "areaServed": ["Osborne Park","Joondalup","Scarborough","Subiaco","Perth","Midland","Fremantle","Canning Vale","Rockingham","Mandurah"],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Made-to-measure curtains and tracks",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Made-to-measure curtains, measured and fitted" }, "priceSpecification": { "@type": "PriceSpecification", "minPrice": 260, "priceCurrency": "AUD" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "S-fold sheers" }, "priceSpecification": { "@type": "UnitPriceSpecification", "price": 110, "priceCurrency": "AUD", "unitText": "per metre of window width" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Motorised track" }, "priceSpecification": { "@type": "PriceSpecification", "price": 450, "priceCurrency": "AUD" } }
    ]
  },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "212" },
  "review": [
    {
      "@type": "Review",
      "author": { "@type": "Person", "name": "P. — Carine" },
      "reviewRating": { "@type": "Rating", "ratingValue": "5" },
      "reviewBody": "Lined blockout to the floor on a ceiling-fix track and the west bedroom is dark at three in the afternoon."
    }
  ]
}

Alongside the markup: a Google Business Profile with the same NAP and hours, per-service landing sections with the per-metre anchors, a reviews feed synced from Google, and location copy that names the metro corridors the fitters actually cover.

What would change for the real client

• Measure bookings: the request form would book straight into the fitter's diary — Tradify or ServiceM8 — with the Window Dresser's width, drop, fabric, heading and extras attached to the job card, and the measure appointment confirmed by SMS from the same system.
• Fabric ordering: the sample request and the confirmed fabric flow to the wholesaler's ordering portal (Warwick, Charles Parsons, James Dunlop or whoever the client buys from), with lead times shown honestly on the page.
• Motorisation: the motor toggle would open the Somfy or Motion configurator for the real quote — battery vs wired, remote vs app — instead of the flat $450 anchor here.
• Accounts: Xero for the ledger, with deposits on the measure and balance on the fitting posted through from the job system.
• Content: their photography (the showroom, hung windows, the workroom), their real Google reviews feed, their real ABN, address and phone, and their own rate card — the matrix here is a WA-plausible placeholder.

Iteration log

Linen & Line Curtains is a fictional business — a curtain and track industry demonstration designed & built by Sapience Analytics, part of the Generative Assets collection. Back to the site · Index.