Behind the scenes

The home page opens with a living pixel art window into places around the world and here in Montevideo, under the real sun, Moon, stars and weather of each place. This page explains how it works.

Two furry friends also keep you company on the home page. A ginger cat naps next to the name and wakes up for a stretch when pressed, while a dog in the footer keeps an eye on a bone and runs to fetch it when you press it.

The landscape

Real-world sceneries are inspired by photographic references, geographic coordinates, and elevation models, while the sky and weather systems use validated scientific formulas and climate records.

Each sprite is written as rows of characters with a small palette and compiled into SVG shapes at build time, with skylines drawn from the Copernicus elevation model and geographic data.

Pixel Sebastián follows a routine in each place based on its local time, like reading in the morning, working on his laptop during the day, and relaxing in the evening. His clothing and activities adapt to the time, season and weather, so umbrellas go up when it rains, warm layers appear in the cold, and he waves when you say hi.

Interactive elements in the scene respond when you press them. The Things to try button lists every interactive action in the current scene, with a note on the ones that only happen at certain hours, seasons or weather. Travel lets you switch between sceneries around the world or roll the die for a random destination. Settings lets you preview different times of day, seasons and weather, or adjust motion preferences.

If you have a suggestion for a new place, or something isn’t right in one of the current ones, let me know.

The sky

Every place on Earth reflects its real-time astronomical sky and time zone. The sun’s position is computed using NOAA solar equations, the Moon shows its actual phase and tilt, and over 500 stars from the Yale Bright Star Catalogue appear based on local sidereal time. On the Moon, the Sun slowly traverses a black sky while the Earth hangs overhead.

On clear dark nights, shooting stars peak during real meteor showers, and auroras appear in high-latitude skies.

The weather

The weather is live. Every half hour, the site queries Open-Meteo (CC BY 4.0) for local cloud cover, rain, snow and fog, smoothly interpolating conditions and dimming the scene when overcast.

If live forecasts are unavailable, or when a custom season is picked in Settings, historical climate normals determine typical weather for that month. These draw from national meteorological agencies including INUMET, MeteoSwiss, NOAA, the Japan Meteorological Agency, MET Norway, and the UK Met Office.

How it’s built

The site is built with Astro 7 and TypeScript, with plain CSS and no framework running in the browser, so each page is static HTML with a few small scripts. It scores 100 across all four Lighthouse categories, loads nothing from external origins, and uses a strict Content Security Policy.

The site was created with the help of AI coding assistants. Every change passes type checks, linting, unit tests, and Playwright end-to-end tests across desktop and mobile viewports.

Accessibility

Settings provides three levels of motion. Full moves everything, Calm keeps only slow transitions and holds characters still, and Still stops all motion. If your device requests reduced motion, the page starts in Still. A pause button stops animation at once, and preferences are remembered in your browser. The entire site is navigable by keyboard and meets WCAG 2.2 AA contrast requirements in both light and dark themes. If something doesn’t work for you, please get in touch.

Fonts

The text is set in Figtree, by Erik Kennedy, and the small pixel labels in Departure Mono, by Helena Zhang. Both are licensed under the SIL Open Font License.