Flow Studio is a generative art playground built with Next.js, React, TypeScript, and p5.js. It renders procedural animated backgrounds and gives you a control panel for exploring different visual families, motion patterns, color treatments, and export options.

• Real-time generative background rendering with p5.js
• Interactive control panel for tuning composition parameters
• Multiple visual families and preset recipes
• Export support for generated artwork and standalone renderer output
• Local quality gate with linting, type-checking, formatting, dead-code detection, and duplicate-code detection

• Next.js 16
• React 19
• TypeScript
• p5.js
• Zustand
• Tailwind CSS 4
• Framer Motion
• oxlint
• oxfmt
• tsgo
• fallow
• husky

• Node.js 22+ recommended
• pnpm 10+

pnpm install

pnpm dev

Open http://localhost:3000.

pnpm build
pnpm start

Copy values from .env.example if needed by your environment.

Current variables:

• GEMINI_API_KEY
• APP_URL

• pnpm dev starts the Next.js dev server with webpack
• pnpm build creates a production build
• pnpm start runs the production server
• pnpm lint runs oxlint
• pnpm typecheck runs tsgo
• pnpm format formats the codebase with oxfmt
• pnpm format:check checks formatting without writing changes
• pnpm dead-code runs fallow dead-code --fail-on-issues
• pnpm dupes runs fallow dupes --fail-on-issues
• pnpm verify runs the local quality gate used by the git hook
• pnpm clean runs next clean

This project does not rely on CI. The primary quality gate is local.

• A pre-commit hook runs pnpm verify
• pnpm verify currently checks linting, type safety, formatting, dead code, and duplicate code
• Build verification can be run manually with pnpm build

That means commits are expected to be clean before they are pushed to GitHub.

app/
  layout.tsx          App shell and metadata
  page.tsx            Main Flow Studio page
  globals.css         Global styles

components/
  ControlPanel.tsx            UI for controls and export actions
  GenerativeBackground.tsx    p5 canvas host and runtime integration

lib/
  generativeRenderer.ts       Core rendering logic and exportable renderer source

store/
  useControlsStore.ts         Zustand store for controls, presets, and helpers

.husky/
  pre-commit                  Local verification hook

• The app uses webpack explicitly for dev and build because the repo still contains custom webpack configuration in next.config.ts.
• fallow is part of the default workflow, so dead code and duplicate code are treated as commit blockers.
• tsgo is used for type-checking, while typescript remains installed for ecosystem compatibility.

No license file is currently included in this repository.