accessibility-pass

Vitrine

Kept under glass.

A curated collection of React components with memorable interactions. Read the source, read the prompt behind it, and copy what you need.

Browse the collection · How to use it · How it's made · Workshop · Contributing

Reactive Prose, recorded from the live component: drag a number in the sentence and everything that depends on it recalculates.

---

What is Vitrine?

A vitrine is a glass display case: you look, you don't touch. Vitrine is the one display where you're allowed to take the object.

Each component is built around one clear idea, often borrowed from a physical object (letterpress, split-flap boards, wet ink, a transit map, a patch bay) and kept useful. Every component comes with:

• a live preview with its variants,
• the real source, exactly what runs in the preview,
• the design prompt it was built from, detailed enough to rebuild or adapt it with an AI assistant,
• notes on interaction, animation, accessibility, responsiveness and touch.

There is no package, no CLI and no registry install. You copy the files into your project and they're yours.

A closer look

What's inside

458 components in 32 categories. The 50 newest carry a New label (python3 scripts/limit-new.py keeps it that way).

• Glassbreak Button: a plate of dark glass that fractures from a single impact point, pure CSS and fully choreographed.
• Silk Field: a shader background you can set type on.
• Specimen Card: a card treated as a catalogued object.
• Iris Shutter Button: an action that opens and closes like a lens.
• Prompt Composer, Thinking Trace, Cited Answer, Inline Diff: the building blocks of a polished AI interface.
• Split-Flap Text, Chrome Text, Extrude Text: type that moves with intent.
• Route Globe, Sankey Flow, Sunburst Drill, Cohort Retention: data that rewards a closer look.
• Trace 404, Forwarding 404, Underside 404: missing pages that explain where the request stopped, where the page moved, or turn over to an index.
• Insert Menu, Board View, Page Header: a calm document editor's pieces, from the / menu to drag-and-drop status boards.
• Lesson Path, Word Bank, League Table: chunky, pressable learning UI where progress always says what it means.
• Query Cell, Schema Drop, Column Profile: a hard-edged data toolkit that parses CSV and profiles columns in the browser.
• Card Wallet, Transfer Composer, Approval Inbox: precise banking flows that await real callbacks and never fake success.
• Reactive Prose, Stretchtext: text you can operate. Drag a number in a sentence and the figures that depend on it recalculate; choose how deep an article goes and the detail grows inside its sentences.
• Pairwise Ranker, Magnet Board, Allocation Faders: decisions made visible. Rank by answering "this or that?", sort by dropping quality magnets on a board, split a budget on faders that always add up.
• Sieve, Build Sheet, Gate Selector: rules you can see. Filters that show what they removed, a configurator that explains its conflicts and offers the fix, a status control shaped like the workflow it allows.
• Undo Tree, Shadow Board: history that branches instead of forgetting, and toolbar customisation where every tool keeps its painted outline.
• Line Map, Notification Dial, You Draw It: structure drawn as a transit map, a setting that shows its consequence before you commit, and a chart that asks for your guess before it shows the answer.
• Splice, Contact Sheet: choosing as the main act. Assemble one text from the best sentences of several drafts; mark ph