lab / experiment

Pinned

Aftershock's seismograph in a small window that stays on top of everything else on your screen, so the week's earthquakes tick by while you work.

published
2026-10-30
status
wip
stack
TypeScript · React · Document Picture-in-Picture · USGS GeoJSON
livewip
notes

Off the page

Aftershock draws the week's earthquakes on the page. This piece takes the same feed out of the page. It uses Document Picture-in-Picture, the API that lets a page open a small window that floats above every other app, the way a video does, but with any HTML in it.

One React tree, two windows

The pinned window is empty when it opens. The page copies its own style sheets into it and renders the ticker there through a React portal, so the ticker is still part of this page's tree: the same state, the same poll a minute, and the same Glitch when a new quake arrives. Close the window, or this tab, and it goes away.

Where it runs

Document Picture-in-Picture runs in Chrome and Edge on a desktop, and only on a click. Everywhere else the ticker stays in the page and the button says why.