Supply Chain Journey

About this style

A supply chain explainer follows one product through every stage it passes: where it is grown, processed, shipped, stored and sold, with the days and distances in between. Standard shipping containers, which Malcom McLean began moving by ship in 1956, made long sea legs routine and cheap, and they now carry the middle of most such journeys. Tea is processed within days of picking, close to the garden, and is often shipped in bulk to be blended and packed near where it is sold. Corrugated shipping boxes are usually printed in one or two inks straight onto brown kraft board, the look this piece borrows.

Make a 10-second supply chain explainer printed like a shipping box: one tin of tea travels from the bush to the shelf along a dotted route on a fictional map, every stop stamped in and the days adding up.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Larkhollow Breakfast Tea, 100 g tin (fictional).
- Title: "From bush to shelf"
- Stops and days: Silverbrae Estate, picked by hand (Day 0) · Silverbrae factory, withered, rolled, dried and packed (Days 1–3) · by truck 240 km to Port Sarrow (Days 4–5) · at sea on the MV Gannet Bay, 8,900 km (Days 6–27) · Port of Ostrel, unloaded and cleared (Days 28–29) · by truck 40 km to the Larkhollow warehouse, blended and tinned (Days 30–32) · by van 20 km to Wexley Street Grocer, on the shelf (Day 33).
- Summary: "33 days · 9,200 km · 6 stops"
- Length: 10 seconds.
</inputs>

