The page you are reading, read differently.
Every element on this page becomes one thread, woven into a sculpture. What you can read, the paragraphs, headings and code, makes the fat shards, and they are the only thing drawn in signal orange. The scaffolding around it makes thinner strands in ink and grey, scripts and stylesheets wrap around the structure, and every absolute URL in the source leaves it as a long line. Play it and it starts crawling: it follows a random link from the page it is showing and weaves that page instead. There is no going back.
Switch the palette to random for a fresh hue on every page, rolled again each time you press it.
The reading
javascript·istos.js
// breadth first, one level of the tree at a time
let level = [document.documentElement];
while (level.length) {
for (const el of level) tags.push(el.tagName.toLowerCase());
level = level.flatMap((el) => [...el.children]);
}
// each tag is swept along a spline walked through two opposing flow fields
const kinds = {
content: { size: 0.3, profile: "shard" }, // p, h1–h6, code, li, img, svg
scaffolding: { size: 0.042, profile: "bar" }, // div, span, nav, a, article
external: { size: 0.025, profile: "loop" }, // script, link
header: { size: 0.02, profile: "triangle" }, // html, head, meta, title, body
outward: { size: 0.028, profile: "escape" }, // every URL in the source
};
The sweep
javascript·istos.js
// parallel transport frames carry a profile along the path without twisting it
for (const [r, p] of points.entries()) {
const t = r / (points.length - 1);
const size = base * envelope(t); // thick in the middle, or at both ends
const tilt = t * (PI / 2) * random(-1, 1); // the far edge leans along the path
ring(p, N[r], B[r], T[r], rect(size, tilt), mix(from, to, t));
}
References
