Generative Assets · Wave 16 · Industry Demos V

How the Garratt & Sons Sheetmetal demo was made

Garratt & Sons Sheetmetal Engineering is a fictional third-generation fabricator in Welshpool, built as a demonstration of what Sapience Analytics would ship for a real family manufacturing business. The audience is procurement and project managers in mining services, commercial building, shopfitting and product businesses; the page's single job is a quote request that arrives with the drawing already described.

Concept

The direction is precision under lights — a dark machine-shop graphite ground with the laser bed as the only glow. Where a plumber's demo shouts availability, a fabricator's page must radiate measurement: everything priced in the open, every figure set like a job-card line, lead times told per process rather than promised flat. The family history (est. 1968, the third generation runs the laser) is worn quietly in the trust strip and reviews, never as heritage theatre.

Palette

The spec names cyan as the LINE/MARK token; body copy never sets in it. A muted ink (#A9B1B9) was derived for secondary text and a deeper panel scale (#1A1D21 → #262B30) carries the card system.

Type

• Archivo (500–800) — wide industrial caps for display and buttons; signage weight without pastiche.
• Inter (400–600) — the workhorse body and UI face; parental of nothing, legible at 14px on 4G phones.
• JetBrains Mono (400–600) — every dimension, tolerance, price and lead time is set like a job-card line: the job card, trust figures, footer ABN, stage captions.

Signature — the Cut-Fold-Weld Configurator

Process chips (laser cutting / CNC folding / welding & assembly / full fabrication), material chips (mild steel / stainless 304 / aluminium 5052) and a thickness selector (1.6 / 3 / 6 mm) drive a procedural part that builds itself on a 3D bench. The part is five HTML panels (base + four flaps) in a CSS perspective scene; each panel carries an inline SVG with its portion of the cut path. The cut traces in plasma cyan via pathLength="1" dash animation — butt caps, and strokes hidden until drawn length > 0, per the W15 round-cap-dot lesson. Fold scores flash as dashed cyan hinge lines, then the flaps rotate about their hinge edges (JS-set transforms with a crafted cubic-bezier(.5,.05,.25,1)). Weld seams are amber repeating-gradient beads on the flap edge joints that appear only when welding is active. At rest the part parks mid-fold at 55° — mid-demonstration for the static thumbnail — and any interaction replays the build to completion. Material chips swap panel gradients (zincanneal / 304 sheen / 5052 matte); the thickness selector resizes the visible edge strip (2 / 3.5 / 7 px). Reduced motion renders everything settled: cut drawn, part fully folded, beads per state.

The configurator pre-fills the quote form: "Quote this job" reveals a read-only configured-job field carrying process + material + thickness + the indicative figure, which then tracks further configurator changes. A state probe window.__manufacturer exposes processes, material, thickness, the computed card, the displayed strings, form status and an interaction counter — QA gates on state, never on seconds.

Pricing model — the full derivation (QA source of truth)

The spec pins these anchors: laser cutting minimum run $180; indicative cutting $3.20/m in 3 mm mild steel; folding $9/bend, min run $120; welding & assembly $110/hr; stainless "roughly doubles material cost and slows the cut"; lead times cut-only 3–5 working days, cut+fold 5–7, welded assemblies 2–3 weeks. Everything else below is derived and documented here so the harness has an independent source of truth.

The demonstration job

A fixed run of 20 folded trays — 2.5 m of cut path and 4 bends each (50 m of cutting, 80 bends). The card prices this run live; the page says plainly the real quote comes from the customer's DXF.

Cutting

rate = $3.20/m × thickness factor × material factor
thickness: 1.6 mm → ×0.75   3 mm → ×1.00   6 mm → ×1.50
material:  mild → ×1.00   stainless 304 → ×2.00   aluminium 5052 → ×1.50
cutting line = max($180 minimum, 50 m × rate)

The ×2.00 stainless factor is the spec's own sentence made arithmetic; aluminium at ×1.50 sits between (lighter material cost, slower nitrogen-assist cut). Thickness factors reflect cut speed falling with section. At rest (3 mm mild) the metreage computes to $160, so the $180 minimum binds and the card says so honestly — "minimum run applied, covers setup & nesting" — which is itself the sales story ("small jobs are welcome, that's what the minimum is for").

Folding — a documented flat

Folding is 80 bends × $9 = $720, flat across material and thickness. This flatness is deliberate, not an oversight: a bend is a press stroke, and within this demo's 1.6–6 mm envelope the spec pins only "$9/bend min $120" with no material gradient — so per the W15 rule the dimension ships flat and is stated here rather than inventing an unpinned gradient. The $120 minimum exists for small runs and never binds at 80 bends.

Welding

hours = 3.0 base × material factor × thickness factor, rounded to 0.1 h
material:  mild → ×1.00   stainless → ×1.25   aluminium → ×1.40
thickness: 1.6 mm → ×0.90   3 mm → ×1.00   6 mm → ×1.20
welding line = hours × $110/hr

Stainless carries purge and cleanup time; aluminium is AC TIG and slower again; heavier sections need more prep. The 3.0 h base is one hour of setup plus 0.1 h per tray at 3 mm mild.

Consistency contract

The configurator's cheapest output — laser cutting only, 1.6 mm mild — computes $120 of metreage and floors at $180, exactly the services grid's "from $180/run". Lead times in the card, the FAQ and the services copy come from the same three-way rule (weld ⇒ 2–3 weeks; else fold ⇒ 5–7 working days; else 3–5). The harness re-implements this whole model independently and asserts the displayed card strings against it.

Conversion decisions

• Above the fold at 375px: name + trade + area in the h1, quote CTA first (B2B buyers email/form more than they cold-call), phone second, family-since-1968 trust line beneath — all inside the first viewport.
• The form asks what a buyer actually sends: company, name, phone, email, and "what you'd send us" — the field describes the DXF/PDF rather than pretending to upload it; the fine print says nothing is transmitted. On the real site this is an upload straight into the job board.
• Signature→form handoff: the job card's "Quote this job" carries the configured scenario into the form, turning a demo interaction into a warmer enquiry.
• Sticky mobile bar (call + quote, 56px targets) below 820px; header keeps a persistent tel: chip that collapses to "Call" under 480px.
• Honest pricing as the trust strategy: open rates, a visible minimum with its reason, per-process lead times, and "if we'll miss it, you'll hear it from us first" — the exact opposite of the quote-form-only competitor page.

Techniques

• CSS 3D part build: five-panel preserve-3d assembly, JS-orchestrated timeline (trace → score → fold → bead), slow turntable sway disabled under reduced motion and below 430px (where the stage scales to fit).
• Procedural SVG throughout: hero nesting bed with a phase-offset laser trace (negative animation-delay so the 7s thumbnail always catches it drawn), service-area map of the eastern industrial corridor with named suburbs, icon set drawn inline.
• No libraries at all — vanilla single file, Google Fonts the only external resource. Entrance choreography gated on document.fonts.ready with a 900ms fallback so content never strands at opacity 0.

Local SEO we'd implement for the real business

This demo intentionally ships only WebPage schema naming itself a demonstration — fictional LocalBusiness data in a real index is dishonest markup. For the real Garratt & Sons we would ship:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Garratt & Sons Sheetmetal Engineering",
  "description": "Third-generation sheetmetal fabrication — laser cutting,
    CNC folding and welded assemblies in Welshpool, Perth.",
  "url": "https://REAL-DOMAIN.com.au",
  "telephone": "+61 8 XXXX XXXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "REAL STREET ADDRESS",
    "addressLocality": "Welshpool",
    "addressRegion": "WA",
    "postalCode": "6106",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.99, "longitude": 115.95 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "07:00", "closes": "16:00"
  }],
  "areaServed": "Perth metropolitan area",
  "foundingDate": "1968",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "FROM-REAL-REVIEWS",
    "reviewCount": "FROM-REAL-REVIEWS"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "REAL CUSTOMER" },
    "reviewBody": "REAL REVIEW TEXT",
    "reviewRating": { "@type": "Rating", "ratingValue": "5" }
  }]
}
</script>

Plus: Google Business Profile with the workshop pinned, service pages per process (laser cutting Perth / CNC folding Perth / welding Welshpool), and review capture wired to the job-completion email.

What would change for the real client

• Real quoting pipeline: the form's "what you'd send us" becomes a DXF/PDF upload feeding ProNest or SigmaNEST nesting for exact metreage — the configurator's indicative model replaced by their actual rates.
• Job management: enquiries land in Tradify or an Airtable job board; production scheduling in Katana MRP or Unleashed; accounts in Xero or MYOB Acumatica for larger operations.
• Shop-floor visibility: a Power BI dashboard over the job board — quoted vs won, lead-time performance against the "confirmed date" promise, machine utilisation.
• Their photography of the actual floor and the three generations, their real weld tickets and insurances, and a live review feed replacing the demo copy.

Iteration log

← Back to the site Generative Assets index

Garratt & Sons Sheetmetal Engineering is a fictional business — a manufacturing industry demonstration designed & built by Sapience Analytics, part of the Generative Assets collection.