Build guide · site 346 · Wave 38, Industry Demos XXVII

How the Salt & Silk Hair demo was built

A fictional six-chair, colour-led salon on Oxford Street, Leederville — cuts, global colour, balayage, half-head foils, toners and bond treatments. The page has one job: a booking request with the service, the length and the add-ons already priced.

Concept

The audience is the woman booking her first balayage after years of box dye, the regular who wants her six-weekly cut without a phone call, the bride's mother wanting a trial, and anyone whose blonde has gone brassy. Hair pricing is length-driven and clients rarely know which length they are, so the page names the three lengths in plain words (above the shoulder / to the bra strap / past the bra strap) and shows them drawn. It is deliberately distinct from the collection's barber demo — that is a men's chair menu; this is colour.

The direction is the salon at ten in the morning: plaster-blush ground, espresso ink, rosewood CTAs, brass linework for the mirror frame and trolley rails. The signature is the Colour Chair — a drawn salon chair in front of a brass-framed mirror with a client seated back-to-us so the hair is the subject. Length chips redraw the hair's fall; service chips redraw its colour and finish; the toggles draw their marks (a gloss band, a tint bowl on the trolley, two bottles on the shelf); a hairdryer on the trolley lifts the ends on a loop; and the price sits on the mirror like a lipstick note.

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). Rosewood #A64D57 measured 4.73:1 on the blush ground and 5.50:1 under white labels — both clear the 4.5 floor, so buttons keep the argued rosewood and darken to the pre-minted fill #8E3D47 (7.22:1) on hover and for selected chips; every rosewood-coloured word uses the text-ink #7E343E (7.38:1). Brass #B08D57 is 2.66:1 on the ground and is used only for lines and marks; brass-coloured copy uses #7A5C2E (5.32:1).

Type

Techniques

• Procedural SVG scene, built in JS. Two layouts (900×560 wide, 600×660 tall under 600px) share one draw routine: wall and floor gradients, a brass-framed mirror with a diagonal light streak, two sconces whose glow breathes, a brass shelf, a trolley with rails and wheels, a rosewood hairdryer, a leather chair back with brass stitch line, a chrome pole and base, a cape and neck, then the hair. Every layer is a <g class="layer"> so the first draw can stagger them in.
• The hair is one parametric path. hairD(layout, endY, sway, lift) builds a crown arc plus two cubic contours that flare toward the pinned end-Y for the length (wide: 292 / 392 / 462; the tall layout has its own set), with a curved bottom edge whose control points carry the sway. Four service groups (cut / global / balayage / foils) each hold a copy of the path with their own fill — espresso gradient, copper gradient, espresso plus a hand-painted overlay gradient with six clipped streaks, espresso plus seven foil packets — and cross-fade via a .cur class so a chip swap never snaps. A single clipPath shares the same d for the sheen, streaks, strands and gloss band.
• Breeze loop. A rAF loop with dt = min(max(now − last, 0)/1000, .05) drives sway (two sines) and tip lift scaled by a slow breeze envelope, three dashed breeze arcs from the dryer nozzle to the hair, the wet-comb sheen sweep on cut, a shimmer gliding down the balayage, travelling glints on the foils, the toner band breathing between 0.32 and 0.52 and the sconce glow. Hair opacity is always 1 — the never-invisible floor is structural, not tuned. 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), each fading in via a CSS animation on the group while the breathing opacity attribute lives on the child path — state and animation on separate elements.
• The lipstick note is an HTML badge positioned on the mirror glass so the price, subtitle and note are real text (selectable, screen-readable, live region). Three width variants: wide (26% of the stage inside the mirror), mid 600–1099px (right-anchored, long subtitle dropped) and mobile (tight, price smaller, the long note swapped for a brief template).
• Length tag with a pill background, positioned right of the hair at end-Y − 22, its x pushed clear of the chair back so the leader crosses leather but the words never do; the tall layout uses a shorter phrase set.
• Procedural inner-Perth map: coastline, Swan River, Lake Monger, a rail hint, a dashed ten-minute ring, sixteen suburb dots and a Leederville star, plus a parking 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 — service, length, three toggles — and compute() is a pure function over it: base from the service × length matrix; toner +$45 only when the service is a colour service and the remembered toner choice is on; bond +$40; kit +$65; the long note when length is long on balayage or foils. render() writes the result to every surface in one pass: the display line, the badge (name, price, subtitle, note), the scene (current hair group, three marks, service label, length tag), the toner switch (disabled with the on-card reason on cut, aria-checked mirroring the effective state), the itemised ledger and the plain-text mirror list under the scene. Restore-vs-reset is by memory: state.toner is never overwritten by the cut chip, so switching cut → any colour service restores the prior choice exactly. Every handler bumps a scene token before touching state; the settle timer publishes window.__hairsalon.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: cut from $85, global from $185, balayage from $260, foils from $210.

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

