Reflow
One column of text that runs across real browser windows. Open another with split, drag them around, and the words reflow in reading order, left to right.
- published
- 2026-10-30
- status
- wip
- stack
- TypeScript · React · window.open
https://goksen.ing/lab/reflow
Windows as the page
A layout usually lives inside one window. Here the windows are the layout. The text is the opening of Edwin A. Abbott's Flatland (1884), told by a square who can't see past his plane. It doesn't fit in this page's pane, so split opens another window and the text goes on there. Drag a window to the left of another and it reads first. Make one narrower and every window after it reflows.
One tree, many windows
Each new window is a blank window.open from this page, so it shares this page's origin and this page can write into it. The page copies its style sheets in and renders each pane there through a React portal. One React tree lays out the whole text. Five times a second it reads every window's screenX, screenY and inner size, sorts them into reading order, and flows the words through them.
Bjørn Staal shared one 3D scene across windows in 2023. This piece does the same with a column of type.
Where it runs
It needs a desktop browser that allows this site to open windows: the first split may ask you to allow pop-ups. On phones, where windows don't sit side by side, the text stays in the page. Closing this tab closes its windows.