Who
I do not want another marketing landing that scrolls like a PDF with bounce.
I want an instrument. Pointer gravity. Camera dolly. A stage that listens when you strike it.
modern-design-playground is for operators who already live in Max type, Catppuccin surfaces, and shadcn primitives, and who have watched a WebGL canvas go black after an HDRI 404 and refused to ship the apology screenshot.
It is also for anyone curious what happens when you leave agents AFK with a Playwright density score and a mandate to polish the weakest PNG.
What
I built Modern Design Playground: Vite 8, React 19, TanStack Router, Three.js + R3F, GSAP, Lenis, Motion, Tailwind 4, shadcn base-nova, Max fonts. Private package, unversioned. Nine commits. HEAD d16a7e3.
Home / is one continuous WebGL field. Liquid core. Cosmic backdrop. Helix of archive plates that becomes a tunnel. Strike the field. Hold to resonate. Glass / metal / matte. Case study sheet. Stage.tsx ~1k lines. Chapters.tsx ~1.4k.
/landings is nine worlds, not nine templates: editorial, brutalist, noir, zen, neon, paper, atlas, pulse, prism. pages.tsx is 10,682 lines of CSS micro-theaters. Immersive routes hide the site chrome.
The honest middle of the story: on July 12 the homepage WebGL died. Remote HDRI Environment suspended the scene. CDN 404s. Postprocessing wiped alpha to zero. I did not hand-paint a hero. I left a marathon (iterate-loop, marathon-forever, smoke-interact): screenshot every surface, score by PNG density, upgrade the weakest, repeat for ~10 hours while I was AFK. STATUS-MARATHON.md is the log. Opaque clear #11111b. Local lights. No EffectComposer on the home stage. Liquid core came back.
July 14 I shoved it onto Vercel as a static SPA, ripped Clerk, stripped Convex/PostHog providers for performance. August 8 I set X-Robots-Tag: index, follow. Live host: https://mdp-seven.vercel.app.
Sibling surfaces to keep straight: twelveux (hosted shadcn registry + Glass), HMS (live-edit CMS). Helix stills share energy with uncap; different product surface.
Where
Live on Vercel: https://mdp-seven.vercel.app (home instrument, /landings, /landings/{slug}).
Repo: https://github.com/michaelmonetized/modern-design-playground
When
2026-07-12, 10:39 ET. baa3c67 init.
That afternoon into night. Marathon AFK ~12:00 to ~23:00 ET. Passes A through I. WebGL repaired. Nine worlds densified. Commit 06d6555 next morning: speechless, requires a full case study and log analysis.
2026-07-14. Push fixes. .debug-screenshots gitignored. Deploy to Vercel. SSR to static SPA. Clerk out. Performance strip.
2026-08-08, 06:55 ET. d16a7e3 robots index/follow. HEAD. Nine commits total.
Why
I wanted proof that scroll can be an instrument and that an agent loop with screenshot density as the scoreboard can recover a dead WebGL stage without me babysitting every frame.
So the pack is the playground plus the marathon scar. The live URL is the proof. The STATUS log is the receipt.
If your hero is still a paused MP4 pretending to be 3D, you already know the blank canvas I was staring at.
Which world would you open first after the instrument: brutalist, neon, or zen?