№ 04 · build notes
How a machine was taught to weave.
This page documents the site behind it: the brief it was born from, the one technique it bets everything on, and what four rounds of hostile screenshot critique found and changed.
00 · The brief
One paragraph, no images allowed.
Every site in this wave receives a fixed palette, a type pairing, one signature technique and a motion mandate: something must move on every screenful, and everything visual must be procedural — CSS, SVG or canvas. No photographs, no stock, no image files at all.
01 · The technique
A cloth is a sentence; the seed chooses the words.
Your seed is hashed into a deterministic random stream. That stream picks a layout, a field motif and a gold/delima ratio, then a motif grammar lays out ~3,000–6,000 short line segments: sisir and rantai guard the borders, pucuk rebung points inward, star flowers or rosettes fill the field. The segments are sorted the way a real loom works — bottom row first, alternating direction (boustrophedon) — and the render loop draws a few per frame with a glowing shuttle at the live stitch. Same seed, same cloth, to the thread.
This excerpt is real — the eight-point bunga bintang and the weaving order, verbatim from this site's source:
// bunga bintang — eight points on the diagonal function mStar(cx,cy,s,P,A){ newMotif(); S(cx,cy-s,cx+s,cy,P,2.1); S(cx+s,cy,cx,cy+s,P,2.1); S(cx,cy+s,cx-s,cy,P,2.1); S(cx-s,cy,cx,cy-s,P,2.1); …inner square, rays, ink knot… } // weaving order: bottom row first, boustrophedon segs.sort((a,b)=>b.r-a.r || (a.r%2 ? b.mx-a.mx : a.mx-b.mx));
Everything else hangs off that engine: the grammar cards re-trace single motifs, the session shelf refolds whole cloths into 144×180 thumbnails, and “keep this weave” re-renders your cloth at 2× into a PNG with its seed printed in the selvedge.
02 · The critique
What the screenshot passes caught.
Each pass: shoot the live page at 1440×900 and 390×844 (top, mid, bottom), read every frame like a hostile art director, fix all of it, then add one deliberate complexity upgrade.
First frame, mobile controls, naming.
The first painted frame showed an empty loom — dead on arrival, so the weave now pre-warms 12% before anyone sees it. Mobile controls wrapped mid-row into orphaned buttons; fields now stack full-width. The stat line under the cloth read as debug output; it became a named object — every cloth gets a woven name («Riak Raja», «Bunga Senja»…) from its own seed.
Upgrade: the vertical PAKAN row-counter riding the frame edge, counting weft rows like a weaver does.
Empty shelf, glare, quiet completion.
The session shelf was an empty hole before the first reweave — it gained ghost slots with a travelling sheen and an explanation of how to fill it. Finished cloth just stopped; now a slow silk shimmer sweeps a completed weave. Text riding the canvas edge got a shadow against bright thread rows.
Upgrade: Salmah's monogram — a small ink knot woven into the bottom-right of every single cloth, like a maker's mark.
The frozen counter and the blank card.
The PAKAN counter had never actually ticked — its row total was never assigned; it sat at 00/00 in every earlier screenshot and nobody confessed. Fixed. The grammar cards went fully blank for a beat at each loop reset, reading as dead panels. The shelf held three slots on a shelf claiming eight; it now shows six numbered folds. Resize left the counter stale; it refreshes.
Upgrade: a pencil-draft underlay — the full pattern is baked faintly into the silk before weaving begins, on the loom and in every card, so the machine visibly follows a drafted plan and no canvas is ever empty.
Small wraps, then a voice for the threads.
This guide's own header broke onto two ragged lines on a 390px screen — trimmed. The main page came back clean on both viewports, top to bottom, zero console errors, so the pass spent its budget on depth instead of triage.
Upgrade: the cloth now answers questions — hover any motif and beside its glowing thread path a small woven label names it: bunga bintang, pucuk rebung, sisir, rantai, and one label you will only find in the bottom-right corner.