How Beadline was made — welding & fabrication demo

Concept

Beadline Welding & Fabrication is a fictional Bibra Lake welding and custom steel business — balustrade, driveway gates, trailer repairs, and a mobile rig covering the Perth metro. The audience is owners, builders and farmers who need steel made or mended; the page's single job is a fabrication quote request or a mobile callout. The whole page is lit the way the work is: one arc burning blue-white out of a near-black shed, sparks dying orange on the concrete.

The name is the trade's own signature — the "bead line", the row of stacked dimes a clean TIG hand leaves. The signature element renders it literally: a weld bead of stacked-dime dots progressing along the seam of whatever job you configure.

Palette

#15171Bworkshop night — the ground; the shed beyond the arc's reach

#D7DBDFmill silver — body ink on dark; bare steel catching the arc (≈13:1)

#9BA3ACsilver-dim — derived secondary ink for quiet copy (≈7:1)

#6FA8FFarc blue — LINE/MARK only: the bead, seam marks, dimension lines, CTA fill. Never long body text

#D98E32spark amber — grinder sparks; links, focus states, the crack marks

The spec's ink/line rule applied cleanly: arc blue measures ≈7.5:1 on workshop night, so it's allowed short labels and the CTA, but all body copy is set in mill silver with a derived #9BA3AC for secondary text — both clear 4.5:1 on every surface they sit on (night, panel, night-2). The CTA is an arc-blue fill with near-black text (≈7.7:1), so the brightest thing on the page is the thing that books work — exactly like the shed, where the arc is the only lamp that matters.

Type

Chakra Petch (500–700) — display and headings. Machined, squared-off technical caps; the uppercase hero reads like stencilled plate. The masthead moment.
Inter Tight (400–700) — body and UI. A workhorse that stays legible at 16.5px on a dark ground without stealing character from the display face.
Spline Sans Mono (400–600) — millimetres, lineal metres, prices, the price card, dimension labels. Every number on the page is set in the same mono, so the arithmetic reads as one system.

The Fab Quoter — signature & techniques

The signature is a procedural SVG bench scene that welds live. Job chips (balustrade / gate / trailer repair / mobile) swap the workpiece — drawn in mill-silver line-work on the dark bench — and a weld bead progresses along its seam. The bead is two stacked strokes: a soft arc-blue under-bead and a stroke-dasharray: 0.1 6.2 round-cap layer that renders the literal row of stacked dimes the brand is named for. The reveal is a clip-rect that follows getPointAtLength(), so the dime pattern never shifts as it grows (animating dashoffset would have fought the dime dasharray — and W15's stray-dot hazard never arises because the bead floor never reaches zero). The travelling arc glow is an SVG radial-gradient group repositioned each frame, flickering between 0.45 and 1.0 opacity — never below the 0.4 visibility floor.

Sparks are a canvas 2D particle system overlaid on the SVG (coordinates mapped through the fixed 720-wide viewBox scale): particles spawn at the bead head, fall under gravity, bounce once off the bench line, and cool from white-blue through flame to spark amber. DPR capped at 2, sized to container, resized on resize, and the rAF loop pauses on document.hidden. Under prefers-reduced-motion the scene renders settled: bead complete, glow steady, no sparks, no loop.

Second-read details: the spark rate is process-honest — mild steel runs MIG and throws a full shower; stainless is TIG work and barely sparks (the price card says the same thing in words: "the extra is the hand"). The scene caption carries the process (· MIG / · TIG). And every eight-to-thirteen seconds the whole shed lifts for a tenth of a second — the flash every welder knows, timed to stay clear of the 7-second thumbnail settle. Rest state holds the bead about two-thirds along the seam (measured p≈0.68 at the settle), so the thumbnail always catches the weld mid-pass.

Redraw is dual-speed per W21: the first render earns the entrance stagger (26 ms/element, capped 1.5 s); every subsequent chip or stepper change redraws at 8 ms/element, 260 ms transitions — measured 0.26 s in the pass harness. State probe window.__welder carries job, material, metres, price, billed metres, bead progress and live spark count.

The pricing model

Everything is metre-or-hour arithmetic from pinned anchors — the quoter runs the same model the copy quotes, and the harness verified the displayed card against an independently reimplemented oracle at rest and across nine driven scenarios.

Job	Meter	Anchor	Floor
Balustrade — mild, powder-coated	$/lm	$310/lm	5 lm min → $1,550
Balustrade — stainless	$/lm	+$120/lm (TIG hand)	5 lm min
Balustrade — aluminium	$/lm	+$60/lm	5 lm min
Driveway gate — single ≤1.8 m	per leaf	from $1,450	$1,450
Driveway gate — double ≤3.6 m	per leaf ×2	from $2,900 (pure doubling)	$2,900
Gate material adders	per leaf	+$300 stainless / +$150 alu	—
Trailer & plant repair	$/hr	$140/hr	2 hrs → $280
Mobile site welding	$/hr + callout	$140/hr + $90 callout	2 hrs → $370 all-in

Measured figures (from the running code, oracle-verified)

Rest state: balustrade, 6.0 lm, stainless = 6 × ($310 + $120) = $2,580 — matches the spec's worked example exactly.
Same 6 lm in mild steel = $1,860; the min-clamp crossing lands at exactly 5 lm ($1,550), and 3 lm bills at the 5 lm minimum with the reason on-card.
Gate double stainless = $2,900 + 2 × $300 = $3,500; double aluminium = $3,200; single stainless = $1,750.
Cheapest quoter output = trailer repair $280 = the services grid's repair floor. Mobile = $370 all-in. No spec corrections were needed — every worked example was pure anchor arithmetic and landed exactly.

Model shape, stated deliberately: shop and mobile share the one $140/hr labour rate — mobile adds the callout and nothing else (a documented flat statement, not an invented gradient). Repairs and callouts price by the hour, so for those jobs the metres stepper is disabled with its reason on-page ("the clock is the honest meter here"); material chips stay live there because they still change the rendering and the process caption, and the card states in words that material doesn't change the clock.

Conversion decisions

Quoter beside the hero, not below it — the signature shares the 1200×750 thumbnail with the value proposition (scene top measured at 169px in the capture viewport), and on mobile it's the first thing after the CTA block.
Two CTAs above the fold at 375px: "Request a fab quote" (arc-fill) and the phone number (ghost). Trades convert on the phone; fabrication converts on the form — both paths are one tap from load, plus the sticky call/quote bar.
Quoter → form handoff: the configured job, material, metres and estimate pre-fill the enquiry's scenario line and job description (until the visitor edits it), so the demo interaction becomes a warmer lead.
Form fields: name, phone, suburb, workshop-or-site select, job description, and a "steel already on site" toggle — the questions a fabricator actually asks before quoting. Local validation with visible error copy; the confirmation is honest about being a demo and promises the call-back window ("within two working hours").
Honesty as trust: the certification line (Building Code loading standards) sits in the hero footer because for balustrade buyers — builders — compliance IS the purchase.

Local SEO we'd implement for the real business

This demo page ships only a WebPage schema naming it a demonstration — fictional structured data in a real index would be dishonest markup. For a real client we'd ship LocalBusiness + Review schema like this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Beadline Welding & Fabrication",
  "description": "Mobile welding and custom steel fabrication across the Perth metro.",
  "telephone": "+61-8-XXXX-XXXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit X / XX Example St",
    "addressLocality": "Bibra Lake",
    "addressRegion": "WA",
    "postalCode": "6163",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -32.09, "longitude": 115.82 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "06:30", "closes": "16:00"
  }],
  "areaServed": ["Perth", "Fremantle", "Rockingham", "Kwinana", "Canning Vale"],
  "priceRange": "$$",
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "87" },
  "review": [{
    "@type": "Review",
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "author": { "@type": "Person", "name": "Real Customer" },
    "reviewBody": "Real review text pulled from the client's Google profile feed."
  }]
}
</script>

