Generative Assets · Industry Demos · how it was made

How the Hardline Workwear & Print demo was built

Hardline Workwear & Print is a fictional Malaga print shop — hi-vis polos, taped long-sleeve shirts, drill shirts and hoodies screen-printed or embroidered with a crew's logo, from ten garments to two hundred. The page exists for one reader: the trade owner who needs thirty polos for the crew and wants the garment, quantity, decoration, positions and extras priced before they send a logo file. Its single job is a quote request with the run already priced to the dollar, setup included.

The Uniform Quoter

The signature element is a drawn SVG garment on a hanger against the print-shop wall: a rail with two brackets, a leaning screen frame with the crew's mark burnt into the mesh, a squeegee resting against it, and the chosen garment hanging centre-left with a ghosted rail of garments behind it. Every control redraws the scene honestly and reprices the run from the pinned anchors:

• Garment chip redraws the hero: hi-vis polo (yellow body, navy yoke, two-button placket), hi-vis long-sleeve work shirt (yellow upper, navy lower, two orange reflective tape bands across the chest and around the sleeves), cotton drill work shirt (navy, two flap pockets, full placket) or hi-vis fleece hoodie (lined hood behind the neck, drawstrings, kangaroo pouch, ribbed cuffs and hem).
• Decoration chip renders the crew's mark — a hex nut with a hard line through it — on the left chest: 1-colour flat navy, 2-colour navy + orange, or embroidery as a stitched dashed outline with satin-fill hatching in the bar. On the navy drill shirt the ink inverts to white (with the orange second colour kept) so the mark reads — a print shop would never put navy ink on navy drill, and the page doesn't either.
• Positions stepper 1–3 lights the marks with an orange leader tick and a numbered navy roundel each: left chest (1), full back (2 — a ghosted back-view inset at 0.6 scale on its own hanger beside the garment, with the large back mark), sleeve (3 — a small rotated mark on the upper sleeve).
• Quantity stepper 10–200 in tens hangs a ghosted rail of garments behind the hero — one per garment to a drawn cap of twelve — and the rail label above the brackets prints the true count ("50 on the rail"). Crossing 100 re-rates the decoration and surfaces the tier note.
• Names stitches a dashed-stroke sample name ("STEVE") above the chest mark; rush pins a "5 DAYS" swing card to the hanger neck; re-order hangs a "YOUR SCREENS · KEPT" tag on the leaning screens and swaps the setup line for the waived declaration.
• The price badge is a garment swing tag on a cord from the hanger hook — white card, navy edge, an orange stitched inner border, a punched hole the cord ties into. Two lines always: the total and "ready in about 10 business days" (rush off) / "ready in 5 business days" (rush on); the 100+ note and the $0 setup-waived declaration appear beneath when they apply. On-scene top-right at ≥641 px (the cord is a quadratic path from hook to hole, recomputed on resize and after fonts load); docked as a two-column strip directly beneath the artwork at ≤640 px, still inside the Quoter card.
• A squeegee loop sweeps the chest print: the mark is drawn twice — a stencil ghost at 55% opacity that never disappears, and the flooded print revealed by a clip rectangle that follows the squeegee blade (2.4 s sweep, 2.4 s hold while the blade lifts, 1.6 s fade before the next pass; 6.4 s period). On embroidery the tool is a needle with a thread trailing to the hoop and the satin hatching floods behind it. Reduced motion parks the tool mid-print with the ink fully flooded.

There are no locks, disables or forced chips in this signature — every control is live at every combination, every toggle is a flat or per-garment addition, and neither stepper has an empty state (quantity floors at the 10-garment minimum, positions at 1), so no restore memory exists to invalidate.

Pinned anchors (GST inclusive — blank garment supplied, decoration and setup included, metro delivery included)

Worked examples measured from the running page

Every worked figure, the four grid floors, the 90/100 boundary pair and forty random control vectors were cross-checked against an oracle re-implemented from the anchors inside the verification harness — never by importing the page's own code. Every rate is a whole dollar, the quantity grid is whole tens and there is no percentage anywhere, so no total ever needs rounding; the harness asserts every total is an integer.

Palette — concrete floor, navy thread, a stripe of hi-vis orange

