# 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.

Part of the design system this site is built on. The page is interactive — the system demonstrates its decisions in the browser rather than describing them — so open the web page to see it.

## Specimen

The real pass, with every input it reads set by hand. In the top bar the sky is the live one over Bengaluru and the reader is wherever the lookup puts them, so most of these combinations are only ever seen here: a reader in Berlin at noon never sees the night sky, and nobody sees snow over Bengaluru. Pick any reader, sky, condition and moon, and the pass draws it exactly as the bar would.

## Props

- `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.

Every primitive also forwards the native props of the element it renders, so aria-*, id and event handlers work without being listed here.

## 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.

## Sections

- [Foundation](https://www.biswarupmondal.com/design-system): The system behind this site — switch its decisions off and watch.
- [Psychology](https://www.biswarupmondal.com/design-system/psychology): A six-task session that runs the site's effects on you.
- [Principles](https://www.biswarupmondal.com/design-system/principles): Rams's ten, marked up in red pen, and ten of my own.
- [Typography](https://www.biswarupmondal.com/design-system/typography): Two families, a fluid scale, and how tracking moves with size.
- [Colour](https://www.biswarupmondal.com/design-system/colour): A cool neutral ramp, three ink tones, one accent.
- [Space](https://www.biswarupmondal.com/design-system/space): A 4px base, fine for interiors and coarse for page rhythm.
- [Material](https://www.biswarupmondal.com/design-system/material): Surfaces, hairlines, radius and elevation — the physics.
- [Motion](https://www.biswarupmondal.com/design-system/motion): Fast by default, with easing carried in tokens.
- [Component](https://www.biswarupmondal.com/design-system/component): The primitives everything else is assembled from.

## Components

- [Button](https://www.biswarupmondal.com/design-system/component/button): The only control that commits a change or navigates.
- [Link](https://www.biswarupmondal.com/design-system/component/link): Inline navigation inside a sentence.
- [Kicker](https://www.biswarupmondal.com/design-system/component/kicker): Mono, uppercase. The system's label voice.
- [Chip](https://www.biswarupmondal.com/design-system/component/chip): A non-interactive tag: a role, a year, a stack item.
- [Tile](https://www.biswarupmondal.com/design-system/component/tile): A raised surface, optionally a whole-card link.
- [Note](https://www.biswarupmondal.com/design-system/component/note): An annotation beside the argument, not part of it.
- [Tabs](https://www.biswarupmondal.com/design-system/component/tabs): One surface, several mutually exclusive panels.
- [Top navigation](https://www.biswarupmondal.com/design-system/component/top-nav): The site's one global bar: who this is, where to go, and where they are.
- [Boarding pass](https://www.biswarupmondal.com/design-system/component/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.
- [Ruler](https://www.biswarupmondal.com/design-system/component/ruler): Measurement chrome that frames a canvas and follows the pointer.
- [Selection frame](https://www.biswarupmondal.com/design-system/component/selection-frame): A drawing-tool frame around selected text or the control being addressed.

---

- Web page: https://www.biswarupmondal.com/design-system/component/boarding-pass
- Every page as markdown: https://www.biswarupmondal.com/llms.txt · full text: https://www.biswarupmondal.com/llms-full.txt
- MCP server: https://www.biswarupmondal.com/mcp
- Contact: ux.biswarup@gmail.com