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 to see it in full.
Open the Figma file8 study studies
A gradient field drawn twice from one declaration, once by a CSS stop list and 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, in six materials off a single recipe: the selected item opens into a labelled pill, search into a field, the log into a panel.
Forthcoming study
Forthcoming study