The perforated sheet
How orgspirituality.org draws its home page as one perforated blotter sheet, and why the perforations are masks rather than borders.
Read the full write-up
Where it started
The home page has always been a grid of nine sections with ORG at the center. In June 2026 Tripp made the tiles touch, with no gaps, so the grid reads as a single sheet instead of nine cards. The perforation stopped being a border around each tile and became one drawing across the whole grid.
How it is drawn today
The code lives in BlotterPerforations.tsx in org-frontend. It is a decorative overlay placed as the first child of the tile grid. It never receives clicks.
It draws two kinds of line:
- Tear lines: stronger lines on every tile boundary and around the outer edge.
- Fine perforations: a grid of small tabs printed across each picture.
Each kind is two layers, one for vertical lines and one for horizontal lines. Keeping them separate is what stops the dashes from doubling up where lines cross.
Why masks
Each layer first draws solid lines with background gradients. A repeating gradient mask then cuts those lines into dashes. The comment in the code explains the choice: masking keeps the dash rhythm in screen pixels at any tile size, which a dashed pattern scaled by percentage cannot do. A phone and a wide monitor get the same dash.
Captions below the art
In October Tripp asked for the section names to move off the pictures, where they were hard to read. Renan moved each name into a caption strip under its image. Because a fine perforation line would now cross the caption text, the sheet-level overlay draws only the tear lines, and each picture gets its own TabPerforations overlay for the fine tabs.
In this AstroLog
The lists here borrow the idea, not the code: every sheet has thick, sparse dashes on its edges and between rows, drawn with repeating background gradients.