Generative Assets · Industry Demos · how it was made

How the Ironbark Farriery demo was built

Ironbark Farriery is a fictional mobile farrier working the Swan Valley, the Perth hills and the southern horse country — trims, front shoes, full sets cold or hot-shod, and remedial work alongside a vet. The page exists for the Gidgegannup agistment with four horses due, the Swan Valley pony club family and the Serpentine eventer whose horse is footsore. Its single job is a booking request with the service, the horse count, the property zone and the cycle already priced — per visit, to the whole dollar, with the callout handled honestly.

The Hoof Plan

The signature is a drawn SVG forge scene in elevation: an anvil on its stump with a shoe lying on the face, a hoof in profile up on a farrier's stand at the left showing exactly what the chosen service does to it, horses standing at a rail behind, a notched rail post carrying the booking cycle, and the ute on the track for the chosen zone. Every control redraws the scene and reprices the visit from the pinned anchors.

• Service chip redraws the foot and the shoe. Trim only dresses the wall back with a dashed trim line, rasp strokes and no shoe, and lays the rasp on the anvil instead. Front shoes, hind trim draws two feet side by side — one shod fore, one bare hind, each captioned. Full set, cold-shod nails a cold steel shoe on and lays four more off the stock in the dirt beside the forge. Full set, hot-shod puts the shoe on the anvil glowing ember with heat shimmer rising off it and burns a scorch mark into the seat of the foot. Remedial / glue-on fits a wedge pad with glue tabs up the wall and pins a vet's note card to the rail.
• Horses stepper draws that many horses at the rail — drawn cap 8, the stepper's own ceiling, so every count in the range is drawable. Each horse is emitted twice, once as a ground-coloured halo and once filled, so a line of eight reads as eight animals rather than one silhouette.
• Zone chip changes the ground under the ute — river loam with grass tufts in the Swan Valley, bitumen and a kerb line across the metro, laterite gravel and granite in the hills, sand and tussocks down south — swaps the horizon behind the rail (vine rows, rooftops, a granite hill and jarrah, a windmill on a flat paddock) and re-letters the steel distance plate nailed to the post.
• Cycle chip cuts that many weekly notches down the rail post — six, eight or ten — and captions it.
• Handling toggle stands a second figure at the leading horse's head with a hand on the halter.
• A slow loop breathes the forge glow under the anvil and the ember in the hot shoe, with the shimmer drifting up off it. The glow's opacity floor is 0.58, so the signature is visibly alive at any capture instant rather than tuned to the seven-second thumbnail. A spark leaves the coals once every eleven seconds — the second-read detail. Reduced motion parks the loop at a settled, lit frame. Chip swaps redraw snappy (10 ms stagger, 500 ms cap) against the first draw's 26 ms entrance, and the loop is token-invalidated in the handler, before the state swap, so a rapid burst of clicks can never leave a stale closure animating a rebuilt scene.
• The price is drawn as a scorched steel visit tag hung on a wire hook with a punched hole — the total, the spec line, the cycle line, the callout note or waiver declaration, and the two standing declarations. Preferred anchor upper-right on the forge wall; the binding rule is that it sits inside the signature container and never over the hoof, the anvil, the horses or a scene label. On the scene at ≥641 px, docked directly beneath the artwork at ≤640 px with a tightened viewBox crop (36 246 830 374) to enlarge the subject.

Pinned anchors (GST inclusive, per visit, whole dollars)

The service rate multiplies the actual horse count; handling multiplies the same actual count; the callout is flat per visit and disappears entirely at three horses or more, whatever the zone; the cycle multiplies the whole visit into the yearly line only and never touches the visit price. Every rate is a whole dollar and every stepper grid is whole horses, so no intermediate is ever fractional — the whole-dollar display rounding never has anything to round.

The callout waiver, solved at its boundary

The exact boundary is three horses, and it is reachable on the stepper grid (whole horses, 1–8), so the semantics could be pinned at every cell rather than inferred:

The short forms carried on the tag below 641 px are +<3 − n> horses waives the $<callout> callout and callout waived; the ledger and the screen-reader mirror always carry the full template. The +1 horses form at two horses is the pinned string and is shipped verbatim rather than silently pluralised, so the badge, the harness and the spec all agree on one literal.

