Threshold Globe
The animated backdrop on Cloudflare's login page isn't a flat pixel world map — it's a low-resolution 3D globe, rotated with real orthographic map projection math and rendered as a dithered grid of tiny squares. Reverse-engineered from the shipped bundle.
How it works
1. Project a real globe, but at almost no resolution. The component draws the world (a world-110m TopoJSON) with d3.geoOrthographic() — an actual rotating-sphere projection, not a flat map — but onto an offscreen canvas sized at width / cellSize. At a 6px cell, a 700px-wide globe is projected onto a canvas roughly 117px wide.
2. Read the tiny render back as land/ocean. Fill the projected landmass white, then read the offscreen canvas's ImageData. Each of those ~117×66 pixels becomes one cell's land coverage — its alpha channel, 0 for ocean, up to 1 for land.
3. Give every cell a fixed, position-only "difficulty". A classic single-line pseudo-random hash — seeded only by the cell's x, y, never by time — assigns each cell a fixed number in [0, 1). This is what makes some cells twinkle readily and others almost never: it's baked into their position, not re-rolled per frame.
4. Sweep a slow threshold wave over the grid. A cell is drawn only when its fixed hash falls under a threshold — and that threshold isn't constant. It's the sum of two sine waves running at different speeds along x and y, plus a floor that's much higher over land than ocean. As the wave rises and falls, it crosses different cells' hash values — that's the shimmer, with zero per-dot state to track.
5. Throttle hard, rotate slow, respect the OS setting. The whole thing redraws at roughly 9fps by default, not 60 — that chunkiness is deliberate, not a performance ceiling. Longitude advances linearly for a full rotation every 30 seconds. If prefers-reduced-motion is set, it renders exactly one frame and never schedules another.
function hash(x, y) {
const n = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
return n - Math.floor(n);
}
function threshold(cx, cy, t, landAlpha) {
const wave = (Math.sin(cx * 0.27 + t * 2e-4)
+ Math.sin(cy * 0.19 - t * 1.5e-4) + 2) / 4;
return 0.05 + landAlpha * (0.42 + wave * 0.28);
}
// draw the cell only if hash(cx, cy) <= threshold(...)