Foundations

How the grid works

The substrate has two grids: a 32-pixel paper-texture dot grid and a 256-pixel major ruler grid. Frame bracket corners land on the dot grid - any 32-multiple intersection. snapUp() rounds frame dimensions up to the nearest 32 - the tightest-possible fit to content, so bottoms land immediately below content with no padding. MAJOR_MAGNET = 32 means a 32-snapped edge only bumps to the next major if it’s naturally within 32px of one already; wider magnets produce visible empty space inside frames (content ends, frame continues, brackets float below).

Adjacent frames stack with MODULE_GAP_Y = 0 so cumulative y positions stay on the dot grid. The 18px canvas-frame padding on each side gives 36px of visible breathing between adjacent content areas. A non-zero gap would drift positions off the dot grid and float brackets into empty space.

Two columns flow from world origin (0, 0):

• Text column - 2 majors wide (512px). Header, pullquote, metrics, cards, longform, demo, media, and widget:* frames stack vertically here. Echoes is the exception - it sits at 1 major (256px) as a single-column narrow strip.
• Right column - 5 majors wide (1280px). Scene, gallery, process, and (for talks) launch stack here, separated by a gutter.

scatterModules() in src/lib/world-layout.ts assigns (x, y, w, h) per frame. Heights come from MODULE_HEIGHTS but MeasuredFrame grows any frame to fit its content, so declared heights are lower bounds, not caps. Frontmatter module_positions can override any field on any frame.