STACKWITH.ME
Contact
Menu

Things
I built in the
browser.

These projects open in a browser tab. Explore without an account, then sign in where a project needs a saved list or shared identity. This index explains what each project does, how it is built, and which parts are working interactions or proposed capabilities.

Back to the Living Atlas

Stackime

Anime discovery & tracking

Find your next obsession. Discover anime, track what you're watching, and explore the community's shared shelf.

Open Stackime
Stackime's anime discovery page with a featured series and trending titles
stackwith.me/anime.htmlLive project

Status: working software. Browse without an account; sign in with Google to keep a list.

Read the build story

Stackime — an anime tracker with a shared shelf

Stackime combines an anime catalog with a shared watchlist. Save a title, record episodes seen, choose a viewing status and add your own score. The community catalog links to public watcher lists, so you can explore how another viewer is working through a series.

Search, discovery, artwork and title descriptions come from the AniList GraphQL API. Stackime supplies the list workflow, progress controls, community views and interface. Those are separate sources: an AniList score is not a Stackime community rating.

Supabase provides authentication and storage. Saving requires Google or email sign-in, while browsing and public lists remain available to visitors. List entries are shared through community views; signing in controls who may edit an entry, not a promise that its contents are private. Read the short walkthrough before saving your first title.

The Lab

Interactive 3D experience

Cross a frozen landscape, explore a frost chamber, and descend into its crystal gallery. An interactive browser experiment with a readable still edition.

Enter the Lab
The Lab's frozen landscape and frost chamber in its still edition
stackwith.me/lab.htmlLive project

Status: working software. Scroll-driven; falls back to readable text without JavaScript or WebGL.

Read the build story

Deep Signal — the WebGL lab

Deep Signal begins in a frozen landscape with a constructed frost chamber, then leads into a crystal gallery before returning to the surface. Its five chapters use native scrolling, optional resonance and sound, and a small local record of the visit. A still edition preserves the narrative when the scene cannot run.

The rendering code uses instanced geometry for repeated crystals and exponential damping for camera follow. Its quality controls can reduce rendering work as frame times rise; that mechanism is not a guarantee of performance on a particular device. The linked notes separate the current code from proposed improvements and explain how to check the trade-offs.

Related notes cover instanced crystal geometry, geometry and texture compression, adaptive rendering quality, and exponential damping versus a spring camera.

The Arena

Multiplayer browser game

A whole arena in a browser tab. Drop in solo, take on the bots, or bring your friends along.

Enter the Arena
The playable browser arena, with its architectural environment and game interface
stackwith.me/game.htmlLive project

Status: working software. Playable solo against bots; online squads over Supabase Realtime.

Read the build story

Signal Strike — a first-person arena in a tab

Signal Strike is a first-person shooter that loads in a browser tab: battle royale with a closing ring, team deathmatch, five weapons, a sniper scope, articulated character rigs, and ambient occlusion. You can play it alone against bots, or link up with a squad online.

The multiplayer is deliberately minimal in an unusual way — it runs entirely on Supabase Realtime's broadcast and presence primitives, with no game tables and no server-side schema at all. Peers exchange state directly over a channel. That is not how you would build a competitive shooter with anti-cheat requirements, and I say so on the page; it is how you build a working squad link for a side project without standing up authoritative servers.

All the audio is synthesised at runtime with the Web Audio API rather than shipped as files, which keeps the payload small and means the weapons can be tuned by changing numbers instead of re-rendering samples.

Written up in browser multiplayer over Supabase Realtime and synthesising game audio.

AXON

Product & interaction design

An interactive study in making complex software understandable. A product concept, brought into focus.

Open the study
The AXON product-interface study and its interactive reasoning visualization
stackwith.me/axon.htmlDesign showcase

Status: design showcase. The interface is real and interactive; the autonomous-agent service it depicts is not offered as working software.

Read the build story

AXON — an agent interface, studied

AXON started as a question I could not answer by reading product pages: if you gave an autonomous agent real authority over real systems, what would the interface have to show you before you trusted it? Most agent products answer with a chat box and a spinner. That felt like the wrong shape. An operator does not need conversation — they need to see sensing, planning, the guardrail that fired, and an audit trail they can hand to somebody else.

The interface explores four stages: input, proposal, authority check and observation. Its scripted example stops a fictional payment retry at an approval gate. Read the complete sample or play its text animation; no external tools or agent services execute.

What I learned from it is mostly about honesty as a design constraint. Once you commit to labelling every illustrative element, the interface gets harder to draw and better to read. Guardrails stop being a compliance afterthought and become the most interesting thing on screen — the moment an agent declines is more informative than the moment it succeeds.

Built with Eleventy, GSAP for the trace choreography, and Three.js for the hero. Written up in depth in building an honest product interface, guardrails are a feature, why automation needs an audit trail, and engineering sub-40ms orchestration.

What runs
underneath
all four.

Two implementation principles connect these projects to the engineering notes.

Explore the field notes

The first is that every 3D surface has a real fallback, and the fallback is the same text a search engine reads. If JavaScript fails, or WebGL is unavailable, or you have reduced-motion turned on, you get a readable page rather than a blank canvas — not a courtesy message, the actual content. That is covered in the no-JS WebGL fallback.

The second is that the honesty markers on this site are load-bearing. Body classes like wf-on, lab-crystalline, and game-live are set inside a successful render path and nowhere else — never on page parse. That means the test suite can distinguish "the page rendered" from "the page shipped the markup that claims it rendered," which is a distinction I got wrong once and would rather not repeat. The suite itself drives a real Chrome over the DevTools Protocol; see smoke testing with CDP.

If you want the full set of notes rather than the project-by-project view, they are all in field notes.

A note on labelling. One of these four is a design showcase rather than a working service, and it says so on its own page and here. I would rather lose your interest than misrepresent what runs. Each project carries a visible status line.