Foundations
[SCAFFOLD - Baki to revise] The grid, the dot, the major ruler — what every module snaps to
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.