01 / CONCEPT: A ROOM THAT RESISTS POLISH
UNIT 7 is an imaginary performance room in the leftover bays of an Oslo car park. Its credibility comes from physical constraints: a sloped floor, drainage noise, ventilation, and concrete that refuses to become a neutral backdrop.
The layout treats navigation as wayfinding paint. Big words are not a headline to admire from a distance; they are material to drag through. Lines collide, a grid gives way, and the page keeps the slightly hostile useful quality of a real service corridor.
02 / SIGNATURE TECHNIQUE: CONCRETE, NOT A BACKGROUND IMAGE
The hero canvas is painted before the first interactive frame, then only redrawn while its hero is visible and the tab is active. It is capped at two device pixels and two million texture pixels. A deterministic seed builds fine grain over a separate aggregate field; trowel passes, wet stains, and broken cracks are layered afterwards.
The giant rail is an actual horizontally scrollable region. It supports native touch and trackpad scrolling, wheel conversion where there is room to move, mouse drag, and left/right/Home/End keyboard controls. The rail owns overflow; the document never does. Lower down, the test desk uses the same deterministic approach to draw a distinct impact trace for each fixture.
function seededRandom(seed) {
let value = seed;
return () => ((value = (value * 16807) % 2147483647) - 1) / 2147483646;
}
function renderConcrete() {
const bounds = concrete.getBoundingClientRect();
const area = Math.max(1, bounds.width * bounds.height);
const dpr = Math.min(window.devicePixelRatio || 1, 2,
Math.sqrt(MAX_TEXTURE_PIXELS / area));
const width = Math.max(1, Math.floor(bounds.width * dpr));
const height = Math.max(1, Math.floor(bounds.height * dpr));
concrete.width = width;
concrete.height = height;
const context = concrete.getContext('2d', { alpha: false });
const image = context.createImageData(width, height);
const random = seededRandom(701197);
const aggregate = new Uint8Array(128 * 128);
for (let cell = 0; cell < aggregate.length; cell += 1) {
aggregate[cell] = Math.floor(random() * 255);
}
for (let y = 0; y < height; y += 1) {
const coarseY = (y >> 4) & 127;
for (let x = 0; x < width; x += 1) {
const pixel = (y * width + x) * 4;
const coarse = (aggregate[coarseY * 128 + ((x >> 4) & 127)] - 128) * 0.12;
const grain = Math.floor(random() * 19) - 9 + coarse;
image.data[pixel] = 183 + grain;
image.data[pixel + 1] = 180 + grain;
image.data[pixel + 2] = 174 + grain;
image.data[pixel + 3] = 255;
}
}
context.putImageData(image, 0, 0);
}03 / PALETTE + TYPE
#B7B4AE
#4A4844
#FF4D00
#000000
04 / THREE PASSES THROUGH THE RAMP
Pass 1 — correctness
Made both oversized rails operable by mouse drag and left/right/Home/End keys; wheel conversion now releases vertical page scrolling when the hero rail has reached an end. Added 44px minimum targets to navigation, contents, and footer links, plus a two-colour focus treatment that remains visible on concrete, orange, and black.
Canvas work now starts after the DOM is ready and the next paint, is skipped while the hero is off-screen or the tab is hidden, redraws only after a coalesced resize/return to the tab, and caps texture work at 2,000,000 pixels (while retaining a maximum DPR of 2). The mobile stamp now clears the instruction, the building report becomes one readable column, and guide code blocks explicitly constrain themselves to their grid cell. No assets or third-party scripts were added; the in-app visual browser was unavailable for this pass, so layout verification was static rather than screenshot-based.
Pass 2 — design depth
Weak moment 01 / programme:
Four event rows still behaved like a polite timetable. The new 180px NOW marker asserts the section’s urgency; unequal columns, offsets, and the orange Friday interruption make each listing land as a distinct block while retaining a stable reading order.
Weak moment 02 / wayfinding:
The former 3×3 map was a safe diagram wearing brutalist colours. It is now a routed, broken plan: a hard black line cuts through independently tilted labels while RAMP bleeds under them at 180px. The orange ground finally does navigational work.
Weak moment 03 / field notes:
Both notes were near-identical floating cards. Their scale, anchor, and border logic now differ: the fan note is a narrow orange-edged interruption from the left; the drain note is a wider concrete slab entering from the right. The gap between them becomes part of the room.
Pass 3 — complexify
New moment / the test desk:
After the field notes, the page now asks visitors to strike a fan duct, drain, pillar, or ramp rail. Each control cuts to a deterministic impact trace and a specific bit of room lore. “Clear the trace” restores an intentional idle scope and no-strike readout, so the interaction has a useful edge state instead of leaving a dead panel.
Material / more than noise:
The hero texture stopped being uniform television grain. It now combines a coarse aggregate field with fine grain, faint trowel sweeps, damp bloom stains, and branched crack paths. A low-key CSS aggregate is already present beneath the canvas, so the concrete reads as material from the first paint rather than appearing late.
Finish / hard cuts, clean edges:
The test desk changes state instantly, consistent with the room’s no-transition rule. Open Graph metadata now names the invented venue and its build notes. Focus treatment covers the new buttons, canvases cap their pixel work, and the mobile desk collapses to a single column so its overflow remains internal rather than escaping the document.