A playful audio-free "sound" sequencer where users build short rhythm loops by arranging onomatopoeia cards (e.g., "tap", "whoosh", "ding") on a 16-step grid and playing them back as animated pulses instead of real audio. Users can create, name, and save multiple decks and patterns in localStorage, with a simple performance mode that auto-advances and highlights steps while showing per-card visual effects. The app includes a tiny pattern generator (randomize with constraints like "sparse", "busy", or "syncopated") and an export/import JSON feature for sharing patterns.
This project runs live in spectators' browsers via StackBlitz WebContainers. Use only WebContainer-compatible dependencies:
- Database: PGlite (
@electric-sql/pglite) — Postgres compiled to WASM - ORM: Drizzle ORM (
drizzle-orm/pglite) - No Turbopack: Next.js MUST use
next dev --no-turbopack(set in package.json scripts). Turbopack requires native bindings unavailable in WebContainers. - No native addons: Avoid
sharp,bcrypt,better-sqlite3,prisma, etc. - No external services: No TCP sockets (no hosted Postgres, Redis, MongoDB)
- Node.js only: No Python, Go, Rust, etc.
If this project uses a database, include a seed.ts file with realistic demo data that runs on every app boot. Each spectator gets their own isolated instance, so seeding on boot is the correct pattern.