AXI-019 · Exploration · shipped 2026-10-16

Images on the grid

Every block the system has drawn so far was a colour it chose. A photograph is a block whose colour it did not choose — a field of someone else's light — and the client site has a hundred and sixty-seven of them. This study gives an image nothing an ordinary block does not have: a span, a count of rows, a plane, a shadow. The crop is the score and is read back per edition; a glass pane brings a photograph toward the palette by the ledger's own multiply; a photograph goes behind a cut window at plane −1 and is rolled by the page; a screenshot of a client project, which may not be cropped, has its letterbox counted and its own grid measured against the page's; and the live site's media is ledgered against the grid's cell to learn which photographs snap and which must be cut.

Study A · The image as a block

A photograph from the live site (a sunlit room; the client site uses it on a service page) in a block of four columns by four rows at 7×5, three by four at 5×3, three by four at 3×2 — the same image cropped three ways by the three editions, because the block is the crop window and the image fills it. The score names the focal point, --fx and --fy, as a percentage of the image; focal moves it; tone lays the engine's glass pane over the image in navy, sky or the signal, the ledger's multiply at the ledger's opacity; grids draws both grids over it. The note reads the crop back in the image's own pixels and samples its mean colour against the tokens. After the image, two rows of paper: the quiet passage the plan says every set piece must buy.

A small dining room in afternoon light: a wooden table and two ladder-back chairs before three sash windows, a pendant lamp above, a woven basket on the wall

A photograph is a block whose colour the system did not choose.

—

the quiet passage · two rows of paper · bought by the image above

focal

tone

show

measuring…

The crop is a number. The source rectangle is computed from the rendered box, the natural size and the focal point the score declared; the kept fraction is its area over the image's. The mean colour is sampled from a 48-pixel thumbnail of the image on a canvas; Δ is the distance in RGB to the nearest token, and the tone line computes the mean after the pane as the engine's glass would multiply it.edition · rows checked not to grow

Study B · Plane −1

The plan defines plane −1 as recessed texture seen through windows cut in plane 0, moving slower than scroll — the one sanctioned parallax. The torus did it with a drum; this does it with a photograph. The window is an ordinary cut block, four columns by three rows; the image behind it is taller than the window by its travel (two rows) and a view() timeline rolls it by exactly that as the window crosses the viewport. No scroll listener moves anything; the script only reads the transform back and reports the roll and the fraction of the page's speed. Scroll past it and watch the readout.

PLANE −1
BEHIND THE SHEET

A planning notebook open on a desk, a pen across the page

What shows is what the window allows; the rest is behind the sheet. The roll is in rows, because the travel is.

AXI-019
IMAGE v0.1

Speed. The image moves its travel while the window moves the viewport's height plus its own, so its speed relative to the page is travel ÷ (viewport + window) — about a tenth at L for two rows on a 900-pixel viewport, read live. Reduced motion and browsers without scroll-driven animations get the image held at half its travel, which is the plan's degradation contract: the window still shows a picture.edition

Study C · The screenshot

A screenshot of a client project — the AIPOS positioning tool, from the case study the site publishes — is the one kind of image that may not be cropped: its edges are information, the browser chrome and the ends of its lines. So it is fitted inside its block (contain) and the remainder is paper, a letterbox, counted per edition in pixels and rows. And a screenshot carries a grid of its own: the tool's columns, its panels, its slider. The instrument finds the strongest vertical edges in the rendered screenshot and measures each to the nearest line of the page's two grids inside the block — the interference census; edges marks them, grids draws the page's. Beside it, a chart from another case study, as the live site has it: a picture of numbers, which the metrics study will take up.

A browser window showing the AIPOS tool: the heading Humans + AI, What's your AI stance?, a name field, a colour picker and the first of twelve questions with a slider from strongly disagree to strongly agree

A radar chart titled Course Audit — Section Ratings, ten axes rated between 3.0 and 5.0

Two second lattices on the first: a tool's interface and a chart's axes. Neither was drawn on this grid; the census says by how much.

show

measuring…

The census. Vertical edges are found by summing the horizontal gradient of each column of the rendered screenshot on a canvas and taking the local maxima above twice the mean; each is measured to the nearest base or overlay line inside the block. An edge within two pixels of a line is counted as on it. The letterbox is the block's height less the fitted image's, in pixels and in rows of the page.edition

Study D · The inventory

