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.
• /interface/scroll-autoplay-video  A feed where the most-visible video plays on its own and muted, one at a time, and pauses as it scrolls away. Tap a tile for the full player, whose controls fade during playback. Muted-by-default is the only autoplay the browser allows. After the X (Twitter) timeline.
• /interface/landscape-video-player  The immersive player when the phone turns sideways: a full-bleed video with a pro-control cluster (speed, mute, real fullscreen, dock to a corner, more), a draggable scrubber, and an action rail. The chrome fades during playback; one tap brings it back. After the X (Twitter) immersive player.