Interface Studies
Each study is one component, built in code and kept 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 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.
Open demoA 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.
Open demoSeven 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.
Open demoAn 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.
Open demoA 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.
Open demoGradient 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.
Open demoA 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.
Open demoOne 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.
Open demoForthcoming study
Forthcoming study
Forthcoming study