One material, many shapes

Every portfolio makes an argument. Most make it in words: I am versatile, I care about detail, I ship. I wanted mine to make the argument physically. So the whole site runs on one WebGL canvas holding a single field of 15,000 particles, and everything you see — my name, a browser window, a dashboard, a lattice, a heartbeat — is that same field, reshaped.

One material, many shapes. That is the job description of a designer-developer, made visible.

The constraint came first

The particle field was not a decoration I added at the end. It was the first decision, and it constrained everything after it.

A single persistent canvas means:

• No per-page hero images to art-direct. The field is the hero, everywhere.
• Transitions become physical. Navigating to a case study detonates the field; scrolling reassembles it stage by stage.
• The color system stays brutal and small: near-black, bone white, one yellow. Particles carry the accent, so the UI almost never has to.

Constraints like this are uncomfortable in exactly the right way. Every time I wanted to cheat — drop in a video, a static render, a stock 3D scene — the system said no, and the site got more coherent because of it.

Shapes are just target arrays

Under the hood there is no scene graph, no meshes, no physics library. A shape is a Float32Array of target positions, and the engine's only real job is moving every particle toward its target with a bit of noise and a nice ease.

// A "shape" is nothing more than where each particle wants to be.
const cloud: Cloud = shapeCloud("dashboard", engine.count);
engine.morph(cloud, { duration: 1.1 });

The samplers that generate those arrays are where the craft lives. Text is rasterized to an offscreen canvas and sampled where the ink is. The browser window, the lattice, the heart — each is a few dozen lines of parametric math. When people ask what 3D software the site uses, the honest answer is: a for-loop.

The cheapest way to make something feel alive is not more geometry. It is one system that never stops moving, reused everywhere.

What it buys you

The practical wins surprised me more than the aesthetic ones:

1. 01Performance budget stays fixed. One canvas, one draw call per frame, whether you are on the homepage or deep in a case study.
2. 02Identity survives every page. There is no "template page" that feels off-brand, because the brand is the material, not the layout.
3. 03Motion has a grammar. Dim, scatter, morph, detonate — four verbs cover every transition on the site. New pages inherit the language for free.

The lesson generalizes past portfolios. Whatever you are building, find the one material — a data model, a component, a metaphor — that everything else can be forged from. Then defend it.