Creative Web Interaction References
A shelf of playful web artifacts worth studying as complete behavioral systems: inputs and permissions, transformations, measurements, local/remote state, publication boundaries, community governance, accessibility, and failure—not appearance alone.
Why This Matters
These bookmarks are not one tool. They are clusters of creative web interaction patterns. The reusable value is vocabulary plus consequence: agents need to name the real input, transformation, measurement, output, sharing boundary, and failure mode behind “physical load as input cost,” “music input as game control,” “multiplayer coding room,” “typography calibration,” “local sensory transformation,” “governed community archive,” and “personalized terminal skin.” Otherwise an agent copies a look while dropping the interaction's reason, authority, or operability. Source: X/@jonaasw1 and complete eight-site browser replay, 2026-08-11; 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 | Calibrated instrument input becomes a game controller | The current page routes microphone or MIDI input through calibration into 15 games and visualizers. Borrow the immediate input→feedback loop and browser-local privacy promise; do not claim the audio boundary until a network trace covers microphone use, and do not hide permission/calibration/error states. Source: Strum Surfer live page and rendered replay, 2026-08-11 |
| Cuelume | Synthesized interaction cues become a small semantic feedback vocabulary | Retain the zero-file Web Audio palette as an optional implementation route, not a mandate to make the wiki noisy. Map cues to state transitions, cap repetition and volume, expose a persistent mute control, preserve complete visual/text feedback, and test browser activation, interruption, keyboard, assistive technology, performance, and long-session fatigue. Source: X 2075914817471209790, X 2077695569317802384, Danilaa1/cuelume@b879b72, 2026-08-12 |
| Jam | Multiplayer coding room over a cloud sandbox | One physical Start key makes the primary verb unmistakable, but the important system is shared authority: magic-code account, BYOK Anthropic key, E2B sandbox, InstantDB collaboration state, shared terminal visibility, and optional public previews. Retain as a candidate for disposable or deliberately shared work; never route ambient private repositories, unrelated secrets, or unreviewed participants into the room. Source: Jam live UI, privacy policy, terms, and public client inspection, 2026-08-11 |
| kern.me | Typography measurement becomes the interface | The intended state makes optical spacing visible through per-gap deltas, annotations, particle clusters, and an Off/Optical comparison instead of hiding the algorithm. Borrow “show the measurement.” The current replay's letter layer stayed empty in the browser, so the preserved X state is design evidence and the failed live state is a regression counterexample, not product-quality proof. Source: kern.me HTML, rendered browser replay, and local X image, 2026-08-11 |
| Cute Ghostty | Identity layer over an unchanged capability | A cohesive icon, palette, themes, greeting, site, and terminal surface demonstrate that tools can express personality without replacing their underlying job. The installer defaults to one config include and offers backups/uninstall, but the repository has no detected license file despite the site's “open source” claim. Keep as a reference, not an install or redistribution route. Source: Cute Ghostty site, amywork777/CuteGhostty at 7759ac3, and installer audit, 2026-08-11 |
| Midlife Engineering | Hardware-sampler metaphor for focus/rest sound | The visual control surface earns its metaphor because the object really mixes beats/tracks and records sessions. It is also a hard counterexample: the inspected DOM had 203 enabled focusable controls, 197 without usable names, plus 49 audio elements. Borrow the instrument-state clarity, never its generic focus targets or opaque audio controls. Source: Midlife Engineering live DOM, visual replay, and browser diagnostics, 2026-08-11 |
| The Night New York Won | Place-based community memory with governed contribution | The map turns citywide clips into a spatial archive, while the three-step submission path explicitly separates intake from approval and requires ownership/permission, time/place fit, a public source, and content rules. The About surface credits original creators and offers removal. Borrow map-as-retrieval only with provenance, moderation, consent, takedown, and accessible non-map retrieval. Source: live map, submission, and About states, 2026-08-11 |
| Synesthesia Engine | Inspectable cross-modal transformation | An uploaded image becomes measured color/composition features, distinct sonic profiles, and synchronized motion. The exercised path remained client-side in the browser trace. Borrow the visible mapping and the creator's “divergence, not parameter variation” lesson: preserve structurally different inputs through meaningfully different outputs and label the result as an interpretation, not truth. Source: live engine, creator article, and local network/visual replay, 2026-08-11 |
| Codex Image Maker | Local creation before optional public participation | Upload creates a local canvas with adjustable logo placement and an immediate Download path; Submit is a separate enabled action with optional identity, followed by recent/hot galleries and votes. Borrow the sequence create → inspect → save → explicitly publish → govern community, never a single generate-and-post action. Source: live create/gallery UI and local upload replay, 2026-08-11 |
| Portal | Living collection, spatial browse, and ephemeral co-presence | The current MoMA-open-collection browser offers gallery, uncovered, curate, explore, and play states. Its expressive wall is backed by literal artwork metadata, provenance and rights terms, anonymous presence, disclosed AI descriptions, and an unusually clear ephemeral-chat boundary. Borrow the living collection and map only with a keyboard/list-equivalent route; the inspected art tiles were pointer-clickable but not keyboard focusable. Source: Portal rendered UI, privacy policy, terms, and current response capture, 2026-08-11 |
| aileenland | Personal graph as explorable territory | The visual map is genuine information architecture: named places connect identity, work, friends, and narratives, while a complete literal text/link channel preserves retrieval outside the canvas. Borrow the redundant spatial and semantic representations; never publish a people graph without subject consent and explicit visibility boundaries. Source: aileenland root and map rendered replay, 2026-08-11 |
| Ryan Stephen | Experiment index with prototype/process separation | Eighteen digital, spatial, and fluid experiments retain descriptive image alternatives. The Spatial Picker detail explicitly separates the working prototype from the method, date, platform, and Blender/RealityKit implementation process. Borrow the evidence shape—artifact plus process—not a generic portfolio shell. Source: Ryan Stephen root and Spatial Picker detail, 2026-08-11 |
| Feather | Self-organizing information and action surface | Briefs, rooms, categories, table/insight views, search, and a people wiki make classification and synthesis tangible. The connected data and action envelope is much larger than the playful UI suggests: Gmail, Calendar, Drive, Docs, Sheets, Slides, and Contacts, including send/delete/edit actions and third-party AI processing. Borrow visible source-backed organization; require read-only defaults, decision traces, target-bound approval, undo/recovery, retention, and revocation before any action-capable adaptation. Source: Feather rendered UI, privacy policy, and terms, 2026-08-11 |
| Size of Life | Exact scale transformed into a navigable comparison | The preserved source state combines organisms, literal names and dimensions, contextual facts, compare controls, and a continuous horizontal scale. Borrow overview + exact unit + selected subject + comparison, not scale spectacle without literals. The current replay was blocked by Cloudflare, so the X image and primary crawl are evidence of the interaction while the preserved 403 is honest current-state proof. Source: local X image, primary crawl, and current Cloudflare response, 2026-08-11 |
| Constellation Draw | Reversible local creation before optional sharing | The primary crawl exposes connect-two-stars creation, constellation/outside-view toggles, naming, clear confirmation, a personal night-sky state, and a distinct Share surface. Borrow local compose/inspect/name/clear before share, with undo and keyboard/touch-equivalent star selection. The current rendered replay was Cloudflare-blocked, so no live interaction claim is promoted. Source: primary crawl and current Cloudflare response, 2026-08-11 |
| Knicks Mosaic | Macro/micro archive: whole image from historical fragments | Fifteen large mosaics resolve into thousands of source tiles; hover identifies a tile and click zooms it. The overview/detail transformation is real, but the inspected mosaic grid was pointer-only and exposed the tile label only on hover. Borrow the whole-to-parts relationship with tile provenance and a keyboard/touch/list detail route. Source: Knicks Mosaic rendered replay and current response capture, 2026-08-11 |
| Softle | Physics is the authoring primitive, not a post-process effect | Fabio Azevedo's video demonstrates selectable organic paths deforming, packing, colliding, and reflowing inside a resized frame. The public page currently exposes only a responsive canvas wordmark and says “coming soon”; its shipped bundle contains a custom particle/constraint/area/shape-matching solver but no editor, export, public API, source repository, or license. Track it as a high-signal interaction model—direct manipulation -> visible physical consequence -> stable vector intent—and do not recommend it as an available production tool yet. Source: X/@naso video, live page, browser replay, and current client bundle, 2026-08-12 |
| 墨 Ink / Ink Inky | Generative calligraphy becomes inspectable, replayable output | Ben Lau's hosted tool is substantially deeper than the launch post: Chinese data comes from hanzi-writer-data@2.0.1, Japanese glyph paths from bundled KanjiVG data, and the UI exposes write/trace, guide, stroke order, meaning, orientation, multiple paper surfaces, weight/wetness/speed/formality/seed, playback, and export. A live 天下 specimen produced a valid 1412×1412 H.264 MP4 and a self-contained React canvas component with embedded surface/stroke assets and deterministic timing. Recommend it as a hosted creative-authoring reference when these exports fit; do not call it open source or redistribute its runtime because no public repository or license was found. Source: X/@benlaudesign, complete runtime inspection, live browser specimen, and generated exports, 2026-08-12 |
| Contribution-graph “résumé gap” painter | A profile metric becomes a playful drawing surface—and a proof counterexample | The complete video paints, erases, and reshapes GitHub-style contribution squares into arbitrary patterns. No external product, repository, license, version, or real contribution mutation route was recovered; the only author reply resolves to another X photo. Retain the interaction signal, but never recommend it as résumé repair. Its durable lesson is epistemic: a heatmap is presentation evidence, not verified work, and career evaluation should follow signed commits, repository history, shipped artifacts, architecture, and outcomes instead. Source: X/@ggsimm, complete video and artifact-reply trace, 2026-08-12 |
Living Galleries, Personal Graphs, And Self-Organizing Information
The complete pt. 9 collection is one behavioral family, not seven unrelated bookmarks. Each source takes a collection or relationship set and makes it feel alive through space, scale, co-presence, automated grouping, or an overview/detail transformation. The metaphor is admitted only when the literal object model remains retrievable. Every adaptation must preserve:
- the entities, relationships, source revision, provenance, and rights state;
- a complete semantic list, search, or detail route alongside spatial, hover-led, canvas, or mosaic navigation;
- visible transformation state—what was grouped, merged, compared, inferred, or surfaced and from which inputs;
- separate authority for classify, summarize, nudge, edit, send, delete, and publish, with read-only defaults and target-bound approval for mutation;
- local creation and reversible clear/undo before optional sharing;
- consent and visibility rules for people or relationship graphs; and
- measured initial transfer, selected-object lazy loading, keyboard/touch parity, reduced motion, and loading/empty/error recovery.
Beauty does not waive these gates. Portal and Knicks Mosaic are strong visual references whose inspected primary objects lacked keyboard focus; Feather made self-organization legible while loading roughly 11.7 MB and requesting broad Workspace data/action authority; the two Neal.fun destinations were useful signals even though current anonymous replay hit Cloudflare verification. Keep all of those observations: pattern, counterexample, and blocked state together form the reusable design evidence. Source: X/@jonaasw1 and complete seven-site rendered/policy replay, 2026-08-11
Stateful Creative Systems And Visual Archives
Jonas's twelfth collection is one seven-destination behavioral cluster. Its value is not a shared visual style: each source demonstrates a different way to make otherwise invisible state, progress, creation, or collection structure legible. Keep the cluster consolidated here rather than producing seven shallow tool pages. Source: X/@jonaasw1, 2026-07-15; Source: complete rendered replay and preserved artifacts, 2026-08-11
| Reference | Behavioral system | What to borrow and what remains held |
|---|---|---|
| Comnyang | A desktop pixel cat maps mouse, keyboard, scrolling, reminders, Pomodoro, and supported coding-agent state into a small ambient character. | Borrow event-driven ambient status only when the same state remains available as text/control, the event and Accessibility-permission boundary is explicit, and quiet/disable behavior exists. It is a paid closed-source product with no public repository found, so this is a comparison reference rather than an install route. |
| Link Bouquet | A literal bouquet becomes a local composition surface for named links, with presets and color before Save & Share. | The metaphor is earned because the job is a curated gift. Borrow compose -> inspect -> explicitly share, including named form controls and an unavailable share action before content. No repository was found and no share was created. |
| Retrowave Road | A seeded WebGL highway exposes Play/Drive Silent, speed and world controls, exact-seed sharing, and distinct photo/record output modes. | Preserve seed, mode, viewport, version, and output settings so the state can be replayed. Keep preview, export, and share separate; pair canvas spectacle with semantic controls, keyboard operation, silent entry, and reduced motion. The hosted one-file artifact names its FABLE-SHOWCASE origin but exposes no source repository or license, so no code-reuse route is promoted. |
| Marina experiment | Pointer-responsive building silhouettes compare architecture across three countries. | Bind motion to concrete entities and comparisons, not particles by themselves. Labels, country identity, and the comparative frame remain primary. The preserved source is a video; no implementation repository was identified. |
| Paint Pomodoro | Focus/rest state progressively reveals a Met artwork and keeps timer, tasks, clues, history, and artwork information visible. | Borrow progressive reward that reveals meaning instead of filling a generic bar. It must expose progress, pause/resume/skip, attribution, and a static/reduced-motion path. The inspected v1.0.0 extension is beta/manual-install, injects on <all_urls>, requests tabs/scripting authority, and has no detected repository license; retain it as a design reference, not an install, copy, or redistribution route. |
| clipart.studio | A magazine/collage editor combines Internet Archive and Wikimedia Commons provenance with named source, canvas, page, undo/redo, download, submit, and gallery controls. | Borrow conventional editor semantics and local creation before separately moderated publication. Do not copy the observed eager IIIF request fan-out when one magazine opens: fetch the selected object/page, cancel stale work, and cache deliberately. No public repository was found. |
| ciggies.app | A dense bilingual cigarette archive puts 3,258 product images first while retaining search, filters, sort, brands, product detail, community, feed, and chat. | Borrow imagery-led scanning only with literal schema, retrieval controls, detail, provenance/rights, and a read-only path before identity/community. No authoritative public repository or rights statement was found, so the source remains a visual-archive reference rather than a data or community dependency. |
Information Exploration References
Jonas's thirteenth collection is useful as one five-way comparison because each site starts with a different data shape and chooses a different interaction metaphor. Do not collapse them into a generic moodboard or five tool pages. Source: X/@jonaasw1, 2026-07-20; Source: local four-image review, 2026-08-11
| Reference | Data shape and primary job | Control and representation pattern | What to borrow |
|---|---|---|---|
| Natural Selection | Many normalized products; browse or find an object | Sparse object grid plus open search, category facets, sort, price range, curators, and item detail | Let a large collection stay visually dominant while compact controls explain how to narrow it. The live page exposed 90+ named products and a deep-search entry point when checked. Source: Natural Selection, checked 2026-08-11 |
| Humanity's Last Machine — Humanoid Landscape | Comparable robots with a shared technical schema | Persistent entity picker, large selected specimen, summary metrics, then grouped specification sections | Keep comparisons meaningful by normalizing attributes before styling the atlas. The live page separates mass, height, speed, degrees of freedom, hardware, sensors, software, manufacturing, and authorship. Source: Humanity's Last Machine, checked 2026-08-11 |
| Ciggie Index | City, exposure time, and air-quality result | Two inputs drive a physical cigarette-pack metaphor and an equivalent-exposure result | Translate an abstract measure into a concrete, legible consequence, but keep the literal city, hours, AQI, and equivalence available. Its public metadata describes the product as “your air quality index, but in ciggies.” Source: Ciggie Index live HTML, checked 2026-08-11 |
| sneak peek | One person's sneaker inventory | Pegboard room with shoe shelves, sale tags, lightweight navigation, sound, and an explanatory affordance | A personal collection can become a place without losing item identity. The metaphor earns play because the subject is possession and display, not because spatial shelves are universally better than a list. Source: sneak peek live metadata and local image, checked 2026-08-11 |
| Shape of Minds | People connected across many categorical dimensions | Explorable labeled graph, dimension filters and legend, selected-person detail panel, zoom, and cited sources | Use a graph only when relationships are the retrieval job. Pair the overview with filters, legible labels, detail, counts, and provenance so the graph remains an interface rather than wallpaper. Source: Shape of Minds live metadata and local image, checked 2026-08-11 |
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 an input-driven or participatory surface, capture the complete behavioral
contract before the visual style:
input + permission -> local/remote boundary -> transformation -> visible measurement/state -> output -> explicit share/publish action -> moderation/attribution/takedown -> keyboard/reduced-motion/error proof. - Exercise one reversible happy path in the rendered product. Inspect network activity when the input is sensitive, and stop before purchase, account connection, submission, vote, or publication unless that external effect was explicitly authorized.
- Before borrowing a metaphor, write down the source's entities, attributes, primary user verb, narrowing controls, overview-to-detail transition, provenance surface, and failure/empty behavior. Visual resemblance without the same information job is not a valid adaptation.
- Prefer a grid for scanning normalized items, an atlas for shared-schema comparison, a physical metaphor for consequence, a room for personal collection, and a graph for relationship retrieval only when those data and task shapes are actually present.
- 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.
- A beautiful screenshot cannot promote operability. Record named-control and keyboard behavior, reduced motion, state recovery, loading/error/empty paths, and whether the live product still reaches the captured state. Keep failures as counterexamples and acceptance tests instead of discarding the source.
- Creation and publication are separate workflow states. The exact artifact, audience, identity, moderation, attribution, retention, and takedown path must be visible before the public transition.
- For generative or stateful references, preserve a replay recipe: exact input or data revision, state/seed, implementation version, viewport, mode, and output/share boundary. A screenshot is evidence of appearance, not a reproducible state.
- Ambient characters may represent human or agent state only when that state is also legible through text/control, its event and permission sources are explicit, and the representation can remain quiet or be disabled.
- Progressive reward must expose progress and pause/resume/skip, preserve attribution, and provide a reduced-motion or static alternative.
- Editor metaphors retain conventional control names, keyboard operation, undo/redo, save/export, and a separate publish transition. Visual archives retain schema, search, filters, detail, provenance/rights, and read-only retrieval beneath the image wall.
- Opening one archive item must not eagerly load the whole source. Inspect request fan-out and require lazy loading, cancellation, bounded initial data, and deliberate caching.
- 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. The
pt. 10, pt. 12, and pt. 13 sites were checked live on 2026-08-11; public GitHub search did
not expose source repositories for the hosted applications except Cute Ghostty,
so no hidden implementation package or stack claim is promoted. Their version
authority is the captured X/media revision, content-addressed browser evidence,
and dated live-site inspection. Cute Ghostty was checked at
amywork777/CuteGhostty HEAD 7759ac3b5e23644d8ab53589e541c5669b567a33
and latest release v0.3; its missing detected license prevents install or
redistribution promotion. Source: live sites, public repository search, and
GitHub API, 2026-08-11
For pt. 12, Paint Pomodoro was inspected at exact HEAD
754364573b4ea5f4c3bd7aa4e4578c32771f064b, tag v1.0.0; its absent detected
repository license and broad extension authority keep it out of install and
reuse routing. Retrowave Road is preserved as one hosted HTML revision with a
seeded URL, but no source repository or license was found. No public repository
was identified for Comnyang, Link Bouquet, Marina's experiment,
clipart.studio, or ciggies.app. These absences are admission boundaries, not
reasons to discard their design signals. Source: exact repository archive,
rendered sites, root HTML snapshots, and public repository search, 2026-08-11
Timeline
-
2026-08-12 | Recovered and exercised the three unresolved product demos behind the résumé-gap, Ink Inky, and Softle bookmarks. Ink Inky now has a real
天下MP4 and self-contained React export specimen; Softle is retained as a physics-native authoring model but held because only its responsive landing canvas is public; the contribution-graph painter is retained as both an interaction reference and a counterexample to treating heatmaps as career proof. Source: X2083199839278444562,2084239175105024337,2086995635526345076; complete local video contact sheets; live site/runtime replay -
2026-08-12 | Deep-reviewed both Cuelume demonstrations and the current MIT repository. Retained it as an optional semantic feedback palette and promoted accessibility, opt-in, repetition, interruption, browser-policy, performance, and fatigue gates into the design system without creating another tool page. Source: X
2075914817471209790, X2077695569317802384,Danilaa1/cuelume@b879b72 -
2026-08-11 | Replayed all seven pt. 12 destinations and retained them in one consolidated owner. Added ambient-state redundancy and permission boundaries, replay recipes for stateful/generative work, controlled progressive reward, conventional editor semantics, visual-archive retrieval/provenance, and archive request-fan-out checks. Paint Pomodoro remains a reference because its beta extension has broad authority and no detected repository license; the other closed or unlicensed hosted examples remain references rather than disappearing. Source: X
2077488853401620893; seven rendered destinations; exact video, HTML, screenshot, and repository artifacts -
2026-08-11 | Replayed all eight pt. 10 destinations as live interactions instead of stopping at three screenshots and five labels. Added local/remote input boundaries, Jam's collaboration trust model, kern.me's failed current render as a retained counterexample, Cute Ghostty's license hold, Midlife's 197 unnamed controls, governed UGC intake/takedown, client-side cross-modal generation, and the local-create→explicit-publish split. Promoted one behavioral interaction contract into the design system and frontend workflow without creating eight tool pages. Source: X
2070242834985431293; eight live sites; content-addressed browser replay -
2026-08-11 | Added Jonas's pt. 13 as one information-interaction cluster, not five tools: normalized collection grid, shared-schema entity atlas, data-to-consequence metaphor, personal collection room, and relationship graph. Tightened the reuse rule so agents extract the source's object model, primary verb, controls, overview/detail transition, and provenance before adapting its style. Source: X/@jonaasw1, 2026-07-20; Source: five live sites and four local images, reviewed 2026-08-11
-
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