Prompt to Layout
Pick three words and a page layout composes itself from interface components.
HowEach word maps to layout rules — density, emphasis, structure — that combine deterministically.
- REACT
- TYPESCRIPT
- CSS GRID
OSAV LAB · NOT CLIENT WORK
Experiments we build to explore what technology could become.
Not client work.Not finished products.Just ideas, prototypes and technologies we're exploring.
Pick three words and a page layout composes itself from interface components.
HowEach word maps to layout rules — density, emphasis, structure — that combine deterministically.
A toggle, a drag-to-confirm slider and a magnetic button, each tuned until it feels right.
HowEvery control is keyboard operable and announces its state to screen readers.
A field of diamonds that flows on its own and lights up toward the cursor. Regenerate grows a new pattern.
HowSize, turn and light come from a smooth noise field built from a few summed sine waves.
The OSAV wordmark built from thousands of points that move away from the cursor and settle back.
HowThe approved wordmark is rasterised off screen and sampled into points, so the shape stays exact.
Drop events in and watch a router send each one down the right lane.
HowEvents carry a type; the router reads it and picks a lane, just like a real workflow engine.
A shader study: a glass diamond bending the grid of light behind it.
HowA single fragment shader: the diamond is a signed distance field and its gradient bends the lookup behind it.