create-creative-base

Creative coding starter. One command, working project. Vite + React + TypeScript with 3D, audio, and camera experiences wired in.

Usage

npm create creative-base@latest my-project
# or
pnpm create creative-base my-project

Then:

cd my-project
pnpm dev

What's inside

• Vite 6 + React 19 + TypeScript (strict)
• Tailwind CSS v4 with a token-based design system (dark-mode first)
• React Three Fiber + Drei for 3D / WebGL
• Tone.js for audio synthesis
• getUserMedia wrapped in a useCamera hook
• Framer Motion, cva, tailwind-merge, lucide-react

Structure

src/
  App.tsx                  Experience launcher (replace it)
  experiences/             ThreeD, Audio, Camera starters
  lib/
    tokens.ts              Design tokens (CSS vars + hex)
    hooks/                 useCamera, useAudio, useReducedMotion
  components/
    ui/button.tsx          cva-based button
    canvas/scene.tsx       R3F Canvas wrapper

CLAUDE.md and .cursorrules ship inside the template so your AI assistant knows the conventions.

License

MIT