Cadence Cycle Works

Build guide · site 305 · Industry Demos XVIII

How Cadence Cycle Works was made

Cadence Cycle Works is a fictional Leederville bike servicing workshop, built as a conversion demo for real bike shops. The audience is commuters, weekend roadies, e-bike owners and parents with a shed of kids' bikes; the page has one job — a service booking with the tier already chosen. The signature, the Tune Stand, turns the service menu into the bike itself: pick a tier and the components it touches light up in chain-lube amber, with the itemised checklist and the exact price beside it.

Palette — argued from the alloy and the anodising

A workshop in daylight: pale alloy benches, graphite tools, anodised teal on the good kit, and chain lube as the only warm note. Amber is reserved strictly for highlight marks — it never carries text.

Alloy#F1F2F4Page ground — brushed-bench daylight.
Graphite#23262BBody ink, 13.6:1 on alloy. Tool-steel dark.
Anodised teal#1F8A7DMarks, lines, tool accents, the frame paint.
Deep teal#17756ADerived CTA/link ink — 5.5:1 with white button text (the mid teal fails at 4.2:1, the W5 ink/line split).
Chain-lube amber#D98E2BThe lit components and highlight marks only. Never text.

Type

Chivo 700–900 for display — mechanical neutrality with warmth, and its caps set like toolboard labels (TUNE · DRIVETRAIN · FULL STRIP is the display moment, carried through the tier chips and checklist card headers). Karla for body — a workhorse with enough character to keep the workshop voice human. Body is 17px on the site, every money figure set in Chivo 900 so prices read as spec-plate stamps.

Techniques

The Tune Stand is a single procedural SVG (760×460): a side-elevation bike clamped in a repair stand, drawn as distinct component groups — frame, drivetrain, chain, brakes, wheels, cockpit, plus a motor/battery/controller group that fades in only for the E-bike tier. Each group has a matching amber overlay; a tier swap token-invalidates any in-flight animation in the handler, before the state swap (the W25 stale-closure rule), then re-lights the overlays and redraws the chain. The chain is one path: on activation it dash-draws from the cassette around the chainring (stroke held at opacity 0 until drawn length > 0, so no round-cap dot — the W15 lesson), then switches to a 9/5 dash pattern that flows like links at ~11px/s with an opacity pulse floored at 0.66 — visibly alive at any thumbnail capture instant, no phase arithmetic. First render gets the full 1.4s entrance; every subsequent swap redraws in 450ms via a firstDraw flag (the W21 dual-speed rule). The rear wheel spins slowly whenever the chain is lit — a CSS rotation on a spoke group that carries no transform attribute, so no CSS-vs-presentation-attribute collision (W16). Everything else is CSS and vanilla JS; no libraries beyond Google Fonts.

The estimator is pure pinned arithmetic — tier price + $85 per tubeless wheel (0–2) + $75 per brake bleed (0–2) + $65 chain — always whole dollars, verified against an independently reimplemented oracle in the headless harness. Parts beyond consumables deliberately print no number: the at-cost declaration ("quoted and approved by text before we fit anything") appears on the checklist card and beside every total, including the form summary — the W25 honesty primitive. The kids' $45 line is stated separately and never becomes the grid floor; the "from $89" floor equals the estimator's cheapest adult output (the W12 consistency rule). State probe: window.__bikeshop with tier, extras, computed total and a settled flag.

Conversion decisions

Pinned anchors & measured outputs

ScenarioArithmeticDisplayed
Rest state — Drivetrain Service, no extras159$159 ✓ measured
Basic / Full Strip / E-bike at rest89 · 289 · 95$89 · $289 · $95 ✓
Drivetrain + tubeless ×2159 + 170$329 ✓
Full Strip + both bleeds + chain289 + 150 + 65$504 ✓
Kids' Basic Tune (under-24″ wheels)flat$45 — its own line, not the floor
Parts beyond consumables—No number — at-cost declaration, by design

All totals whole-dollar; every anchor is integer-safe. Extras steppers clamp at 0–2 (every boundary trivially reachable, W28). All six figures verified in headless Chrome against an oracle reimplemented independently of the page's own pricing function (W14).

Local SEO we'd implement for the real business

This demo page ships only honest WebPage/CreativeWork structured data, because the business is fictional. For a real workshop we'd ship BikeStore — schema.org's exact Store subtype for the trade — with real NAP, hours, geo and the live review feed:

{
  "@context": "https://schema.org",
  "@type": "BikeStore",
  "name": "Cadence Cycle Works",
  "description": "Bike servicing and repairs in Leederville — itemised services, e-bike health checks.",
  "url": "https://cadencecycleworks.com.au",
  "telephone": "+61-8-XXXX-XXXX",
  "priceRange": "$45–$289",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "1 Oxford Street",
    "addressLocality": "Leederville",
    "addressRegion": "WA",
    "postalCode": "6007",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.9360, "longitude": 115.8420 },
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Tuesday","Wednesday","Thursday","Friday"],
      "opens": "08:00", "closes": "17:30" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday", "opens": "08:00", "closes": "14:00" }
  ],
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "132" },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Real Customer" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Pulled from the live Google Business Profile feed."
  }]
}

What changes for the real client

Iteration log

Pass 1 Craft

Pass 2 Depth

Pass 3 Hardening

See it

Back to Cadence Cycle Works · The Generative Assets index