Shadow Garden UI

Shadow Garden is a commercial, animation-forward React component marketplace — a dark "instrument-bench" docs shell for browsing, tuning, and copying 45 production-ready motion components.

Core Focus

• Live tuning bench — every component pairs a real-time preview with a Controls panel that drives each prop live (number, enum, boolean, color), plus a Code tab, install block, and a props table.
• Single source of truth — one typed registry entry per prop generates the live controls *and* the docs, so the documentation can never drift from the component.
• 45 components across 4 categories — Backgrounds, Text Animations, Micro-interactions, and Power-User Systems, split 24 free / 21 pro behind a real paywall.
• WebGL2 shader systems — standouts like Aurora, Grainient, Threads, Black Hole, and a physics engine run as OGL / Three.js shaders, not GIFs.
• Shareable, deep-linkable state — tuned control values live in the URL, so any tuned preview is a link that survives across the workspace and a chrome-free fullscreen stage.

Under the Hood

• Next.js 16 App Router with PPR / Cache Components — an otherwise-static shell with a single dynamic Pro-source hole streamed in; builds stay Partial-Prerender-clean.
• Server-side Shiki highlighting — free-tier pages prerender at build time and ship zero client highlighter JS.
• Entitlement-gated source — locked Pro source is read server-side and never serializes to the client; only a `locked` marker crosses the wire.
• Full commercial backend — Supabase Auth + Postgres (Drizzle, RLS), Polar as Merchant-of-Record with webhooks and reconciliation, and cross-device favorites sync.
• OPFS persistence — a real sandboxed filesystem (Origin Private File System) with a 3-tier fallback chain: OPFS → IndexedDB → in-memory.
• Accessibility-first — `prefers-reduced-motion` honored across every animation, full keyboard access, per-preview error boundaries, and a pause toggle that actually stops issuing animation frames.

Tech Highlights

• Tailwind v4 (CSS-first, zero config file), Zustand + nuqs state, a View-Transition theme toggle, a command palette (cmdk), and a procedural audio engine for interaction feedback.

In short: Shadow Garden is a full-stack, production-grade component platform — not a demo gallery — pairing bleeding-edge React rendering, WebGL motion craft, and a real payments-and-auth backend behind one obsessively-designed dark instrument bench.