A real-time ambient ocean canvas. The sky color, sun/moon position, moon phase, and tide direction are computed from your chosen city's actual time and lunar transit — every pixel is driven by SunCalc, not pre-rendered.
Same moment, three timezones — Hangzhou pre-dawn · Tokyo sunrise (sun and moon both up) · New York dusk.
Live: tide-pixels-2026-05-06.vercel.app
Open it in a browser tab, or set it as a Mac desktop wallpaper via Plash and watch your cities' tides over the day.
| City | URL |
|---|---|
| Tokyo (default) | / |
| Osaka | /?c=osaka |
| Hangzhou 杭州 | /?c=hangzhou |
| New York | /?c=nyc |
| Reykjavík | /?c=reykjavik |
| Sydney | /?c=sydney |
Custom point: /?lat=43.06&lng=141.35&label=Sapporo&tz=Asia/Tokyo
The bottom dot row (right side on mobile) lets you switch between cities live.
- Sky color — interpolated across 10 keyframes through the day (deep night → dawn → noon → dusk), in the city's local timezone.
- Sun & moon position —
SunCalc.getPosition+getMoonPosition. Mapped from azimuth/altitude onto the canvas, hidden when below the horizon. - Moon phase —
SunCalc.getMoonIllumination. Drawn as a half-disc + terminator ellipse, waxing right-lit / waning left-lit. - Tide — approximated from the moon's upper/lower transit times (rise/set midpoint), interpolated as a
coswave between two consecutive peaks. Polar-region fallback uses a simple semi-diurnal sine. - Stars & meteors — 60 deterministic stars seeded from a fixed RNG (so the field is stable across reloads). Fade in as
sun.altitudedrops below the horizon. A meteor spawns every 30–90 seconds during full night, fades in/out over ~1.2 s.
The art-piece label at the bottom-right says it: "Tides estimated from lunar transit times — artistic approximation, not measured data."
- Next.js 16 (App Router, server components for
searchParams) - Tailwind v4
- Cormorant Garamond + Geist Mono (
next/font/google) suncalc- Plain Canvas 2D + RAF — no external animation library
pnpm install
pnpm devOpen http://localhost:3000.
pnpm build # production build- Install Plash (free, Mac App Store).
- Plash menu bar →
Add Website…→ paste a city URL above. - Keep
Browsing Modeoff — Tide Pixels has no required interaction; switching cities happens via Plash's website list.
For multi-display: assign different cities per monitor (Tokyo on one, NYC on another) — the dusk/dawn contrast across timezones makes the screen feel alive.
- Sky Traffic — live aircraft trails over your city's airspace
- Bay Ships — ship lanes through major harbors (procedural demo)
- Subway Pulse — Tokyo metro lines as Beck-style abstract diagram (procedural demo)
- Quake Globe — live global earthquakes from USGS as ringing light pulses
MIT — do whatever you want, but if you ship a paid product literally cloned from this, at least drop a thank-you somewhere.