01 / THE CONCEPT
Digital Patina in UI:
Interfaces That Visibly Age Through Use
Digital patina is the visible trace of an interface’s interaction history. In Fadeworn UI, React components develop material wear through real use: presses, drags, selections, typing, and scrolling change how each control looks over time.
Try the interactive specimens02 / THE DISTINCTION
A vintage look is a snapshot. Patina is a record.
Static vintage or distressed UI
Scratches, fading, and grunge are applied as a fixed visual style. The surface looks used before anyone interacts with it, and its marks do not tell you where or how it was used.
Interaction-driven digital patina
The surface changes because of actual interaction. Each control records usage and renders material-specific wear, so two interaction paths can leave different visible histories.
03 / HISTORY, NOT STATE
The current state and the history of use answer different questions.
A hover, active, selected, disabled, or loading state describes what a control is doing now. Accumulated interaction wear describes what has happened to it across many actions. When the pointer leaves a button, its hover state ends; the wear from earlier presses remains for the current session.
Fadeworn UI stores a usage count and, where location matters, positional traces or glyph-level marks. Those records drive the visible finish without replacing the control’s normal behavior, labels, or focus states.
04 / CAUSE & EFFECT
What interaction wear looks like
Button presses Paint wear
Repeated presses polish the painted steel and gradually expose the finish beneath.
Slider movement Path friction
Dragging deposits wear along the portions of the track the thumb actually crosses.
Typing and deleting Glyph abrasion
Text entry and deletion leave marks around the positions of the affected glyphs.
Scrolling Rail wear
Scroll travel builds a positional history along the scrollbar.
05 / TRY THE EXPERIMENT
Start clean. Leave a history.
The showcase opens with a curated wear preset so the effect is easy to see. Select No Wear to clear every surface, then use the controls and watch the marks build. The history lasts only for the current browser session; refreshing restores the preset.