Interface Studies
Each study takes a different approach to one interface detail — a type pair, a spacing rhythm, a hover behaviour — and builds just that, in plain HTML and CSS with no framework. Hover a card to run it in place, or open it at full size.
One glass surface that changes shape — the selected item opens into a labelled pill, search into a field, activity into a panel — in five materials off a single recipe.
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 demo