UI Patterns

Every pattern, three ways

All patterns

1. 1Windowed schedule gridRows of resources against a fixed time window, where each block is sized by its overlap with the window rather than by its own duration.Data displayAug 11, 2026
2. 2Benchmark progress barPlaces a raw figure on a scale of external benchmarks instead of printing it plain.Data displayAug 11, 2026
3. 3Cross-highlight matrixA two-axis lookup table with both headers sticky, hover lighting the full row and column at once, and a durable click-to-pin selection for touch.Data displayAug 11, 2026
4. 4Left-truncating pathsShortens a long path by dropping whole segments from the left, because the tail is what tells two paths apart.Data displayAug 11, 2026
5. 5Shape-mark sequenceUpdated A sequence compressed into a row of small marks whose shape carries the state.Data displayAug 21, 2026
6. 6Linked month barsA month-by-month volume timeline built from plain divs where every aggregate row links to the filtered view that produced it.Data displayAug 21, 2026
7. 7Glass vial meterA vertical potion-vial meter whose liquid fills a wide bulb first and then rises into a narrow neck — all CSS, no images.Data displayAug 21, 2026
8. 8Partitioned stage barProgress for work with several possible endings, drawn as a census rather than a fraction.Data displaySep 12, 2026
9. 9Term-by-term derivationA computed figure shown with the audit trail behind it — the number is the product and the derivation is the receipt.Data displaySep 12, 2026
10. 10Plan preview treeUpdated A dry run shown as a before-and-after tree with counts now, after, and the difference.Data displaySep 12, 2026
11. 11Uniform slot shellOne card shell many independent sources render through, where the shell does the capping.Data displaySep 12, 2026
12. 12Object-shaped cardsUpdated Where a record stands for a physical thing, the card is drawn as that thing — nine variations in pure gradients.LayoutAug 11, 2026
13. 13Adaptive tile mosaicA container with no artwork draws one from up to four member tiles, grid tracks following tile count.LayoutAug 11, 2026
14. 14Ground-scrimmed artworkUpdated Text printed over unreviewed artwork, scrimmed to an alpha that can be written down rather than guessed.LayoutAug 11, 2026
15. 15Hairline stat stripUpdated Stat tiles joined by hairlines that are grid gap, not borders.LayoutAug 21, 2026
16. 16Annotated transcriptConversation bubbles with a speaker-colored spine and a fixed metadata gutter.LayoutAug 21, 2026
17. 17Cork notice boardPinned paper notes on a cork board where every texture is layered CSS gradients.LayoutAug 21, 2026
18. 18Hotspot marker layerUpdated Markers at percentage coordinates over a fixed-aspect picture, turning into a list when too narrow.LayoutSep 12, 2026
19. 19Line-art empty statesInline drawings for empty surfaces stroked in the inherited text colour.LayoutSep 12, 2026
20. 20Column-flow wallCards flowing down columns instead of across rows, with the reading-order cost stated plainly.LayoutSep 12, 2026
21. 21Scroll edge shadowsAn inset shadow shown only on the edge that has more content behind it.InteractionAug 11, 2026
22. 22Frozen-batch deckA one-card-at-a-time review queue whose batch is snapshotted at mount.InteractionAug 11, 2026
23. 23Controls beside the anchorUpdated Per-card controls over a fully-linked card without nesting interactive elements in the anchor.InteractionAug 11, 2026
24. 24Pluggable canvas visualizerUpdated One canvas, a registry of draw modes, each mode owning its entire frame.InteractionAug 11, 2026
25. 25Roving-grid boardUpdated A dense grid of state cells that is one tab stop with arrow-key navigation.InteractionAug 21, 2026
26. 26Section railSticky vertical rail on wide screens, wrapping tab row on narrow ones, from the same markup.InteractionAug 21, 2026
27. 27Ledge-press buttonsButtons on a solid ledge shadow that travel down onto it when pressed.InteractionAug 21, 2026
28. 28Guarded controlUpdated A blocked control stays focusable, carries the reason as text, and refuses in its handler.InteractionSep 12, 2026
29. 29Polled job cardUpdated One card for every state a background job passes through.InteractionSep 12, 2026
30. 30Entry-transform motionFLIP-style motion between two rendered states when the old DOM is already gone.InteractionSep 12, 2026
31. 31Slot-first pickerUpdated Assignment that starts at the destination slot, then narrows the catalogue.InteractionSep 12, 2026
32. 32Undo toastA destructive action with no confirm dialog, held behind a toast and committed when it expires.FormsAug 28, 2026
33. 33Blast-radius confirmNew A confirm dialog that names everything a delete cascades and blocks dismissal while it runs.FormsSep 28, 2026
34. 34Batch action barUpdated A bar that exists only while something is selected, states the count in words, caps at five actions.FormsAug 28, 2026
35. 35Filtered to zeroThe three empty states a list actually has, written as three different screens.FormsSep 12, 2026
36. 36Parsed query chipsA search box that echoes back how it read the text as removable chips.FormsSep 12, 2026
37. 37Compound-value pickerOne grouped select whose value carries both the kind and the id.FormsSep 12, 2026
38. 38Ground-referenced colorUpdated Colors solved against the page's own ground token so they invert correctly between themes.ColorAug 11, 2026
39. 39Single-property color variantsUpdated One custom property carries the hue; border, fill, spine and dot derive from it.ColorAug 21, 2026
40. 40Controls on an unknown fillUpdated Opaque controls, a gradient-darkened fill, and a two-tone focus ring on a surface whose colour arrives from outside.ColorSep 12, 2026