The two quoted states

Remedial work has no number, because the honest number depends on the horse and the vet's notes. The tag prints the computable part of the visit and names the part that isn't: $90 + remedial quoted for two horses in the metro with handling on (the $40 callout plus 2 × $25). When the computable part is $0 — three horses in the metro with handling off, where the callout has already been waived — printing "$0 + remedial quoted" would be worse than useless, so the tag prints the pinned bare-quote string remedial — quoted once we've seen the horse instead. On remedial the yearly cycle line is absent and replaced by "we'll set the cycle with your vet"; the harness asserts the absence of any yearly arithmetic in the badge, the ledger and the mirror, not just the presence of the replacement.

Worked examples, measured from the running page

Every figure above, both quoted forms, the waiver boundary at 1 / 2 / 3 / 4 horses in all three charged zones, the full 1–8 stepper walk, every service × horse-count handling cell, and the rapid-fire burst were driven against an oracle reimplemented from the anchors in the verification harness, not read back from the page's own function — 578 assertions, all green in the final run. The rest-state figure measured from the running page is $840 a visit; the grid floor is $65, which is exactly the Hoof Plan's cheapest output (trim only, one horse, Swan Valley, handling off), so the services grid and the estimator cannot argue with each other.

Palette — argued from a coal forge, hoof horn, hot steel and a cold shoe

A dark charcoal ground with a horn-cream body ink, an ember that is genuinely the colour of hot steel doing the marking and glowing, and cold steel doing real work in the scene — the shoe, the nails, the anvil face, the tag. It sits near the "near-black plus one accent" default and is deliberately held off it by the second hue and by the cream, not by decoration. Every ratio below was measured with WCAG arithmetic from the shipped tokens in Pass 1 — role, hex and ratio read off the same row of the script.

Two tokens were re-minted in Pass 1 after measurement rather than shipped on the spec's word — the tag's scorch accent and its mute ink both failed against the darker end of the steel gradient, and the scorch overlay itself was moved out from behind the text into the tag's bottom padding band. The measurements are in the iteration log below.

Every SVG map label and every scene label is body-ink class: horn or ember ink with a ground-coloured halo painted through paint-order: stroke, so a label crossing the ocean fill, the scarp fill or a lit floor still measures over 10:1. Cold steel never labels the map.

Type

The typographic moment is the display line above the scene — the visit total set large in slab beside the anvil, with the scenario spelled out in caps after it: $840 · FULL SET, HOT-SHOD · 3 HORSES · 8 WEEKS. It is a real text node, not canvas paint, so it is selectable, readable by a screen reader and reachable by the collection's own sweep.

Techniques

• No libraries at all. One HTML file, inline CSS and JS, no build step, no external resource except the two Google Fonts.
• Procedural SVG throughout. The forge scene, the service-area map, the visit tag's hook, the trust icons and the favicon are drawn — there is not a raster pixel on either page. Where a real farrier's site would run photographs of feet, the drawing does the work, and it re-draws itself for every scenario, which a photograph could not.
• Two-pass silhouettes. Horses and the hoof are each emitted twice — once as a fat ground-coloured stroke, once filled — which is what makes eight overlapping animals at a rail, and a foot standing in front of them, read as separate objects on a dark ground.
• Dual-speed redraw. A firstDraw flag gives the opening render a 26 ms per-element stagger capped at 1.4 s, and every subsequent state change a 10 ms stagger capped at 500 ms, so a chip tap reads as a snap rather than a replay of the entrance.
• Clamped animation delta. The forge loop uses dt = min(max(now − last, 0) / 1000, 0.05) — clamped at zero as well as capped — because a rAF callback timestamp can precede the performance.now() captured when the loop was scheduled, and a negative delta feeding scene geometry is a real crash.
• State probe. window.__farrier exposes the full control vector, every computed line, both quoted forms, all four declaration strings with their short forms, the tag's rendered contents, a settled flag and a live loop count — so QA gates on state rather than on elapsed seconds, and a screenshot taken after a drive waits for the settled frame.

