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.
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.
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 — the overlaps become mid-tones a hand-written stop list has to be tuned for.
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