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.