Conversion decisions

• The estimator is the hero, not a section. A horse owner's first question is "what will you charge me to do four horses at Gidgegannup", and the page answers it above the fold with the drawing that shows what the money buys. The enquiry form is the second screen, pre-filled from whatever the visitor configured.
• The callout waiver is the commercial argument, so it is stated in the hero motto, priced live in the estimator, noted when you are one or two horses short of it, declared when you clear it, listed in the services grid and answered in the FAQ. It is also genuinely how a mobile trade makes money — one property, one trip.
• Remedial work is deliberately not priced. A page that quoted a wedge-pad rebuild sight-unseen would be lying, and horse owners know it. Refusing the number and saying why is a stronger trust signal than any figure.
• Handling is on the page, not hidden. Naming the difficult-horse surcharge up front, with the reason and the note that most horses stop needing it, converts a conversation that usually happens badly in a paddock into a checkbox.
• Form fields. Name, mobile, property suburb, horse count and an optional due date — the five things needed to slot a property into a run. The horse count round-trips with the stepper. Notes are a textarea because "the bay mare is a two-person job" is the single most useful thing a farrier can be told before arriving. No email field: this trade rings back.
• Confirmation is local and honest. The panel is hidden on load and on an empty submit, appears only after a valid filled submit, names the enquirer and the configured visit, and says plainly that this is a demonstration and nothing was sent. The always-visible callback promise beside the form is separate static copy, not the confirmation.
• Licensing is answered honestly. Farriery has no licensing scheme in Western Australia. Saying so on the trust strip and in the FAQ — and then naming the actual qualification — is more persuasive than an invented licence number, and it is the truth.

Local SEO we'd implement for the real business

This demonstration page ships only WebPage and BreadcrumbList structured data, both declaring it a demonstration, because marking up a fictional business as a real one would pollute the index with false records. For a real farrier we would ship the schema below, wired to their Google Business Profile and their genuine reviews — that is the sales evidence without the dishonesty.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "@id": "https://ironbarkfarriery.com.au/#business",
  "name": "Ironbark Farriery",
  "description": "Mobile farrier serving the Swan Valley, the Perth hills and the southern horse country: trims, front shoes, full sets cold and hot-shod, and remedial work with your vet.",
  "url": "https://ironbarkfarriery.com.au/",
  "telephone": "+61 8 XXXX XXXX",
  "priceRange": "$$",
  "image": "https://ironbarkfarriery.com.au/img/forge.jpg",
  "logo": "https://ironbarkfarriery.com.au/img/logo.svg",
  "additionalType": "https://en.wikipedia.org/wiki/Farrier",
  "knowsAbout": ["Farriery", "Hoof trimming", "Hot shoeing", "Remedial shoeing", "Glue-on shoes"],
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Swan Valley",
    "addressRegion": "WA",
    "postalCode": "6069",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.80, "longitude": 116.02 },
  "areaServed": [
    { "@type": "City", "name": "Swan Valley" },
    { "@type": "City", "name": "Ellenbrook" },
    { "@type": "City", "name": "Gidgegannup" },
    { "@type": "City", "name": "Chittering" },
    { "@type": "City", "name": "Bullsbrook" },
    { "@type": "City", "name": "Serpentine" },
    { "@type": "City", "name": "Byford" },
    { "@type": "City", "name": "Mundijong" }
  ],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Tuesday","Wednesday","Thursday","Friday"],
      "opens": "06:30", "closes": "15:30" }
  ],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Farriery services",
    "itemListElement": [
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Trim only (barefoot)" },
        "priceSpecification": { "@type": "UnitPriceSpecification",
          "price": "65.00", "priceCurrency": "AUD",
          "unitText": "per horse", "valueAddedTaxIncluded": true } },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Front shoes, hind trim" },
        "priceSpecification": { "@type": "UnitPriceSpecification",
          "price": "150.00", "priceCurrency": "AUD",
          "unitText": "per horse", "valueAddedTaxIncluded": true } },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Full set, cold-shod" },
        "priceSpecification": { "@type": "UnitPriceSpecification",
          "price": "220.00", "priceCurrency": "AUD",
          "unitText": "per horse", "valueAddedTaxIncluded": true } },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Full set, hot-shod" },
        "priceSpecification": { "@type": "UnitPriceSpecification",
          "price": "280.00", "priceCurrency": "AUD",
          "unitText": "per horse", "valueAddedTaxIncluded": true } },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Remedial and glue-on shoeing" },
        "availability": "https://schema.org/InStock" }
    ]
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "reviewCount": "68"
  },
  "review": [
    {
      "@type": "Review",
      "author": { "@type": "Person", "name": "Robyn T." },
      "datePublished": "2026-06-14",
      "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" },
      "reviewBody": "Four horses done in one morning at Gidgegannup and the next visit in the diary before he left."
    }
  ]
}
</script>

