Interactive Globe

It is the fifth section down, well past the fold and right before the job listings. Nothing that far into a page gets attention for free.

• A photo can say global once. Something you can spin keeps saying it.
• The claim was about reach, so the section had to be the map.
• It sits just before the listings, so it has to set them up.

Stripe's globe, and Anthropic's. I borrowed the idiom openly, a sphere of points with land picked out by density and arcs between places.

• Stripe's is WebGL with real map data. Mine is a 2D canvas with no dependencies.
• Theirs sits in the background. Mine carries named cities, regions and arcs.
• I would rather say where the idea came from than pretend it was mine.

850 lines of TypeScript and a 2D canvas. There is no three.js, no WebGL, no d3 and no globe library, because nothing five sections down a marketing page justifies hundreds of kilobytes.

Forty rotated ellipses stand in for map data. Where they overlap the value is soft, so coastlines fade rather than step.

• The whole world is a few hundred bytes of parameters.
• At this dot pitch, real coastlines would read as noise.

Points are placed by the Fibonacci sphere method, which spreads them evenly. A latitude and longitude grid would crowd the poles and thin the equator.

Interpolating in sRGB dips through a muddy middle. A perceptual space keeps the ramp even, which matters when brightness is the only thing carrying depth.

Pointer velocity is sampled every frame and handed straight to the rotation on release. A flick and a nudge feel different, which is what makes it read as an object.

The animation loop cancels off-screen, and pixel ratio is capped at 2. Sitting fifth, it is out of view for most of a visit.

• A section that quietly drains a battery is a bug, however good it looks.
• Porting it here, I added the reduced-motion path it never had.

This is the production version, live on the OFM Jobs homepage since launch.