Interface Studies
One component per study, built in Figma and code, small enough to stay legible. Hover a card to run it in place, take a quick look at its variants, or open the study for the decisions and techniques behind it.
Study Studies 01 / 01
A gradient field drawn twice from one declaration — once by a CSS stop list, once by a WebGL shader — so the two agree by construction. Every fragment’s luminance is clamped into a declared band, which is what puts a guaranteed contrast ratio under the type.
A UI sound palette written as a token block: four sounds declared as a tuning, a voice, a strike and a room, then synthesised from those numbers rather than played from files — the reverb included. It ships silent, and draws everything it says.
Seven tiles that each declare the room they want, on a grid that clamps every span against its own column count. Each tile answers for the slot it lands in rather than for the modifier it was given — and opening one re-packs the board around it.
An artwork plate and a caption plate with their facing corners cut, over a crop-marked dot grid. The line drawing inks itself on load in pure CSS — every path declares a length of 1, so one keyframe pair draws all of them without measuring any.
A poster card whose dot field works out its own shape. Every dot carries nothing but its grid coordinate; CSS derives whether it belongs to the pattern, which of two tones it takes, and where it sits in the pulse travelling through the field.
Gradient fields made by drawing a few overlapping SVG shapes in flat colour and blurring them past recognition. A stepped silhouette then puts the fill inside a block of type, its treads landing on the same lines.
A detail panel that rises from the bottom edge on hover, pushing the resting label up ahead of it. Takes any content; a map variant adds contour rings and a pulsing pin.
One glass surface that changes shape — the selected item opens into a labelled pill, search into a field, the log into a panel — in six materials off a single recipe.
Forthcoming study
Forthcoming study
Forthcoming study