The live site's media library holds a hundred and sixty-seven items; a hundred and forty-five of them are two hundred pixels or wider and are ledgered here as width and height. For each, the instrument finds the block on this edition's base grid — up to the full width and eight rows — whose aspect is nearest the image's, and records the crop that block would need. It does this twice: under the page's row, and under a row that is half a column, which the √φ ladder question upstream has been asking about since the sketchbook. The grid's cell is wide — a column is two and a half to three rows — and that ratio decides which photographs snap and which must be cut.

row	row px	cell (col ÷ row)	snap within 1%	within 5%	median crop	mean crop	most used blocks

The histogram is a composition. Five classes of aspect as bars of rows, the count written on each; the tallest bar takes six rows and the rest are scaled to it and rounded to whole rows, because a bar on this grid is a block and a block has whole rows. At S the bars lie down.edition · column — px · row — px

Interstitial · comfortable measure

What an image is, here

The system has never had a rule for images because it never needed one: every block was a colour from the tokens, and the tokens were closed under the one operation the planes allow. A photograph breaks that closure in the simplest way — it is a field of colour the palette does not contain — and the first thing this study found is that nothing else about it needs to be new. It takes a span and a count of rows like any block. It is cropped by the block, which means it is cropped by the score, which means the crop is written down per edition and can be read back as a rectangle in the image's own pixels. The ledger's multiply, which closed the palette, is also the way to bring a photograph toward it: the engine's own glass pane, laid over the image, moves its mean colour measurably closer to a token, and the instrument says which token and by how much. Plane −1, which the plan defined and the torus proved with a drum, takes a photograph without complaint.

The two harder cases are the ones where the image has a geometry of its own. A screenshot may not be cropped, so the block has to be given the rows that contain it and the remainder has to be admitted as paper; on this grid a letterbox is a block of paper, and the right score is the one that makes it a whole row or none. And a screenshot carries a second lattice — the tool's — laid over the first, which the census measures rather than pretends away: so many of its edges on the page's lines, so many between them. The inventory then asks the question the client build will have to answer: the grid's cell is wide, a column is two and a half rows, and that ratio decides which of a hundred and forty-five images snap to a block and which must lose a tenth of themselves to the crop. Under a half-column row the answer changes, and that is a finding for the row question upstream, not for this study to settle.

The draw

seed 2225169228 · from the date ·2 · pool 191

Second study of the night; the draw is taken with the date suffixed, as the charter says. Five sentences:

1 · 135Recommendation: Astro + native modern CSS, no client framework, static output.kept: the extension is a stylesheet and a reader; the images are static files in the repository, six of them, resized by hand
2 · 78Workshop orange #E97C12 · purple #A44BE0 Tool chrome only: orange = controls & editable state, purple = AI-generated candidates awaiting curation.considered: on the client site a photograph the AI chose would be a candidate and would wear purple until a human approved it; here everything is a candidate already
3 · 154Rule of thumb: every set piece buys its intensity with the quiet passage that follows.answered as law 7: a photograph is the most intense block the system can carry, and Study A's score gives it two rows of paper after; the instrument counts the rows of quiet below every image block
4 · 98The content architecture is two layers of plain text files: blocks (what things say) and scores (how a page arranges them).answered as law 1: the image is the block (what it says: the file, the alt text) and the crop is the score (the span, the rows, the focal point) — so the same photograph is cropped three ways by three editions without the file changing
5 · 61Vertical rhythm: a fixed row unit (64px at XL) plays the role of the beat; only overlay blocks may land on the half-beat.answered in Studies C and D: an image's height is whole rows, a screenshot's letterbox is measured in rows, and the inventory is ledgered under the page's row and a half-column row — the beat decides which photographs snap

Effect. Three sentences became three laws; the plan's blocks-and-scores line, drawn for the third time this autumn, is now the chart (AXI-017), the glyph (AXI-015) and the crop (here).charter §5 · draw.js

The rules, published

argue with the numbers, not the pictures

