Concept
The wave's one dark site: the port at 5 a.m. Pre-dawn harbour navy, working floodlight orange, channel-marker green. Everything argues from Fremantle before sunrise — the gantry crane already lifting, the ledger already computed. A customs broker sells certainty about numbers, so the signature element is a Landed-Cost Ledger that computes duty, GST and fees live while an SVG port scene acts the freight mode out overhead.
Palette
Type
Big Shoulders (display) — a tall industrial condensed face that reads like gantry signage and manifest numerals; the ledger total is set in it huge, like a container code. Source Sans 3 (body) — a workhorse with real numerals and honest neutrality for the copy a B2B buyer actually reads. The typographic bravery moment is the ledger total: an 800-weight condensed figure with the at-cost declaration set quietly beneath it.
The signature — Landed-Cost Ledger
Three mode chips (FCL 20 ft container / LCL groupage / air freight) drive two surfaces at once. Overhead, an SVG port scene rebuilds per mode — a ship-to-shore gantry crane lifting a container ship-to-truck for FCL, a groupage depot floor with a working forklift for LCL, a freighter tail with a scissor loader for air. Below, the ledger computes live: a goods-value stepper, a duty-rate chip (0% / 5%, labelled "typical general tariff rates — confirmed on classification" — the label is the honesty), GST computed as 10% of (goods + duty + the mode's pinned example freight), our fees itemised, and the government line printing no number at all — ABF and DAFF charges are passed through at cost, so the at-cost declaration is the deliverable and it appears wherever the total does.
Engineering shape: each scene is a template-string SVG rebuilt on mode change, with a token-invalidated requestAnimationFrame loop — the handler bumps the token before the state swap, so a rapid-fire chip sequence can never leave a stale closure animating a demolished scene (the W25 race class, designed in from the first draw). Entrance choreography runs once (26 ms stagger, 1.2 s cap); every subsequent rebuild redraws snappy (8 ms stagger, ~380 ms cap) behind a firstDraw flag. Moving groups are nested — an outer wrapper takes the CSS entrance, an inner group keeps the positional SVG transform attribute, because a CSS transform on the same node silently discards the attribute. Reduced motion poses each scene to a designed static frame (crane mid-traverse, container in the spreader) and skips the loops entirely. A state probe at window.__customsbroker exposes mode, duty rate, every computed line and a settled flag.
The arithmetic (binding anchors)
| Line | FCL 20 ft | LCL groupage | Air freight |
|---|---|---|---|
| Brokerage & clearance | $340 | $290 | $260 |
| Cartage / delivery, metro | $680 side-loader | $95/m³, min 3 m³ billed ($285 floor) | $180 terminal & delivery |
| Example freight (labelled) | $3,200 sea | $900 sea share | $450 air |
| Duty | goods value × 0% or 5% — typical general rates, confirmed on classification | ||
| GST | 10% × (goods value + duty + example freight) — statutory | ||
| Government charges | no number printed — at cost, set by ABF and DAFF, shown from the current schedule on the entry | ||
| Worked example | Duty | GST | Our fees | Ledger total |
|---|---|---|---|---|
| Rest: FCL, $40,000 @ 5% | $2,000 | $4,520 | $1,020 | $7,540 + at cost |
| FCL, $40,000 @ 0% | $0 | $4,320 | $1,020 | $5,340 + at cost |
| LCL, $8,000, 4 m³ @ 5% | $400 | $930 | $670 | $2,000 + at cost |
| Air, $5,000 @ 0% | $0 | $545 | $440 | $985 + at cost |
All four figures were measured from the running page and cross-checked against an independently reimplemented oracle in the QA harness — every anchor is integer arithmetic, whole-dollar throughout. The ledger total is deliberately duty + GST + our fees: goods and freight sit above the line as GST context because the importer already pays them to supplier and forwarder — summing them would inflate the number dishonestly. The LCL cartage clamp binds below 3 m³ (2 m³ bills 3 × $95 = $285, with the note shown only when binding), and the services grid's floors are the estimator's cheapest fee subtotals — $1,020 FCL, $575 LCL, $440 air — never the ledger total, and each grid line says so.
Conversion decisions
- Above the fold at 375px: name, "Customs clearance for WA importers — Fremantle and Perth Airport", the quote CTA and the licence trust chip — all before any scrolling. The ledger sits directly beside the hero at desktop so the signature shares the thumbnail.
- Form fields: name, company (optional — plenty of first-importers are sole traders), phone, freight-mode chips and "what are you importing?". No suburb field: a broker needs the goods and the mode, not the street. The ledger's "use these figures" button pre-fills the enquiry with mode, value and estimate — a warmer lead (the W12 handoff).
- Port-to-metro map instead of a suburb map: a customs broker's geography is two gateways and delivery corridors, not a service-area blob — the map marks Fremantle Port, Perth Airport, the O'Connor office and the industrial destinations a WA importer recognises (Welshpool, Canning Vale, Bibra Lake, Malaga).
- Honest FAQ: "Do I need a broker by law?" answers no — you can self-clear with ABF — because a page that lies about necessity loses the reader who googles it. The value case (classification, concessions, storage clocks) stands on its own.
Local SEO we'd implement for the real business
This demo deliberately ships only WebPage/CreativeWork structured data, because fictional business schema in a real search index is dishonest markup. For a real brokerage client we would ship the full local-business graph — shown here as a code sample only:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ProfessionalService",
"additionalType": "https://en.wikipedia.org/wiki/Customs_broker",
"name": "Fairlead Customs",
"description": "Licensed customs brokerage clearing FCL, LCL and air freight
through Fremantle Port and Perth Airport.",
"telephone": "+61 8 9000 0295",
"address": {
"@type": "PostalAddress",
"addressLocality": "O'Connor",
"addressRegion": "WA",
"postalCode": "6163",
"addressCountry": "AU"
},
"areaServed": ["Perth", "Fremantle", "Western Australia"],
"openingHoursSpecification": {
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
"opens": "06:30", "closes": "17:00"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9", "reviewCount": "87"
},
"review": {
"@type": "Review",
"reviewRating": { "@type": "Rating", "ratingValue": "5" },
"author": { "@type": "Person", "name": "— real client name —" },
"reviewBody": "— pulled from the client's live Google reviews feed —"
}
}
</script>
Iteration log
Pass 1 — Craft
The screenshot review caught a genuine ship-blocker every state assert sailed past: the entrance choreography set an inline CSS transform on the crane's moving lift group, which silently discarded its SVG transform attribute — the container rendered clipped at the canvas origin while all 97 harness asserts stayed green (the rendered image is ground truth). Fixed by nesting: outer wrapper for the entrance, inner group for position; same fix applied to the LCL forklift and air loader. Also demoted the hero motto's orange bold to floodlit ink with an orange underline (orange is a mark, never small text), moved the channel buoy seaward of the ship's bow where the hull had been hiding it, and added the floodlight glow the rest state calls for — lamp dots under the crane boom washing the wharf.
Pass 2 — Depth
Scene fidelity pass. The LCL staging label painted itself under the arriving pallet and clipped past the depot wall — repainted on the floor apron; the wall sign moved below the lamp rods so nothing pierces the letters. The air freighter sat 23px too deep — gear shortened so wheel bottoms kiss the tarmac line, and the scissor loader's chassis was re-seated the same way. Split each scene's reduced-motion pose from its live start phase: the crane loop now starts just as the box lifts off the ship, so the 7-second thumbnail capture lands mid-traverse with the container in the spreader — a 9-second-wide window (t = 3.2–12.2 s of the 16 s cycle), not phase arithmetic on a knife edge. Second-read details: the channel buoy's green starboard flash (opacity floor 0.55, never invisible), the FRE 0295 carton stencil, the AKE 0295 ULD code, and the berth caption that re-times per mode.
Pass 3 — Hardening
Full headless sweep at 375/768/1200: masthead first — wordmark and phone clear at 375 with the phone collapsing to an orange Call chip below 400px. Empty submit raises field-level errors and never shows the confirmation; filled submit confirms in the "we'd call you back" family and declares the demo. Rapid-fire drive (nine mode/duty clicks in one evaluate, no settle, run twice) lands on a consistent FCL $7,540 with the scene alive and zero console errors — the in-handler token invalidation holding. Reduced motion serves a static mid-lift frame and still computes every mode. Contrast sweep on the dark ground measured: body ink 14.95:1, muted ink 8.41:1, link green 7.62:1, CTA text on orange 5.52:1; raw orange/green never carry small text. The Chanel-rule cut: a second row of deck containers on the ship — the stack read busier than the crane it was there to serve.
What changes for the real client
- Live tariff data: the duty chip becomes a real classification lookup against the Working Tariff, and the example freight lines are replaced by the client's forwarder rates via their job system.
- Their systems: brokers run on CargoWise, Expedient or Neptune — the enquiry form would push straight into job intake, and the "entries lodged daily" line would carry live counts.
- Their proof: real licence number, real Google reviews feed (with the schema above), case studies with real duty-concession savings.
- Booking: a document-upload path for the commercial invoice — the real conversion is the PDF, not the phone call.