Pale concrete ground, deep navy for body ink and CTAs, hi-vis orange held to lines and marks (rules, chip outlines, the position ticks, the tape on the drawn shirt, the tag's stitched edge), and the hi-vis yellow living only in the drawn garments. Contrast ratios below were computed with WCAG arithmetic from the shipped tokens during Pass 1 (role, hex and ratio from the same script row).

Pass 1 measurement kept every spec figure within 0.1 of its computed hypothesis (13.7 / 15.8 / 17.7 / 2.6 / 3.1 / 5.2 / 6.0 all held). The one colour decision the measurement forced: orange-ink on the map water measured 4.31:1, so the map's only orange-ink label ("Hardline workshop") sits on the white land with a white halo, never over water, and the tag's secondary line uses slate rather than orange-ink on white — 7.53:1 against 6.01:1 — so the two-line badge stays quiet under the price.

Type

The display moment is the rest-state line set above the scene — "$2,540 · 50 POLOS · 2-COLOUR · 2 POSITIONS" — rebuilt from state on every change so the figure is always the live total; the price leads in orange-ink, the middle dots travel with the token that follows them so a wrap never strands a dot at a line end.

Techniques

• Procedural SVG scene, no libraries. The backdrop (wall gradient and block joints, rail and brackets, floor, the leaning screen frame with its mesh and the mark burnt in, the resting squeegee) is drawn once per breakpoint; the ghosts, hanger, garment, marks, ticks, inset and tags live in a dynamic group rebuilt on every state change. Garments are parametric local-coordinate paths (body, two sleeves) reused at three modes — hero, ghost silhouette, back-view inset — with panels (yoke, tape bands, lower navy, pouch, cuffs) clipped to the body∪sleeves union via clipPath, so a yoke never bleeds past the shoulder.
• Dual-speed redraw (W21). First paint staggers each drawn part at 26 ms (1.4 s cap); every later state change redraws at 10 ms per part with a 500 ms cap via a firstDraw flag. Parts animate opacity only — never a property they also set as an SVG attribute.
• Token-invalidated loop (W25). The squeegee runs in one requestAnimationFrame loop whose token is bumped in every control handler before the state swap; the old loop exits on its next frame, the rebuilt scene starts a fresh one, and the probe's loops count settles back to exactly one — asserted after two rapid-fire bursts. Delta time is clamped at zero and capped at 50 ms (W29); the loop idles while the tab is hidden. The initial phase is chosen so the 7-second thumbnail lands mid-sweep; the 55% stencil ghost is the never-invisible floor.
• Swing-tag placement. The HTML badge is right-aligned inside the scene at ≥641 px with width: clamp(200px, 42%, 240px) so it never grows past the chest tick at the narrowest on-scene widths; the cord is a quadratic SVG path from the hook to the tag's hole, recomputed from the rendered scale on resize and after document.fonts.ready. At ≤640 px a 56 30 880 670 viewBox crops the scene to enlarge the garment, the backdrop is redrawn to the crop, the inset moves closer, and the tag docks beneath as a two-column strip.
• Reduced motion. CSS media query plus a matchMedia check: no loop starts, the squeegee is parked mid-print with the ink fully flooded, the entrance transitions are disabled and the hero's rise animation is off; the controls still work.
• State probe. window.__workwear carries garment, quantity, decoration, positions, the three toggles, every ledger line, total, tier rate, note strings (full and short), line 2, the waived declaration, the ghost count, loops, empty disabled/forced arrays and a settled flag set after the redraw cap — QA gates on state, never on seconds.

Conversion decisions

• Above the fold at 375 px: business name, "Branded hi-vis and workwear for Perth crews — printed and embroidered in Malaga, from ten garments", Get a quote + Call (08) 9000 0367, and the est. 2014 / AS/NZS 4602.1 / minimum-10-delivery-included trust line — all above the sticky bar at 375 × 667, measured (the lede drops its middle clause on phones so the trust line makes the fold).
• Quote vs call: a uniform run needs artwork and a proof, so the primary CTA is "Get a quote" with the phone a visible ghost button; on phones a sticky bar carries Call now + Get a quote above the thumb.
• The Quoter feeds the form. Garment, quantity, decoration, positions, extras, the total and the days line pre-fill the quote textarea; "Send this run for a quote" refreshes it and focuses the name field. Form fields are what a print shop needs to price and deliver: name, mobile, suburb (where the box goes), crew size (under 10 / 10–49 / 50–99 / 100+ — the tier signal) and the pre-filled details.
• Honest floors. The services grid's "from" prices are the Quoter's cheapest outputs per garment — $400 / $540 / $600 / $570 — and the per-unit cards quote the same anchors the calculator uses; the tier note, the setup-waived declaration and the "quoted from your artwork" line appear wherever the total does (ledger and a11y mirror), and the badge carries no footnote because nothing unpriced is ever part of a priced state.
• Local confirmation, no fake network. Empty submit flags the required fields inline and keeps the confirmation hidden; a valid submit shows the designed panel ("Thanks — quote request received. We'd call you back within one business day with a proof…") naming the suburb and the estimate, clearly marked as a demonstration.

Local SEO we'd implement for the real business

The live page carries only WebPage, WebSite and BreadcrumbList structured data naming it a demonstration — a fictional shop must not mark itself up as a real one. For the real client we would ship the block below. schema.org has no print-shop or uniform-supplier subtype, and Store would overclaim a retail floor the workshop doesn't run, so the top-level type is the plain organisation type LocalBusiness with the services named through hasOfferCatalog and knowsAbout. Real reviews would be pulled from Google Business Profile and marked up only with the reviewer's consent.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Hardline Workwear & Print",
  "description": "Branded hi-vis and workwear for Perth crews — screen printing and embroidery in Malaga, from ten garments.",
  "url": "https://www.example-hardline.com.au/",
  "telephone": "+61 8 9000 0367",
  "image": "https://www.example-hardline.com.au/workshop.jpg",
  "priceRange": "$$",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Malaga",
    "addressRegion": "WA",
    "postalCode": "6090",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.86, "longitude": 115.90 },
  "areaServed": ["Wangara", "Balcatta", "Osborne Park", "Perth", "Welshpool", "Canning Vale", "Bibra Lake", "Midland"],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"], "opens": "07:00", "closes": "16:30" }
  ],
  "knowsAbout": ["screen printing", "embroidery", "hi-vis workwear", "AS/NZS 4602.1", "uniform branding", "logo digitising"],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Branded workwear",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Printed hi-vis polos" }, "priceSpecification": { "@type": "PriceSpecification", "price": "400", "priceCurrency": "AUD", "description": "from, 10 garments, 1-colour, 1 position" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Printed taped long-sleeve shirts" }, "priceSpecification": { "@type": "PriceSpecification", "price": "540", "priceCurrency": "AUD", "description": "from, 10 garments, 1-colour, 1 position" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Embroidery" }, "priceSpecification": { "@type": "PriceSpecification", "price": "10", "priceCurrency": "AUD", "description": "a garment a position, digitising $80 a position" } }
    ]
  },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "64" },
  "review": [
    {
      "@type": "Review",
      "author": { "@type": "Person", "name": "Real customer, with consent" },
      "datePublished": "2026-05-02",
      "reviewRating": { "@type": "Rating", "ratingValue": "5" },
      "reviewBody": "Pulled from the live Google Business Profile feed — never hand-written."
    }
  ]
}
</script>

