HCI Nerdz
Demos
Interactive experiments for patterns we argue for in the blog and docs. Grouped by familiar UI domains — expand a category, newest first inside. Switch Release Date / Updated to change which date sorts and shows. 17 demos live so far.
Theming & visual contracts 1 demo
Previews, diagrams, and chrome that inherit the host theme — immersion as a contract, not a preference.
-
CSS styles chain Opens a DevTools window on a real sample page. Each property is a chain of the rules that tried to set it. A second window is that page alone, for Chrome’s Styles pane. An in-page layout keeps the earlier fixed example.
Windowing & spatial UI 3 demos
Multi-window and desk layouts — lite palettes, torn-off tools, and session surfaces that stay spatially separate.
-
Agent Canvas Agent chats as movable preview cards on a desk. Status lamps, archive bin, floating chat panels, and file-to-chat links. -
Open Terminal layout desk Facsimile desk for how terminals fit real work: prompt context while you type, tabs in one window, a calling window that indexes separate sessions, a project manager next to a DevCentr grid, contained tiling zones you can spawn and delete, and session re-association. Desk mocks only — native windowing stays in open-terminal. -
Spatial web windows deskPhoto-grade desk with torn-off histogram (Document PiP) and curves remote (chromeless popup). Toggle monolith vs spatial vs mobile intent.
Inbox & attention 3 demos
Glanceable canvases and task grids that respect cognitive budget — piles, trays, and agent work as a desk.
-
plan-stack Speculative agentic wait queue — ETA-sized phase stacks, harness session columns, and live recalc/insert when estimates break. Sibling to actor-model cadence modes; product daemon in DevCentr. -
Actor-model agentic UI Linear coordinator chat, parallel task grid, and spawn tree over one node graph — cadence separation: discussion in the main thread, workers as tiles you fork for full transcript; temporal scrubber spans all modes. -
Piles Canvas email with sentiment signals — pile previews on a desk-like surface, urgency glow, vertical tab tray, grid mode.
Navigation 3 demos
Getting around products and docs — edge maps, layered routes, and step-by-step paths that deepen on demand.
-
Virtual pages Decision backbone for deep subtrees: parent steps as edge layers or a top-bar preview stack. Soft SPA routes and hard document loads share one chrome — mega-directory content without mega-page scanning. -
Context EdgeWhen suite headers stuff every product into one tab strip, you lose which world you are in. Context Edge puts that travel on thin edge rails instead — hover to expand, click for a wireframe map. Desk mock on this site; Map, Modal, and Path demos in the family below. -
Instruction flowMenu-style install guides: choose a path, see only the next clear steps, rewind and share the URL. Continuations nest under decisions instead of dumping every platform variant at once.
Feedback & trust 1 demo
Signals that say what they mean — provenance marks, severity that looks like severity, help that is not failure.
Information architecture 3 demos
How content is labeled, typed, and composed — identity vs pretty paths, peelable types, and sequence maps.
-
Broken links after a URL rename Symptom demo: flip between string-wired URLs and content hashes. Rename the pretty path and watch who breaks — or who doesn't. -
Pass-through peelMeta-suffixes like .example and .template are badges on a real type. Peel them and resolve open/icon from the stem — the way Explorer should. -
Pipeline composerTyped processing map for edge/request paths. Insert-between sockets, nested composites, and replay that surfaces apex/www redirect loops.
Settings & context 2 demos
Configuration beside the work — bound settings panes and scoped tools under one shell instead of a junk drawer.
-
Context-bound settings deskActivity UI publishes context; a dependent settings pane matches applicability and shows only bound controls. Toggle the across-town catalog to feel the storage room return. -
Scoped UX deskThree narrow tools (Projects, Environment, Remote) with feedforward previews. Toggle mega-tool mode to feel the junk drawer return.
Search & filters 1 demo
Discoverable filter surfaces instead of power-user syntax as the only door.
Selection & dialogs no demos yet
Unified pickers and open/save flows — files and folders in one place when the job is “open something.”
No demos in this domain yet — kept as a roadmap slot.