Note the top-level type: schema.org has no farrier or equine-services subtype, so LocalBusiness is the correct organization type, and the trade is named through additionalType, knowsAbout and hasOfferCatalog rather than by inventing a type or borrowing VeterinaryCare, which would be a false claim about what this business does. Beyond the schema we would ship a Google Business Profile with the service-area radius rather than a street address, suburb landing pages for Gidgegannup, Ellenbrook and Serpentine, and the FAQ marked up once the answers are the client's own.

What changes for the real client

• Their photographs replace or sit alongside the drawing — before-and-after feet are the most persuasive images this trade has, and the Hoof Plan stays as the interactive piece.
• Their rates. Every anchor lives in one object at the top of the script; a farrier changing the hot-shod rate edits one number and the estimator, the services grid, the yearly line and the pre-filled form all follow.
• A real booking system. ServiceM8 or Tradify for the run sheet, job cards and cycle reminders — the eight- or ten-week rebooking is exactly what those tools automate, and the form would create the job rather than print a panel. Square tap-to-pay at the float for payment on the day, Xero behind it for invoicing and GST, calendar auto-rebooking at the chosen cycle, and the Google Business Profile review feed replacing the demonstration reviews.
• Their real credentials. The qualification, the insurance certificate and the ABN come from the client; the honest line about WA not licensing farriers stays, because it is true and it is a differentiator for anyone who did serve an apprenticeship.

Iteration log