Constant	Value	Why
the block	--c --s --r --rs on the base grid · object-fit cover · object-position --fx --fy	law 1: an image never sets its own size; the crop is the score, rescored per edition
the crop	source rect = box ÷ scale, placed by the focal point · kept = its area ÷ the image's	law 2: read from the rendered box and the natural size; a number in the DOM
contain	data-fit="contain" · remainder = paper · letterbox in px and rows	law 3: a screenshot's edges are information; the score gives it the rows that contain it
the census	column sum of \|Δx\| on a canvas · peaks > 2 × mean · nearest base or overlay line · on a line if ≤ 2 px	law 4: a screenshot is a second lattice; measure the interference instead of pretending it away
tone	.im::after · multiply · opacity .8 · navy, sky or signal	law 5: the engine's glass, the ledger's closure; the mean after the pane is computed the same way
mean colour	48 × 48 thumbnail on a canvas · nearest token by RGB distance	what the sketchbook's paper critic would read if it could read a photograph
plane −1	image = window + travel rows · view() entry 0% → exit 100% · speed = travel ÷ (viewport + window)	law 6: the one sanctioned parallax; the torus's roll with a photograph; held at half travel under reduced motion
the quiet	rows of paper below the image in its own columns, until a block	law 7: the plan's rule of thumb, counted
the inventory	145 images ≥ 200 px · best block ≤ base × 8 rows by aspect · crop = 1 − min(a, b) ÷ max(a, b) · page row and col ÷ 2	law 8: the cell's aspect decides which photographs snap
feed/score	script: data-src-rect, data-kept, data-letterbox, data-mean, data-token, data-dist, data-after, data-edges, data-quiet, data-roll, data-speed · stylesheet: the fit, the pane, the window, the roll, the labels	law 9

Findings

An image needs no new kind of block. Span, rows, plane and shadow are enough; the one thing added is a focal point in the score, and with it the same photograph is cropped three ways by the three editions and each crop is a rectangle the instrument can read back in the image's pixels. Two rules of placement followed: the image is positioned inside its block, not flowed, so a row never grows to a picture's intrinsic height (type may grow a row; a picture may not); and an image is content, not an empty field, so the slivers pass behind it as they pass behind type.
The ledger's closure extends to photographs. The engine's glass pane — multiply at .8 — moves a photograph's mean colour measurably toward a token (Study A's note gives the before and after and the nearest token each time). A site that wants its photographs to belong to the palette has an instrument for it in the stylesheet it already has.
Plane −1 takes a photograph. The window is a block, the image is taller by its travel, a view() timeline rolls it, and the speed relative to the page is travel over viewport-plus-window — about a tenth at L for two rows. Nothing in the engine changed; the torus had already proved the roll.
A screenshot is a letterbox problem and a lattice problem. It may not be cropped, so the block must be scored to the rows that contain it and the remainder admitted as paper — a whole row or none is the right score. And its own grid lands where it lands: the census counts how many of its strongest edges fall on the page's lines, and at every edition most do not.
The cell is wide, and the row decides. A column is 2.84 rows at L and 2.48 at XL, so a 3:2 photograph — the most common shape in the live library, 28 of 145 — meets no block nearer than 5.6% (4×8, 1×2, 3×6 all give 1.42) and 16:9 lands on 5×8 almost exactly; under the page's row 87 of 145 images snap within 5% at L (126 at XL, whose 64-pixel row makes a squarer cell), under a half-column row 134 do and the median crop falls from 2.7% to 1.1% (the table reads the live numbers at each edition). That is a number for the row question upstream (the √φ ladder, raised by the sketchbook), not a change this study makes.
The quiet passage can be counted. The plan's rule of thumb was taste; the instrument reads the rows of paper below every image block in its own columns, and a score can be checked for it the way the sky study checks baselines.
Feed/score holds. Eleven data attributes written; the fit, the pane, the window, the roll and the labels are stylesheet. The one thing the script does that the stylesheet cannot is read a photograph's colour and a screenshot's edges.

For the LXD fork

Score every image as a block with a focal point per edition; never let an image set its own height. The case-study pages have four images each; give each a span, rows and --fx/--fy at the three editions, and read the crops back before shipping.
Decide the row before migrating the library. Under the current row 3:2 photographs lose about 6% to the crop and 87 of 145 images snap within 5%; a half-column row snaps 134. If the row stays, standardise on the blocks the inventory names as most used (5×8, 1×2, 1×4 at L) and crop to them deliberately.
Screenshots are contained, never covered; score their blocks to the rows that hold them and let the letterbox be paper. Accept that their internal grid will not meet the page's, and keep them inside manifests or windows where a second lattice is expected.
Use the tone pane on photographs that fight the palette (the mean-colour instrument says which); navy at .8 is the house duotone, the signal pane is for one image per viewport at most.
Plane −1 is available for one hero image per page; the parallax is sanctioned, the speed is a tenth or so, and reduced motion gets a still.
The live library's 167 items (109 PNG, 37 JPEG, 13 SVG) include a 7.4 MB illustration and several duplicates; the fork should resize on import (the six images here are 110–390 KB at 1200–1600 px) and keep the inventory JSON as the migration's ledger.