Alongside the schema: a Google Business Profile pinned to the Malaga unit, "workwear printing Perth" / "hi-vis embroidery Malaga" / "branded polos Perth" as the page's core phrases with the trade estates above as secondary, NAP consistency across the trade directories, and a reviews feed that updates without anyone touching the page.

What changes for the real client

• Job board and proofs: Printavo or DecoNetwork for quotes, the job board and artwork proofs — the Quoter's scenario becomes the quote's line items, not a textarea, and the proof the customer approves is the proof that goes to the press.
• Online proof approval: the "we'd call you back with a proof" promise becomes a link — the customer approves the mock-up on their phone and the job moves on the board the moment they do.
• Xero for the invoice when the boxes go out; the estimate maps line-for-line onto the invoice, setup lines included.
• Supplier catalogue feeds for the blanks — Bisley, Hard Yakka and JB's are the kind we'd wire — so the garment chips reflect what's actually in stock, with the maker's size chart and the AS/NZS 4602.1 certificate linked from the card.
• The workshop's own photographs of printed runs and stitched marks, a Google reviews feed, the real ABN, and the real phone number in place of the reserved pattern.

Iteration log

• Pass 1 — Craft. Contrast measured from the shipped tokens: every spec figure held (navy 13.69:1 on concrete, white on navy 15.79:1, orange-ink 5.21:1 / 6.01:1, orange 2.64:1 lines-only); the one measurement that changed a decision was orange-ink on the map water (4.31:1), so the workshop label sits on the white land and the badge's second line is slate (7.53:1 on white). The first composition put the chest tick's label against the swing tag at 1200 (the label's right edge landed where the tag began) — the hero garment moved left (centre 400 → 380), the labels shortened to CHEST / BACK / SLEEVE, the sleeve mark and its label moved to the viewer-left sleeve, and the tag's width was clamped (200–240 px, 42%) so it never reaches the tick at 641–1100 px. The tag's second line was wrapping at 225 px — fixed by the width clamp and a 13 px line. The shop-tag strap stranded its middle dot on a wrapped line at 641 — it now stacks below 760 px with the dot hidden. At 375 the trust line sat under the sticky bar — the lede drops its middle clause on phones, the h1 steps to 27 px and the CTA pair sits on one line, so h1 + CTA + trust clear the bar at 375 × 667 (measured: trust line bottom 521 px vs sticky bar top 598 px). Rest scene re-checked at 1200 × 750 with the $2,540 tag inside the thumbnail.
• Pass 2 — Depth. The swing tag's tall variant (note + waived line) overlapped the back inset's hanger at 641 px — the floor dropped to y 700 and the inset to y 444 so the tallest tag clears the peg at every on-scene width. The "5 DAYS" rush card was pinned where the cord crossed it — moved to the left of the hanger neck. The embroidery decoration earned its own tool: a needle with the thread trailing to the hoop, the satin hatching flooding behind it, instead of a squeegee over stitches. The leaning screen in the corner now has the crew's mark burnt into the mesh and the "YOUR SCREENS · KEPT" tag when re-order is on (second-read details); the quantity rail marks the 100 cell with a navy underline and the hint under the stepper prints the live tier rate. The loop's initial phase was tuned so the 7 s thumbnail captures the squeegee mid-sweep with the ink half-flooded (measured flood 67 of 72 units at capture). Pass 2 drove every worked example by clicking the real controls, the 90/100 boundary pair, the four floors, two rapid-fire bursts (one loop after each) and the 40-vector oracle sweep — all green.
• Pass 3 — Hardening. At 375 the backdrop's wall and rail rects extended past the cropped viewBox and tripped the overflow probe (SVG-internal geometry, invisible but flagged) — the backdrop is now drawn to the visible crop and redrawn when the breakpoint flips, and the screen frame moved in so its skewed corner stays inside; scrollWidth 375 with zero offenders. Masthead at 375: wordmark right edge 212 px vs call button left edge 229 px (no collision); sticky bar fixed, solid white, tel link in the bottom 140 px, no backdrop-filter anywhere; tap targets all ≥44 px; focus rings on every control, chip, toggle, field and summary. Badge docks at 640 and sits on-scene at 641 (asserted both); FULL note form on the badge at 641, 1000 and 1200, SHORT form at 640 and 375, ledger and mirror always full (asserted three surfaces, presence and absence). Reduced motion verified (no loop, ink flooded, identical frames 1.3 s apart, controls still work); v-flag form patterns compiled in Node; resize re-places the tag and re-crops the scene; the Chanel rule removed the wall's vertical block joints (the horizontals carry the concrete); final copy read in Australian English. Harness totals in the final run: 813 asserts on the two pages (779 on the site, 34 on this guide), all green, zero console errors or warnings at 375 / 640 / 641 / 1000 / 1200 and under reduced motion.

Spec notes: the drawn-cap mapping is one ghost per garment to twelve (10 garments draw ten ghosts, 20 and above draw the cap), with the rail label carrying the true count; the drill shirt inverts the mark's first colour to white so a navy print never disappears on navy drill — both documented here and nowhere contradicted on the page. Nothing in the concept was found arithmetically wrong: all eight worked figures and the four floors reproduced exactly.