The portfolio is the product
// "I BUILD WHAT I DESIGN" IS A CLAIM. A CLAIM NEEDS A SHIPPED ARTIFACT. THIS SITE IS IT.
There's no demo embed on this one. You're inside it. Things worth trying:
- P toggles PATCH / READ · the same content, two renderings
- DRAG any node by its header · the cables follow
- TAB opens operator search in patch mode · ⌘K works anywhere
- BG CHAIN right here on this page · noise, dither and palette for the whole site
- HOME INDEX select a project · the signal pulses index → post_fx → viewer, and hovering dims the cycle_clock
- TAP ▸ OPS in the top bar · operator search without a keyboard, every node on the site
- TAP a row in the work index · first tap previews it in the viewer, second tap opens
- BG CHAIN right here on this page · tap the chips, drag the sliders, the whole site re-cooks
- TOUCH paints the dither field · FDBK sets how long the trail burns
- PATCH MODE is the desktop instrument · on a big screen this page becomes a draggable node network
One grammar, everywhere
Every block on this site is an operator. The chip in its header says what it holds. PATCH lays them out as a network. READ stacks the same content as a document.
Two colours, one comparison
The background is a grid of cells. On every cook each cell gets a level from the noise. The level is mixed with what the cell held last time (78% old and 22% new by default), so the pointer leaves a trail.
| 0.125 | 0.625 |
| 0.875 | 0.375 |
BAYER2, the default. Each cell is compared with one of these four numbers. Above it, the cell lights. More than 0.55 above it, the cell lights in the bright colour.
The field is drawn into a buffer at one pixel per cell and scaled up once. The gaps between cells are cut out with one pattern fill. These two views follow the bg chain above.
- 3pxper cell by default
- 1 in 2frames cook, 1 in 4 while scrolling
- 140,000cells at most
The cables are real
The wires aren't decoration. Each link is a subscription on a small vanilla-JS message bus. On the homepage the work index emits a selection, a post_fx node transforms it in transit (that's the INVERT chip), and the viewer renders whatever arrives. Every delivery sends a pulse down the cable that carried it. What you see drawn is what actually ran.
The same runtime owns every timer, listener and observer behind a page, and tears them all down between navigations. Even the homepage's auto-cycle is a visible node: a cycle_clock operator ticks the index, and hovering the index dims it.
Three animations, one clock
A page change has three parts. The new page wipes in, the old one dims, and a front crosses the dither. They used to run on their own timers and drift apart on a busy frame.
Now the two CSS animations stay paused and one loop moves all three by hand. A late frame moves the clock 34ms at most, so a slow browser plays the start slowly. It never skips it.
// FRAME_CAP is 34ms. MS is 580ms.
var t = now();
el += Math.min(FRAME_CAP, t - last); last = t;
nav.f = Math.min(1, el / MS);
find().forEach((a) => {
a.currentTime = nav.f * MS;
});The click answers first
A click used to do nothing for up to a second. The animation was waiting for the next page. Lighthouse scored it 97, because Lighthouse never clicks a link.
Heat now holds at the click. The next page and its stylesheets are fetched on hover. Every link ends in a slash, because GitHub Pages answers /about with a redirect first.
- Home page HTML
55KB16KB - Nav click to start, 300ms latency
380ms79ms - Redirects per new page
10
Next on the bench: container operators, one lazy-boot path for every embedded demo, and a signal monitor that live-prints the message bus. You'll be able to watch this site think.
NEXT · FASTthe research platform behind the engine