Effects Studio

An internal effects control dashboard — a reusable app frame (sidebar nav + top bar + live canvas + scrollable control panel) hosting three tools:

1. SVG Patterns — the SVGPatternGenerator Framer code component: decorative patterns from 15 vector shapes, 10 arrangement algorithms, heavy-overlap support, seeded randomness, and a CSS motion system.
2. Paper Shaders — 19 WebGL shaders from @paper-design/shaders-react plus a custom FoldGradient (Raycast-style domain-warped light sheets, built on ShaderMount), each with its own live controls.
3. Sound Lab — a synth voice built on @web-kits/audio (oscillator / FM / filter / ADSR) with a live oscilloscope + spectrum, plus UI-feedback sounds via the sensory-ui checkbox.

Built with Next.js 14 + React 18 + shadcn/ui (Radix base, Nova preset) and Tailwind v4. Dark, tool-like, uniform. Agentation is wired in (dev only) for visual feedback.

React 18 note: @web-kits/audio/react requires React 19's use() hook, so the Sound Lab uses the framework-agnostic core @web-kits/audio API (defineSound, createMasterAnalyser, ensureReady) directly. Don't switch to the /react subpath while pinned to React 18.

Run

npm install
npm run dev        # http://localhost:3210

Tabs are deep-linkable: ?tab=patterns (default) or ?tab=shaders.

Deployment

Live on Vercel: https://effects-studio-zeta.vercel.app

The Vercel project is effects-studio (deployed via vercel deploy --prod from the CLI). Git auto-deploy is not connected yet — to enable deploys on every push to main, add a GitHub login connection to the Vercel account, then run npx vercel git connect https://github.com/Adedhayor/effects-studio.git.

Architecture (reusable frame)

components/dashboard/
  app-shell.tsx      ← the reusable frame: sidebar + top bar + canvas/panel split
  controls.tsx       ← shared control primitives (Section, SliderRow, SelectRow,
                        SwitchRow, ColorRow, ColorsRow) — used by BOTH tools
  dashboard.tsx      ← top-level nav + tab state (deep-linked via ?tab=)
  pattern-tool.tsx   ← SVG pattern tool (state → SVGPatternGenerator)
  shader-tool.tsx    ← Paper shaders tool (generic control renderer)
  shader-registry.tsx← declarative shader config (add a shader = one entry)
  sound-tool.tsx     ← Sound Lab: @web-kits/audio synth + scope + sensory-ui
components/
  SVGPatternGenerator.tsx  ← the Framer code component (see below)
  shaders/FoldGradient.tsx + foldGradientShader.ts  ← custom ShaderMount shader

To reuse the frame in another project, copy app-shell.tsx + controls.tsx and give AppShell your own nav, canvas, and panel.

The Framer component

components/SVGPatternGenerator.tsx still works standalone in Framer — paste it into Assets → Code → New Component. It imports from "framer" (aliased to a local shim, lib/framer.tsx, for the dashboard preview) and needs no setup there. See the controls list in the Motion / Randomness / Rotation sections of the pattern tool.

Notes

• Pinned to Next 14.2.x / React 18 because Agentation requires React 18. Two transitive security advisories only clear by moving to Next 16 (React 19); acceptable for a local tool.
• Shipping to GitHub is planned after refinement.