Creative Web Interaction References
A shelf of playful web artifacts worth studying for interaction vocabulary: embodied game controls, music-as-input games, multiplayer coding rooms, kerning games, themed terminal surfaces, personal maps, digital galleries, self-organizing inboxes, and scale-education interfaces.
Why This Matters
These bookmarks are not one tool. They are clusters of creative web interaction patterns. The reusable value is vocabulary: agents need names and examples for "physical load as input cost", "music input as game control", "multiplayer vibecoding room", "typography calibration game", "design/code tear reveal", "personalized terminal skin", "personal-site map", "collaborative digital gallery", "self-organizing inbox", and "scale-education scroller" before they can design anything in that family without producing generic UI. Source: X/@jonaasw1, 2026-06-25; Source: X/@jonaasw1, 2026-06-22; Source: X/@taziku_co, 2026-04-01; Source: X/@mattrothenberg and local video contact sheet, 2026-07-03
References
| Reference | Pattern | Why Save It |
|---|---|---|
| Dumbbell Tetris demo | Physical load as game-input cost | A webcam/body-tracking Tetris demo maps weighted hand movement and body pose to rotate/drop controls. The useful design idea is not generic "fitness gamification"; it converts the cost of controlling the game into muscle load so play and training can coexist. Source: X/@taziku_co, 2026-04-01; local video contact sheet, 2026-07-02 |
| Design/code tear reveal | Cursor-controlled split hero | A pointer-controlled vertical seam tears between a code panel and a rendered issue-creation UI with blue/orange light bleed. Save as a component-library hero reference: the interaction explains "source and result" in one surface instead of using a static split layout. Source: X/@mattrothenberg, 2026-04-09; local video contact sheet, 2026-07-03 |
| Strum Surfer | Guitar minigames and music visualizers | Physical instrument input becomes game control: Snake, fruit slicing, Tetris, Space Invaders, painting, pond ripples, and other music-reactive toys. Source: Strum Surfer, checked 2026-06-30 |
| Jam | Multiplayer Claude Code in the browser | A cloud sandbox where someone starts a project, shares a link, and builds with others using Claude Code, GitHub, and live previews. Source: Jam, checked 2026-06-30 |
| kern.me | Kerning game and typography visualizer | Teaches optical spacing with a large type canvas, per-letter offset annotations, particles, and toggles for optical kerning. Source: kern.me, checked 2026-06-30 |
| Cute Ghostty | Branded terminal fork | A themed Ghostty build proves terminal UX can carry a strong visual identity without changing the underlying terminal concept. Latest GitHub release checked: v0.3, published 2026-03-03. Source: Cute Ghostty; GitHub amywork777/CuteGhostty, 2026-06-30 |
| Midlife Engineering | Sound therapy interface | Hardware-sampler metaphor for focus/rest sound therapy, with knobs, pads, icon controls, and a music-device visual shell. Source: Midlife Engineering, checked 2026-06-30 |
| Portal | Collaborative digital gallery | A browseable "garden of human creativity" with live viewer count, gallery/uncovered/curate modes, and a loose wall of books, posters, drawings, records, and prints. Save as a curation-space reference rather than a museum clone. Source: Portal, checked 2026-07-02; local screenshot |
| aileenland | Personal digital-home map | A personal site as explorable territory: dotted canvas, labels, stamps, miniature objects, side navigation icons, and location names like "the kumquatery", "fruit garden", and "the Map". Useful for identity-rich portfolios and personal knowledge homes. Source: aileenland, checked 2026-07-02; local screenshot |
| Ryan Stephen | Interface experiment portfolio | Product-designer/prototyper portfolio for digital, spatial, and fluid interface experiments. Use as an experiment index pattern, not a generic portfolio template. Source: Ryan Stephen site, checked 2026-07-02 |
| Feather | Self-organizing inbox | The enriched page text exposes a stack of document/email-like objects and inbox automation positioning. Keep as a self-organizing information-surface reference until a deeper source pass is warranted. Source: Feather, checked 2026-07-02 |
| Size of Life | Scale-education scroller | Neal.fun turns biological scale into a horizontal comparison surface with illustrated organisms, exact measurement affordances, and contextual fact panels. Save as a reference for educational scale/proportion interfaces. Source: Neal.fun Size of Life, checked 2026-07-02; local screenshot |
Use Rules
- Treat these as interaction references, not copy sources.
- Extract the control metaphor first: instrument, cloud sandbox, kerning ruler, terminal skin, hardware sampler.
- For embodied interfaces, name the cost model first: what effort, precision, fatigue, or timing is the interaction intentionally charging?
- Then decide whether the product actually earns that metaphor. A functional app should stay quieter unless the domain benefits from play.
- For agent-authored UI, feed these pages into Design Effects and Motion Sources and Animation Vocabulary (Animations.dev) as taste examples before asking for implementation.
Versioning
These are hosted creative web references, not package-backed dependencies. Version authority is the live URL/media snapshot checked on 2026-07-03. Cute Ghostty is the only linked source in the original pt. 10 cluster with a GitHub release surface; it was checked at amywork777/CuteGhostty HEAD 7759ac3b5e23644d8ab53589e541c5669b567a33 and latest release v0.3. Source: GitHub API, 2026-06-30
Timeline
- 2026-07-03 | Added Matt Rothenberg's cursor-controlled design/code tear demo as a component-library hero reference. The reviewed video shows a vertical blue/orange seam sliding between code and a rendered issue form, making it useful for "source/result" product storytelling rather than a package dependency. Source: X/@mattrothenberg, 2026-04-09; Source: local video contact sheet, 2026-07-03
- 2026-07-02 | Added Taziku/measure_plan's dumbbell Tetris demo as an embodied-interaction reference: the durable concept is physical load as game-input cost. Added Jonas pt. 9 as a second source shelf covering Portal, aileenland, Ryan Stephen, Feather, and Neal.fun Size of Life. Source: X/@taziku_co, 2026-04-01; Source: X/@jonaasw1, 2026-06-22
- 2026-06-30 | Created from Jonas's "cool internet things pt. 10" bookmark after reviewing the enriched resolved links and three local screenshots. Decision: promote as a design reference shelf rather than five separate first-class tool pages. Source: X/@jonaasw1, 2026-06-25