Daylight Atlas

Written for the variant you picked above: Night

Build a world map of day and night for a distributed team. Props: people [{name, city, lon, lat, offset (UTC hours)}], hours (working hours, default 9–18), start (a fixed moment; otherwise it uses now and re-reads the clock every 30s), and theme. Sun maths (pure functions, NOAA's low-precision formulas): the fractional year γ from the day of year and UTC hour; the equation of time and the declination as short Fourier series in γ; the subsolar point — latitude = declination, longitude = −15 × (UTC hour − 12 + equation of time / 60), wrapped to ±180; the sun's altitude anywhere, asin(sin φ sin δ + cos φ cos δ cos(λ − λsun)); a daylight value from the altitude that is 1 above +2°, 0 below −12° and eases through twilight; the terminator latitude at each longitude, atan(−cos(λ − λsun) / tan δ); and a local clock at a fixed offset. The map: an equirectangular canvas from 80°N to 58°S, its height from its width, DPR ≤ 2. Land is a dot every 2° from a 1° land mask (Antarctica left out). Each dot's colour comes from its daylight: night colour → a warm twilight colour → the day colour. A deterministic scattering of dots — denser in the bands where most people live — carry city lights that glow amber as night falls on them. The terminator is a fine dashed warm line, and the subsolar point is a glowing sun disc. Team pins are DOM markers over the canvas with a dot (green in working hours, blue when awake but off, grey asleep) and a label with first name and local time. Header: a title, "3 of 7 in working hours · Tue 14:20 UTC · now", a Play the day toggle (sweeps 24 hours in about 12s) and a Now button. A range input shifts time 0–24h ahead in 15-minute steps with a readable value text. Under it, a grid of team cards: a sun or moon glyph, name and city, the local time large, and the state (Working, Off, Asleep) in words. Two themes, night (glowing on near-black) and paper (navy night side and amber lights on cream). Selected variant — Night (night): Palette for this theme (Night): --dl-accent #ffd27a; --dl-accent-ink #1f1604; --dl-asleep #6e7385; --dl-awake #9ec5f4; --dl-card #0f1117; --dl-chip rgba(255, 255, 255, 0.06); --dl-ink #f1f2f6; --dl-line rgba(255, 255, 255, 0.08); --dl-muted #9a9eab; --dl-sun #ffd27a; --dl-work #5fd39a. Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "night". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Drag the scrubber or press Play the day to sweep day and night across the map; Now returns to the present. Everything updates the pins and the team list. Motion: Play sweeps a full day in about 12 seconds; otherwise the map follows the real clock. Nothing moves on its own under reduced motion apart from the clock. Accessibility: The canvas is an image with a label giving the UTC time and where the sun is overhead; the scrubber is a labelled range with readable value text; team status is written out in words, not just colour. Responsive behavior: The map keeps its proportions at any width; the team list wraps into as many columns as fit. Touch: The scrubber and buttons work by touch. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Drag the scrubber or press Play the day to sweep day and night across the map; Now returns to the present. Everything updates the pins and the team list.

Motion

Play sweeps a full day in about 12 seconds; otherwise the map follows the real clock. Nothing moves on its own under reduced motion apart from the clock.

Accessibility

The canvas is an image with a label giving the UTC time and where the sun is overhead; the scrubber is a labelled range with readable value text; team status is written out in words, not just colour.

Responsive

The map keeps its proportions at any width; the team list wraps into as many columns as fit.

On touch

The scrubber and buttons work by touch.