test.noahglynn.com

Interface demos

Working demos of web interface interaction patterns, observed in real products and sites and rebuilt minimal and live to feel. Each is a research stub: one mechanism, with a working reimplementation you can operate.

• /interface/hover-reveal-image  A text index of names where hovering a name reveals that work in a fixed pane. Keyboard and pointer both drive it; toggle the instant cut against a soft crossfade. After Night Gallery's artists index.
• /interface/hover-disclosure  A ledger of figures where hovering or focusing a row opens a popover with the breakdown behind the number. After electionbettingodds.com.
• /interface/auto-advancing-gallery  A gallery that advances on a timer with a filling progress underline, pauses on hover or focus, and keeps manual controls. After scissor.cloud.
• /interface/density-control  One slider, two mechanisms: density that reflows the grid so the column count changes, versus density that only scales a frozen layout. Watch the columns. After Spotify.
• /interface/scroll-vitrine  A horizontal shelf that runs off the edge on purpose. Wheel, drag, or keyboard glide it, with a position bar and snap. After books.omarmhmmd.com.
• /interface/book-spine-3d  A shelf of CSS 3D books whose spine thickness is computed from each book's page count; hover lifts and turns one to show cover and spine. After libra.re.