<direction>
- Look: two inks printed straight onto brown kraft board, like the side of a corrugated shipping box. Board #C49A6C with a fixed seeded fiber texture (thousands of 1px fibers 6–30px long at ±8% lightness), soft blotches and faint vertical flute shading every 14px at 3%. Inks: black #1D1915 and stamp red #C2372B, both multiplied onto the board at about 90% density through seeded speckle voids so solids look printed, not filled; plus one opaque off-white ink, #F2EBDD at 80%, for the sea's wave lines.
- Map, fictional with no real coastlines: a western land (x 120–720) with highlands and an eastern land (x 1240–1800), the sea between. Coastlines are 3px black lines built by seeded midpoint displacement from hand-placed control points, with a 10px band of fine black hatching just inside them; the sea is plain board under off-white wavy lines (1.5px, 14px apart); highlands are small black chevrons; a few dot towns and dashed minor roads fill out the land. A black compass rose (90px) sits in the open sea near (1000, 330) with "NOT TO SCALE" under it in Overpass Mono 600, 20px.
- Stops, in stage pixels: Silverbrae Estate (300, 420), the factory (430, 540), Port Sarrow (660, 650), Port of Ostrel (1300, 540), the warehouse (1500, 430), Wexley Street Grocer (1690, 580). Each is a stamped icon, 64–80px, drawn in code in black with one red detail: tea terraces with a bush, a factory with a sawtooth roof and a steam curl, cranes over stacked containers at both ports, a warehouse with roller doors, a shop with a striped awning. Beside each, its name in League Spartan 700, 22px, uppercase, and a red stamp-outlined day badge in Overpass Mono 600, 20px ("DAY 0", "DAYS 1–3" and so on), placed on the side away from the route.
- Route: road legs are black dashes (14px dash, 8px gap, 4px wide); the sea leg is red dots (6px, 16px apart) on a long curve that bows south to y 820 to round a cape. The route draws behind a vehicle riding its leading end: a side-view truck (56px) on the roads, a side-view container ship (90px, with a short wake of three off-white lines) at sea, a small van on the last leg. Vehicles flip to face their direction of travel and tilt at most ±10°, never upside down.
- Timeline: a bar at x 120–1800, y 940–972, outlined in black, with segments proportional to days (factory 3, road 2, sea 22, port 2, warehouse 3, delivery 1); each segment fills with black hatching as its stage plays, labelled beneath in Overpass Mono 600, 20px ("3 d", "2 d", "22 days at sea", "2 d", "3 d", "1 d"). Above the bar's right end, on baseline y 920: the day counter "DAY 00" in Overpass Mono 600, 40px, right-aligned at x 1800, and the distance counter "0 km" right-aligned at x 1560.
- Captions: one at a time, at the left on baseline y 920, League Spartan 600, 26px: "Picked by hand: two leaves and a bud." · "Withered, rolled, dried and packed in three days." · "240 km by road to Port Sarrow." · "22 days and 8,900 km at sea." · "Unloaded and cleared at Ostrel." · "Blended and tinned at the warehouse." · "On the shelf at Wexley Street."
- Type: kicker "LARKHOLLOW TEA · ORIGIN TRAIL" in Overpass Mono 600, 20px, tracked 0.12em, red; title League Spartan 800, 72px, uppercase, top-left at (120, 96); summary League Spartan 600, 28px, beneath.
- Motion: everything prints. The map rolls on left to right behind a soft print edge; icons and badges stamp in (scale 1.12 → 1 over 0.12s on cubic-bezier(0.2, 0.9, 0.3, 1), a seeded ±3° tilt), their ink density rising from 70% to 90% over 0.2s with a 1px spread. Vehicles run each leg on easeInOutSine, and the day and distance counters roll in step with them, days racing during the sea leg. The camera is locked apart from a 3% push across the piece. The finale is a big red rubber stamp, "ON THE SHELF · DAY 33" inside a double rule, landing at −6° beside the grocer.
- Premium: real print on board (grain, voids, slightly uneven ink), a route you can follow at a glance, and days and distances that add up. Cheap: glossy app icons on a beige gradient, a plane flying over a world map.
Banned: real countries, ports or shipping lines, a globe, aircraft, gradients, drop shadows, glossy or colored icons, a third printed color beyond black, red and the off-white, perfectly flat solids, emoji, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.0s: bare board; the map prints in left to right: coasts, hatching, wave lines, highlands, compass; the kicker and title stamp in.
- 1.0–1.8s: the estate stamps in with "DAY 0"; the first caption.
- 1.8–2.6s: a short dashed leg to the factory; it stamps in with "DAYS 1–3"; the first timeline segment hatches.
- 2.6–3.4s: the truck drives the dashes to Port Sarrow; the port stamps in; the counters reach Day 5 and 240 km.
- 3.4–6.6s: the ship sails the red-dot lane around the cape; the counters run to Day 27 and 9,140 km; the long sea segment hatches across.
- 6.6–7.2s: the Port of Ostrel stamps in, "DAYS 28–29".
- 7.2–7.8s: the truck runs to the warehouse, "DAYS 30–32".
- 7.8–8.4s: the van runs to the grocer, "DAY 33"; the red ON THE SHELF stamp lands.
- 8.4–9.0s: the summary sets under the title; the counters rest on DAY 33 and 9,200 km.
- 9.0–10.0s: hold, nothing moving.
For other lengths, stretch the sea leg first; keep at least 1s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter. No other libraries.
- Build the board and its fibers, each ink's speckle mask, the map layers and every icon once at load into offscreen canvases; each frame composites them with multiply, revealed by the print edge and the route's progress.
- The route is one precomputed polyline per leg, sampled by arc length; vehicle position, heading and both counters are functions of t.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check no ink appears ahead of the route's leading end, vehicles stay on the route and never turn upside down, every badge and label sits clear of the route and the other stamps, the timeline segments are proportional to days, the counters end on DAY 33 and 9,200 km, and grain and voids survive at 1280×720. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Blueprint Technical Drawing

Made by us

A cyanotype-blue engineering sheet that drafts itself: centerlines, compass-swept gears, hatching and dimension lines a…

Material Container Transform

Made by us

A recipe app demonstrates Material-style motion: a card expands into a full screen, tabs switch on a shared axis, a FAB…

Isometric Hairline

Made by us

A tidy isometric line-art explainer: constant 2px strokes, white faces and one vermilion accent as a parcel travels fro…

Flat Vector Science Explainer

Made by us

A bright, rounded science explainer on a deep-space backdrop: springy geometric shapes, two-tone shading and soft long…