Conversion decisions

• Above the fold at 375px: name, "Colour, cuts and balayage in Leederville — colour that grows out kindly", Book-a-chair and Call buttons, three trust chips (free first consultation, cruelty-free colour, est. 2014). Measured: h1 bottom 267px, CTA bottom 335px, trust bottom 491px in a 740px viewport.
• Click-to-call in the masthead (icon-only under 420px so the wordmark never collides — measured wordmark right 182px vs call button left 318px) and a fixed Call / Book bar on mobile. No emergency-line treatment — a salon has none.
• Form fields: name, mobile, suburb, preferred day (weekday / Thursday late / Saturday — the two slots that actually go first), a textarea pre-filled from the Colour Chair, and a first-colour checkbox that lets the salon book the free consultation and 48-hour patch test. 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 request… we'd call or text you back the same day").
• Signature → form handoff: "Book this chair" writes the service, length, add-ons, estimated total and any long note into the textarea and focuses the name field.
• Reviews are the spec's three stories in demo copy; the trust strip is plausibly formatted and clearly fictional (ABN 00 000 000 346, AHC member as demo copy).

Local SEO we'd implement for the real business

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

{
  "@context": "https://schema.org",
  "@type": "HairSalon",
  "@id": "https://saltandsilkhair.example/#salon",
  "name": "Salt & Silk Hair",
  "image": "https://saltandsilkhair.example/salon.jpg",
  "url": "https://saltandsilkhair.example/",
  "telephone": "+61 8 9000 0346",
  "priceRange": "$85–$520",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Oxford Street",
    "addressLocality": "Leederville",
    "addressRegion": "WA",
    "postalCode": "6007",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.936, "longitude": 115.842 },
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Tuesday","Wednesday","Friday"], "opens": "09:00", "closes": "17:30" },
    { "@type": "OpeningHoursSpecification", "dayOfWeek": "Thursday", "opens": "09:00", "closes": "20:00" },
    { "@type": "OpeningHoursSpecification", "dayOfWeek": "Saturday", "opens": "08:00", "closes": "16:00" }
  ],
  "areaServed": ["Leederville","West Leederville","Mount Hawthorn","North Perth","Mount Lawley","Subiaco","Wembley"],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Services",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Cut & style" }, "priceSpecification": { "@type": "PriceSpecification", "minPrice": 85, "priceCurrency": "AUD" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Balayage & cut" }, "priceSpecification": { "@type": "PriceSpecification", "minPrice": 260, "priceCurrency": "AUD" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Half-head foils & cut" }, "priceSpecification": { "@type": "PriceSpecification", "minPrice": 210, "priceCurrency": "AUD" } }
    ]
  },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "184" },
  "review": [
    {
      "@type": "Review",
      "author": { "@type": "Person", "name": "K. — Mount Hawthorn" },
      "reviewRating": { "@type": "Rating", "ratingValue": "5" },
      "reviewBody": "First balayage after ten years of box dye — two visits, no line, nobody at work could tell."
    }
  ]
}

Alongside the markup: a Google Business Profile with the same NAP and hours, per-service landing sections with the length-priced anchors, a reviews feed synced from Google, and location copy that names the inner-north and inner-west suburbs the salon actually draws from.

What would change for the real client

• Booking: the request form would book straight into the salon's diary — Timely, Fresha or Kitomba — with the Colour Chair's service, length and add-ons mapped to their service codes and durations (balayage long → the extra half hour allocated automatically). Deposits for colour appointments via the same system.
• Reminders and text booking: the "book by text" promise runs on the diary's SMS reminders and two-way replies; the six-weekly regular gets her next slot offered before she leaves.
• Accounts: Xero for the ledger, with the diary's daily takings and retail (the home-care kit) posted through.
• Content: their photography (the chair, the colour work, the team), their real Google reviews feed, their real ABN, address and phone, and their own price list — the matrix here is a WA-plausible placeholder.

Iteration log

Salt & Silk Hair is a fictional business — a hair salon industry demonstration designed & built by Sapience Analytics, part of the Generative Assets collection. Back to the site · Index.