UI Reference Base

Interface details, built as reusable parts.

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.

References
—
Built with
HTML & CSS
Shared code
None

Reference 01 / 01

Hover to play · drag to scroll · ← →

Aesthetic 01
2026 · 09

Drawn gradients

Gradient 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 demo
Card 02
2026 · 09

Detail reveal card

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.

Open demo