Boarding pass
What the city in the top bar opens: a ticket from the reader to Bengaluru — how far, how long by air, and where exactly — under the real sky over the city.
Specimen
Props
| Prop | Type | Note |
|---|---|---|
| reader | Reader | Where the reader is: "far" or "same" with the distance in km once the lookup answers, "locating" while it is out, and "unknown" when it failed. It decides the origin, the fields and what the plane does. |
| city | string | null | The reader's own city, printed under YOU. Without one, the pass says "Where you are". |
| sky | PassSky | The phase, the weather and the moon to draw. In the bar, useLiveSky() reads them from the forecast; on this page, the controls set them. |
| hop | "loop" | "lap" | What the plane does over the city when the reader is already in it: a loop-the-loop, or a lap of the city. Defaults to the loop. |
| playing | boolean | Whether the card is showing. The plane only flies, and the canvas only draws, while it is. |
| still | boolean | Forces the reduced-motion frame. Defaults to the reader's own prefers-reduced-motion setting. |
| time | string | The city's local time, printed on the stub. |
| replay | number | Change it to start the plane's cycle again from the top. The bar changes it on every opening. |
Use it for
- Only as the panel the city in the top bar opens. The pass is what that word means, not a general-purpose card.
- The plane says where the reader is. For a reader somewhere else it never lands: it crosses, leaves the frame and comes round again, and the crossing takes longer the farther away they are, from about 2 seconds for Mumbai to 3.4 for New York. For a reader already in Bengaluru it takes off, loops over the city, lands, waits on the runway and taxis off for the next one, and the pass is stamped Already here.
- The sky is the real one. Dawn and dusk turn on the forecast's own sunrise and sunset, the weather is the current reading the bar's temperature comes from, and the moon is drawn in tonight's phase. Until the forecast arrives, the hour comes from the local clock and the sky is taken as clear.
- Depth comes from distance travelled, not from the clock, because that is how depth reads from a moving seat: the nearer something is, the faster it slides past, and nothing slides at all while you are standing still. A world scrolled by the clock would keep moving while the plane waits on the runway, and the plane would look as if it were rolling backwards. So every layer behind the plane moves by a fixed share of how far the plane has come: hills 0.1, the city 0.22, far clouds 0.4 and near clouds 0.6, while the sun, moon and stars never move. The world starts sliding on the take-off roll, stops when the plane stops and runs backwards when it turns round, and only the wind moves the clouds while the plane waits.
- Pixel art moves in steps. The sky is redrawn at most twelve times a second, the stamp lands in four hard steps, and nothing eases between pixels.
Do not use it for
- Running it while it is closed. The canvas draws only while the card is open, and the pass is not in the page at all until the city is first opened.
- Drawing the sky at any width but a whole multiple of its 79 pixels, because a pixel would stop being square. --pass-pixel sets the scale and the ticket's width is derived from it.
- Setting the airport codes or the stamp in the pixel face at anything but 8px or 16px. Silkscreen is drawn on an 8px grid and blurs between them.
- Treating the canvas as content. It is hidden from assistive technology, the figures it stands for are all in the text beside it, and the city's accessible name carries the whole readout.
- Animating it under reduced motion. That reader gets one finished frame instead: the plane mid-cruise, or landed.