Factory Yard
A live isometric town drawn with WebGL in the hairline style of ai-iso-skill.
Goods go from a factory to a warehouse along the main road of a small seaside town, and on to a shop by the sea. East of the town, past a green belt of woods, lies Sahel, a new city of towers, with a metro, a Metrobus, a car showroom and a container port. Beyond Sahel the land rises into mountains, and the metro runs out through them to Millbrook, a valley of farms. An observatory stands on Beacon Hill, and on a spit out over the sea below the valley, Starships are built and launched:
- Behind both towns are hills; in front of them, the sea. Woods ring them round.
- A day passes in six minutes. Windows, street lamps, headlights and the lighthouse come on at dusk.
- There is no dashboard. Click anything and a card shows its live details; click a vehicle and its route appears.
Open it
It's a Next.js app that builds to a static site. You need Node 20 or later.
npm install
npm run dev
Then go to http://localhost:3000.
To build the site, run npm run build. It writes plain HTML and JS to out/, so you can host it anywhere. To try the built copy locally, run npm run preview.
How the code is laid out
| Folder | What's in it |
|---|---|
app/ |
The page, the layout (which self-hosts DM Mono) and globals.css with the colour tokens |
components/YardFigure.tsx |
The plate around the map: caption, buttons, tags and the card. It loads the engine in the browser. |
yard/kernel/ |
The iso projection, Part (boxes, faces, hairlines, text), Path, the corridor graph and the seeded random numbers |
yard/theme.ts |
Tokens → materials, and the day/night blend |
yard/models/, yard/world/ |
Vehicles, people, boats, and the static town |
yard/land.ts |
The east country's land: the hills, the gorge and the moor, and the corridors cut through them for the line and the roads |
yard/sim/ |
The simulation: clock, traffic, trucks, forklifts, people, homes, the shop and its courier, the police and the robbers, the fire station, the pier, fishing, weather, Car Works and the train; Sahel's traffic and people, the metro, the Metrobus, Sahel Motors, the port and the container truck; the east country, Millbrook, the observatory and Starbase |
yard/view.ts |
Camera, selection, card, routes, peeking into buildings, the frame loop, keys |
yard/index.ts |
Builds everything in a fixed order and starts the view |
The engine runs once per page load. React draws the plate, and the engine drives it from then on.
The places
| Place | What's there |
|---|---|
| Factory | Plant 01, its conveyor, staging, two loading bays, a truck park for flatbeds waiting for a free bay, and the rail loading platform |
| Warehouse | Warehouse 01: two rows of racks three levels high, shelving with a packing bench and pickers, a loading lane, two docks, and a sliding gate with its guard |
| Shop | Corner Market on the seafront, where Hill Av meets Coast Rd: its delivery lay-by, a zebra crossing, and parking bays across the road on the promenade |
| Town | Flats, Harbour Bank, Café Mira, the police station, Town Hall (whose clock tells the simulated time), houses with gardens and villas with pools. Orchard Lane, a new street of six houses, runs off the roundabout. Riverside Fire Station stands on Riverside Rd with ENG-1 in its bay. Mill Park lies on the west side. |
| Car Works | A car factory on a terrace cut into the hills behind the warehouse, its lot of finished cars in front. Inside, one line runs through a press shop, a body shop of welding robots, a paint shop, assembly and the end-of-line tests. |
| Railway | One track along the foot of the hills, out of a tunnel under Harrow Ridge, with a loop through the Plant 01 yard and its loading platform |
| Coast | Coast Rd, the promenade, the beach, the town pier, Sunset Pier with its rides, and a breakwater with a lighthouse. A sailboat, a motorboat and the fishing boat Kestrel are out at sea. |
| Woods | A strip of woods west of the old town, a green belt between the two towns with footpaths through it, and another strip east of Sahel; pines up the hills |
| Sahel | The new city: four avenues (Gate, Najd, Tower and Port Av), North St, Sahel Blvd with a busway down its middle, Souq St and the Corniche. Skyscrapers in the Financial District (Sahel Tower, Sahel Arch, the Globe and more), City Hall behind its colonnade, Souq Sahel mall, the library, flats and hotels, Wadi Park, and Sahel Marina with its yachts. |
| Sahel Metro | Two lines on viaducts, after Riyadh's: Line 1 from Market St in the old town through Sahel Central and Port and on out to Millbrook, Line 2 from Motor District down to Sahel Central. Sahel Central, after the King Abdullah Financial District station, is a long row of white lobes woven with ribbons and eyes of lattice that glow at night. |
| Sahel Motors | Car Works' showroom on a terrace at the foot of the hills: twin glass car towers, a glass hall with cars on show, a test track, and a level crossing over the main line down to Najd Av |
| Port | Sahel Container Terminal, east of the marina: a quay with three ship-to-shore cranes, a yard of stacked boxes with three gantry cranes, a gate, a control tower, reefer racks, and a breakwater with a light at each end |
| East | The country beyond Sahel. Harrow Ridge, which the Vale Road climbs in hairpins; Raven Gorge, with the Raven Beck and alders and willows on its floor, crossed by Line 1 on a concrete arch and by the road on a suspension bridge; the plateau of High Moor with Beacon Hill standing on it; Long Edge; and Millbrook Vale, the valley at the end of the line. Snow on the high peaks behind. |
| Sky | Beacon Hill Observatory, on the levelled top of Beacon Hill above High Moor. Observatory Road winds up round the hill from the Vale Road. On top: the Beacon Telescope in its big dome, a public dome and a survey camera's dome, a solar tower, the visitor centre with its planetarium, the astronomers' residence, a weather mast and an all-sky camera. The Moor Dish, a radio telescope, stands on the moor below. |
| Starbase | Gull Spit Starbase, a Starship factory and launch site on land made out over the sea below Millbrook. At its west end the Starfactory, the Engine Shop, and the two Mega Bays (the second glass-walled) where boosters and ships are stacked; along the road the Rocket Garden, then the tank farm, and at the tip the launch tower with its chopsticks, the launch mount over its flame trench, and the deluge tanks. |
| Village | Millbrook, an English farming village round Line 1's terminus. Cottages with front gardens behind picket fences, a green with an old oak, a pump and a farmers' market, the Plough Inn and Millbrook Stores. Across the road, the farm: wheat, a hay meadow with its bales and a windpump, allotments, the long field, the millpond and its watermill, a red barn with two silos, pens for the sheep, cows, pigs, hens and horses, and an apple orchard with its store. |
What moves
- Plant 01: a pallet leaves the factory on Line A every 26 s. Forklifts FL-01 to FL-03 load the train while it stands at the platform, then the flatbed waiting at a bay, and otherwise clear the belt into staging.
- Flatbeds (TRK-2051 to TRK-2053): the three trucks share two bays and two docks.
- A loaded truck waits at its bay until a dock is free, then crosses the road.
- It goes round the roundabout, and the guard opens the warehouse gate.
- On the way back it waits in the truck park until a bay is free.
- Warehouse 01: forklifts FL-04 to FL-06 unload the flatbeds into the racks, lifting to the top level with a telescoping mast. They load the box trucks from the rear in the loading lane. Two pickers carry parts from the shelving to the packing bench.
- Box trucks (DLV-01 to DLV-03): they carry four pallets down Hill Av to the shop, open their rear doors in the lay-by, and staff carry the boxes in. They go back along Coast Rd and up Harbour Av, and cross Riverside Rd straight into the warehouse gate.
- Shoppers: they walk in down Hill Av or along the promenade, or drive in, park in the bays on the seafront and cross at the zebra. They take boxes off the shelves, pay and leave.
- Online orders (PKG-1): now and then a home orders from Corner Market.
- A shop assistant picks the boxes, packs the parcel and carries it over the zebra to the parcel van.
- PKG-1 drives to the house by the shortest way and pulls in at the kerb, and the courier walks it to the door.
- The home's card shows the order with an arrival time and a Track parcel button. The camera then follows the van, and its card shows the order's timeline.
- Traffic:
- Cars pass through on Riverside Rd and Coast Rd.
- Town cars loop round the blocks and give way where they join a busier street.
- The bus (BUS-1) runs Line 1 round the southern blocks. It stops at five shelters, where people get off and queue to board.
- People:
- They walk the pavements from home to home, to the beach, the park, the café, the bank, the piers or the fair. They wait at the kerb for a gap, and traffic stops for anyone on the road.
- Each has an outfit that suits who they are, from shoppers and staff to police, firefighters and line workers. Arms swing as they walk, and they sit at café tables and on benches. Some jog, and some walk a dog.
- There are fewer people out at night, and fewer shoppers.