← Back to all work
Studio site. Case 01
acmeridian.co The first A&C site, live at acmeridian.co. Hand-coded HTML, every tool does real work, every page loads in under a second on a phone. The bay you are standing in is the v2 rebuild (case 06).
Stack HTML. CSS. JS Static HTML, Canvas, Web Audio, SVG. No build step.
Pages 7 custom pages Studio, Audit, Pricing, Glossary, 404, two case studies.
Lighthouse, Desktop 98+/100/100/100 LCP 0.8s. CLS 0.03. TBT 0ms.
Author Stephen + Mike Both names on the work. No outside team.
§ I. Tools that actually work § 01. The Audit A real Lighthouse runner. Paste any URL. We run it through Google's PageSpeed Insights API, then parse the raw HTML for schema and contact-info gaps. Free, no sign-up.
§ 02. The Plate The audit, as a downloadable PNG. Every audit run saves as a 1200×1500 letterpress-style PNG. URL, four scores, seven checks, the grade. One shareable image.
§ 03. The Calculator A working price estimate. Pick a tier, choose managed-plan or day-one ownership, drag the buyout slider, see the math zero out. No commitment, no salesperson.
§ 04. The Glossary Web jargon, in plain English. Twenty terms a web company will throw at you (Buyout, CMS, Schema, SSL, Local SEO, etc.) translated into words an actual business owner uses.
§ II. Performance, with notes Measured on a simulated Moto G Power on a 4G connection. Worst page is 0.7s LCP. JS budget across all pages stays under 30 KB.
← Back to all work
Studio infrastructure. Case 02
The system that runs this site . Most studios run their public site on a third-party CMS. We didn't. So we built our own: magic-link authentication, thirteen editable surfaces, full audit log of every change, a control plane the two of us actually use every day.
Plate 02. The post-login dashboard. Each tile is one editable surface. Stack Pages Fns. D1. R2 Cloudflare-native. No third-party CMS, no rebuild on change.
Auth Magic link 15-minute expiry via Resend. No passwords, no third-party IdP.
Surfaces Thirteen Every editable string on the public site hydrates from here.
Status In daily use Live since 2026. The site is the proof.
§ I. What it actually does Every editable string on the public site hydrates at page-load from the admin. Tagline, journal post, FAQs, partner bios, tier prices, approach steps, glossary, services, ticker. All editable in seconds, no deploy, no rebuild, no waiting on a developer.
§ II. Scoped editors, not generic § 01. Pricing editor Three tiers, validated. Each tier is a card with name, tagline, build price, monthly price, and reorderable feature bullets. Shape-validated on save.
§ 02. Journal editor Markdown + live preview. Side-by-side preview. Drag an image into the body, it uploads to R2 and replaces itself with a markdown reference. Auto-publish on schedule.
§ 03. Users + roles Studio access is its own surface. Adding a new admin user is itself an admin action. Roles (admin, editor, viewer) take effect on next sign-in.
§ 04. Audit log Every change is logged. Read-only, append-only. Who, when, diff of what changed. The table most agencies don't bother to build.
← Back to all work
AI-integrated SaaS. YouTube + Twitch. Case 03
Stillerror . A debugger for YouTube and Twitch channels. Stack traces of what went wrong on the last upload, breakpoints before the next one, pull requests for better titles, weekly patch notes. Every section reads like an editor pane. Every error reads like a real error.
The product plate: stack-trace metaphor running through the marketing site and app alike. Surfaces Site + product Marketing on stillerror.com, app on app.stillerror.com.
Stack Vite + Next 16 Cloudflare Pages + Workers. Same brand, two builds.
AI router 4 providers. 3 models Anthropic, OpenAI, Google, xAI. Sonnet 4.6, Opus 4.7, Haiku 4.5.
Status Cohort beta. 2026 Invite-only. First design partner: Skellywags.
§ I. A debugger for a channel YouTube Studio gives creators charts. Stillerror gives creators a trace: which hook fell short, by how much, and what to ship instead. The diagnosis layer that should have shipped with Studio.
§ II. A landing page committed to one metaphor The site reads like the product. Hook-impression ratios, length curves, frame-by-frame retention. Laid out as code and stack traces. The metaphor holds across every surface.
← Back to all work
How we work. Case 04
myTCG An Android scanner for trading-card collectors. Point your phone at a card; the app names it, prices it, files it. Six games at launch, 229,000 cards in the local catalog.
Who built it Both of us. Every line. Stephen on design + engineering. Mike on stress-test + product.
What it covers Six TCGs. 229k cards Pokémon (EN + JP), Magic, Yu-Gi-Oh, Lorcana, One Piece.
How it scans On-device. Whole catalog and visual model bundled in the app. No network.
Where it stands Beta. 2026 Validation corpus at 92% across six games. Final tuning live.
§ I. The scanner refuses to guess If the app can't read the card with confidence, it says so. No fabricated matches. The pipeline runs OCR, catalog lookup, then MobileCLIP image-similarity against the candidate set, and only commits at cosine 0.85 or above.
§ II. Valuation, with sources eBay-comp valuations (90-day window) shown as a low/median/ high band rather than a single number. Every estimate links back to the comps it's pulled from. No black-box pricing.
← Back to all work
Creator brand hub. Case 05
Skellywags Club Full creator brand hub for a Twitch streamer and YouTuber. Merch storefront, three-tier membership, Discord integration, live YouTube feed, and a stream schedule. All running off a single light admin.
Surfaces Hub + store Marketing hub plus a merch storefront on one stack.
Memberships Three tiers Free, supporter, founder. Gated content per tier.
Integrations Discord. YouTube Live video feed and role sync via Discord API.
Admin One light panel Schedule, drops, members. All editable without a deploy.
§ I. One brand, one place Creators usually sprawl across Linktree, Shopify, Patreon, Discord, and a Bento. Skellywags pulls them into one site that holds the brand's voice from masthead to checkout flow.
← Back to all work
Studio rebuild. Case 06
The Bay The site you are standing in. A WebGL industrial bay you walk into, click-driven station panels, no scroll. Built on Astro 4 + Three.js + vanilla TypeScript. Mobile LCP 1.5s with a 3D scene running. The v2 rebuild of case 01.
Stack Astro 4. Three.js Static MPA, TypeScript strict, vanilla TS. No React, no Next, no hydration overhead.
Scene One canvas. raycaster A single 6000-line scene.ts module. Time-based walk-in, click-driven station picking, overlay/history stack.
Mobile LCP 1.5s Two-rAF + idle defer-mount. Hero copy paints before WebGL boots. Touch swipe-look pans the camera within a bounded window.
Routes 15 deep links Every station + case has its own URL. They all hydrate to the same bay. Browser back closes overlays, not pages.
§ I. No framework, by choice Astro builds the shell as static HTML. The only heavy script on the page is the Three.js scene, dynamic-imported after the hero paints. There is no React tree to hydrate, no client router to fight, no virtual DOM mediating the canvas. Astro for structure, vanilla TypeScript for behavior, Three.js for the only surface that needs WebGL. The bundle ends at one canvas-driven module instead of a framework pretending it owns the document.
§ II. The bay as navigation Scroll became a tax. Eight stations live as 3D click-targets you read by walking into the room and pointing. Each station has a real URL so search engines and bookmarks treat them as pages. Browser back closes the open station instead of leaving the bay. The overlay/history stack lets the back button, the close button, the scrim click, and the Esc key all funnel through one exit path. The room is the menu.
§ III. Phones get the full scene Mobile used to fall back to a CSS gradient. Now phones get the WebGL bay too, with one constraint: the scene defer-mounts behind the hero copy so LCP stays at 1.5s on a mid-range Android. RAM under 3GB still falls back. Single-finger drag pans the camera within ±10° yaw and ±6° pitch, kept separate from the raycaster so taps stay precise. The same swipe window the desktop cursor drives.