What would change for the real client

Tradify job & quote tracking wired to the form — the quoter's scenario lands as a draft quote, not an email.
Drawing/photo quote intake — file upload on the form feeding the job record; half of fabrication quoting starts from a photo.
Powder-coater and steel supplier PO feeds — lead-time honesty ("2–3 weeks") driven by the actual coating queue.
SafetyCulture hot-work permits & SWMS attached to mobile jobs; Xero for invoicing; Podium replacing the demo reviews with the client's live feed.
Their photos of finished gates and balustrade where the SVG scene art stands in — though the quoter stays: it's the part that converts.

Iteration log

Pass 1 — Craft

Drove the full model against an independent oracle: 35 asserts — rest card $2,580 (stainless 6 lm), mild $1,860, min-clamp at 3 lm billing $1,550 with the minus stepper disabling at the floor, the crossing landing exactly at 5 lm, gates $1,450/$3,500/$3,200, repair $280 (= services floor), mobile $370. Empty submit on a fresh load raised 4 validation signals and no confirmation; filled submit confirmed in the required lexicon. Screenshot review (1200×750 and 375) caught the scene caption colliding with the balustrade's dimension line — moved the caption to the top edge — and two garbled hex tokens from authoring were fixed before first serve. Harness itself needed the W20 treatment twice (a click swallowed by the sticky masthead, a stepper count miscounted): fixed the harness, never the site.

Pass 2 — Depth

Made the sparks process-honest: mean airborne particles measured 97.2 on MIG mild vs 13.4 on TIG stainless, with the process named in the scene caption. Added the rare whole-shed arc flash (0.11 opacity, ~120 ms, first firing after the 7 s thumbnail settle). Screenshot review of the gate and trailer scenes caught the trailer floating across the bench line (grounded it, −12px, wheel now sitting on the line and the repair bead moved onto the lower drawbar chord), leftover sparks surviving a job swap (particles now clear on scene change), and finish fills too faint to read (gradient stops lifted). Verified dual-speed redraw at 0.26 s and the keyboard path on chips and FAQ.

Pass 3 — Hardening

375px masthead checked first: wordmark right edge 142px vs call button left edge 285px — no collision; scrollWidth clean at 375 on both pages, h1 + CTA + trust signal inside the first viewport. Reduced-motion emulated: bead renders complete (p = 1), glow steady at 0.55, zero spark particles, no rAF loop. Resize re-sizes the spark canvas; the loop pauses on document.hidden. Chanel rule: removed the second overhead rack from the scene backdrop — the shed reads darker and the arc brighter without it. Guide pricing table shipped in a .table-scroll wrapper at build time. Final sweep: one h1 per page, zero console errors across every driven state.