• Pass 1 — Craft. Contrast measured with WCAG arithmetic from the shipped tokens, not from the spec: horn 15.09 / 13.98 / 15.79:1, worn horn 8.36 / 7.75:1, ember CTA labels 6.26:1 and 7.51:1 on hover, ember ink 9.32 / 8.63 / 6.39:1, cold steel 5.88 / 5.45 / 5.81:1, horn on the steel band 10.34:1, map labels 10.91:1 over the ocean and 12.78:1 over the scarp. Two real failures, both on the visit tag and both fixed by the two-token remedy rather than by moving the palette: the scorch accent measured 3.66:1 and the mute ink 3.81:1 against the darker end of the steel gradient, so the gradient was lightened (#C6CDD5 → #9DA8B4) and the inks re-minted to #4E2203 (5.59:1 at the worst stop) and #262B31 (5.90:1); the scorch overlay, which composited the tag's ground down to #6F6866 and would have put small text at 2.4:1, was moved out from behind the text into a 15 px band inside the tag's bottom padding. The disabled stepper glyph measured 2.99:1 and was lifted to #8A7F6E (4.62:1). Then the screenshots, at 375 / 1000 / 1200 native: the visit tag was 198 px tall in its quoted state and reached down to scene y 448, covering the eighth horse, the zone plate and the cycle caption — the horses were capped to the left 590 scene units (pitch 62), the zone plate and notches moved down the post, the cycle caption moved below the rail and the four anvil captions recentred and shortened, which cleared the column. The hoof read as a sack: it was rebuilt three times — the cannon bone dropped, the pastern narrowed to 38 units and shortened, the capsule reproportioned to a real hoof's wide-and-low 1.44:1 with a darker coronet band, a heel bulb and a white line, and the whole foot stood on a farrier's stand with a ground-coloured halo because it had been merging with the horse standing behind it. The anvil read as a pipe with a handle: it was redrawn to a London pattern with a face, horn, waisted body and splayed base, and both the shoe on the face and the four loose shoes were foreshortened to about 4:1 so they lie flat instead of standing up like croquet hoops. The hoof's caption moved onto a dark chip so it stopped fighting the horses; the h1 was reduced from a 50 px to a 43 px ceiling after it wrapped to four lines at 1200, and the display line from 30 px to 26 px after "8 WEEKS" orphaned. Drove every worked example with the full control vector set explicitly, both quoted states, the waiver boundary at 1/2/3/4 horses in three zones, and empty and filled submits: 578 assertions green.
• Pass 2 — Depth. Enriched the signature where it pays. The per-zone ground gained its own texture and horizon — grass tufts and vine rows for the valley, a kerb line and rooftops for the metro, granite and jarrah for the hills, tussocks and a windmill for the south — so the zone chip changes the world, not just a price. The forge throws a warm pool across the yard floor, the horses carry an ember rim-light on the topline because the fire is off to their right, and the hot shoe's heat shimmer drifts upward on its own phase. The second-read detail is a single spark that leaves the coals once every eleven seconds and arcs away — never at the seven-second settle. The stepper output bumps on change and the horses stepper flashes an ember ring for 0.9 s whenever a horse count crosses the waiver boundary in either direction, which turns the commercial rule into something you feel. Re-drove everything including the handling toggle across all five services at 1, 4 and 8 horses, and the full 1–8 stepper walk: green.
• Pass 3 — Hardening. 375 px: the masthead measured explicitly — the wordmark's right edge against the call button's left edge, no collision, with the call button icon-only below 780 px and the book button shortened to "Book" below 640 px; scrollWidth exactly 375 with zero overflow offenders outside scrolling ancestors; h1, primary CTA (48 px tall) and the trust line all above the fold; the sticky call/book bar visible with 48 px targets on a solid ground (no backdrop-filter anywhere on the conversion chrome). The tag docks beneath the artwork at exactly 640 and sits on the scene at 641, and at 960, 1000, 1100 and 1200 — carrying the short forms only at ≤640 and the full templates everywhere above, asserted on both sides of the pinned breakpoint. The 900–1100 mid-width band was checked specifically, where the tag compresses nothing in the drawing. The phone-width viewBox crop was tightened from 0 180 1080 440 to 36 246 830 374 after the 375 screenshot showed the subject too small in a thin strip. Explicit label-collision sweep at native resolution across three widths and three worst-case states — eight horses with ten notches, the remedial vet-note card with eight horses, and the rest state — asserting the tag's box against every horse, every hoof, every scene label, the rail notches and the anvil. It caught two: the visit tag measured 222 px tall in the rest state and 231 px quoted, reaching scene y 460, so the anvil (whose horn ran to x 722) was moved left and shortened to end at x 626, clear of the tag's column at x 636, and the ute's tray-forge flame was dropped below the same line. Then the 1000 px screenshot showed a defect no assert models — the free-standing "8-week cycle" caption had been buried behind the relocated anvil — so the cycle moved onto the zone plate as a second line, which is better anyway: one steel plate on the post now carries both the zone and the cycle. The 375 overflow probe reported six offenders while scrollWidth was exactly 375; every one was an #scene descendant clipped by the SVG's own viewBox crop, so the harness was fixed to exclude in-viewport SVG-internal geometry rather than the site. Reduced motion: no rAF loop starts, the glow parks lit at a settled frame (identical opacity a second apart), every scene part renders at full opacity, and the controls still price correctly. DPR 2 and a 1200 → 600 → 1200 resize round-trip preserve the state and swap the viewBox both ways. Focus states verified on chips, steppers, the toggle, the form fields, the submit button and the FAQ summaries, and a chip driven by keyboard. Both form patterns compile under Chrome's v-flag regexes (the zero-console assert is the net). The Chanel rule removed the nail keg's shelf clutter from the tool rack and the "four off the stock" caption, which the hoof chip already said. Zero console errors on both pages; this guide probed at 375 and 1200 for overflow, one h1, the schema panel and the colophon. 578 assertions green in the final run.