UI Reference Base
Components built in plain HTML and CSS — some iterated upon from interfaces found elsewhere, some from original designs — kept so the type, the spacing and the motion stay reusable. Hover a card to run it in place, or open one at full size.
The selected item opens into a labelled pill, search opens into a field, notifications open the bar into a panel — one glass surface changing shape, driven by the ARIA the nav already carries.
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