Way Out: the people in the signs are leaving
The story behind Way Out
Premise A 2D piece scored on concept and execution rather than technical spectacle: the pictogram people in airport signs step out and take the signs literally. Audience: web-literate visitors arriving from X or the archive. Perf target: a few milliseconds a frame on one 2D canvas, with the machine staying quiet
Reference Schiphol’s yellow wayfinding, Otl Aicher’s pictograms for the Munich 1972 Olympics, and the pictogram performance at the Tokyo 2020 opening ceremony
Built with Canvas 2D, no libraries
Techniques Signs drawn in code and cached per face; a pictogram figure built from a small skeleton with one stroke width and a floating head, posed on twos and cached as sprites with the limb overlaps cut out; a platform simulation where sign tops are ledges and every sign is a rule; a route planner that stages the opening on whatever layout the screen gets; a pixel budget, a 30 fps idle and a pause when hidden
Direction Cool board-formed concrete, Schiphol yellow, exit green, information blue and prohibition red. Barlow Semi Condensed on the signs and Barlow on the page
The Story
Airport signs are full of people. There’s a man running for the exit, a couple outside the toilets, someone climbing stairs, someone dragging a suitcase, and someone slipping on a wet floor forever. They spend their whole lives telling other people where to go.
Way Out lets them go. The running man on the exit sign looks around, hops out of his sign and makes a break for it, and one by one the others follow. They’ve only ever known signs, though, so they do exactly what the signs say.
The Take
The page is a wall of signs on concrete, the kind you walk past at a gate. A second after it loads, the running man on the green Exit sign checks over his shoulder and jumps out, leaving an empty doorway behind him.
- The people walk on the signs. Sign tops are ledges. Walk off the end of one and you drop to the row below.
- Every sign is a rule.
- No running: they freeze, then tiptoe past.
- Wet floor: they skid, slip and land on their bums.
- Lift and stairs: these carry them up a row.
- Toilets: a figure goes in, and anyone else waits outside, tapping a foot.
- Arrows: they turn around, on the spot.
- Turn the arrows. Click or tap any arrow sign and it swings round 90°. The nearest person looks at it, points, and goes where it now says.
- Get them out. Anyone who reaches Exit throws their arms up, squeezes through the door with a little wave, and the count goes up. They come back in through Arrivals, so the wall never empties.
- The signs remember. Every sign whose person has left keeps a pale patch where the pictogram used to be, like a sticker peeled off.
- Leave it alone and a worker in a hard hat climbs out of Staff only with a ladder and turns an arrow himself.
The Tech
Signs drawn, not downloaded. Every sign is drawn in code:
- a faint vertical gradient, a one-pixel bevel and a soft specular sweep across the enamel;
- screws inset in proportion to the sign;
- a tight contact shadow plus a wider ambient one on the wall;
- labels in Barlow Semi Condensed, fitted to one cap height.
Each face is drawn once to an offscreen canvas and redrawn only when it changes. The concrete is baked once per resize: low-frequency mottling, formwork seams that run between the sign rows, and a grid of tie holes.
One figure, many poses. The people come from a small skeleton of hips, shoulders, knees and elbows, posed with angles snapped to the 45° grid that pictograms use. Every limb is one stroke width with round caps, and the head floats just clear of the body. Where a near limb crosses the body, a thin gap is cut out, which is how real pictograms keep overlaps legible. Poses step at 12 frames a second, like cut-out animation, while positions move at 60. Each pose is drawn once into a sprite with the gaps as real transparency, so it sits cleanly on yellow, green or concrete.
A tiny platformer of rules. The sim knows:
- Ledges: the tops of the signs and the floor.
- Gaps: narrow ones are stepped across; wide ones are drops.
- Signs: each one changes what a person does next.
The opening is planned, not hard-coded. On load, and again on every resize, a route search runs over the actual layout to find the path from Exit through No running to Wet floor, so the slip lands in about three seconds on a wide screen or a phone. After your first arrow turn, the sim checks which waiting resident has a literal path to Exit and sends them, so your first move pays off within a few seconds.
Quiet by default. The canvas is capped at twice the screen’s pixel density. Sign faces and figure poses are cached, so a frame costs well under a millisecond. When nothing moves it drops to 30 frames a second, and it stops when the tab is hidden.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.