🎹 Synth Universe

\n \n \n \n\n",[19,102],"77db300e-5517-11f1-b5c7-ee650bb23af1","favicon.svg","019e4aae-b356-73f8-880d-b185c53e237c",5,["D",1779369470803],"\n\n",[19,110],"5bc134ea-5517-11f1-ab88-ee650bb23af1","components","019e4aae-b356-73f8-880d-aca478e9634a",["D",1779369423632],"directory",[19,117],"5bc141a6-5517-11f1-ab88-ee650bb23af1",["D",1779369423632],[19],{"_36":122,"_13":19,"_68":71,"_70":-5,"_72":73,"_74":97,"_76":77,"_38":145,"_17":79,"_80":120,"_82":-5,"_84":51,"_85":-5,"_134":146,"_18":147},{"_36":137,"_13":138,"_68":139,"_70":-5,"_72":73,"_74":140,"_76":77,"_38":141,"_17":97,"_80":24,"_82":142,"_84":51,"_85":-5,"_134":143,"_18":144},{"_36":128,"_13":129,"_68":130,"_70":-5,"_72":73,"_74":97,"_76":77,"_38":131,"_17":79,"_80":132,"_82":133,"_84":51,"_85":-5,"_134":135,"_18":136},"5bc154f2-5517-11f1-ab88-ee650bb23af1","index.ts","019e4aae-b356-73f8-880d-c6d242bfa3ef",["D",1779369423632],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","children",[],[129],"fa907c66-5517-11f1-885c-ee650bb23af1","README.md","019e4aae-b356-73f8-880d-c1008e589272",10,["D",1779369690126],"# 🎹 Synth Universe\n\nA browser-based synthesizer with real-time audio-reactive visualizations. Play music with your keyboard and watch the universe respond.\n\n## Features\n\n- **Playable piano keyboard** — use keys A–L (white) and W/E/T/Y/U/O/P (black) or click the on-screen keys\n- **4 waveforms** — sine, triangle, sawtooth, square\n- **Audio-reactive visuals** — frequency bars, expanding rings, morphing geometry, waveform oscilloscope, drifting stars\n- **Reverb** — built-in convolution reverb for lush sound\n- **Touch support** — works on mobile too\n\n## Architecture\n\n```mermaid\ngraph TD\n Browser -->|GET /| Hono[index.ts]\n Hono -->|serves| HTML[index.html]\n HTML -->|loads| Entry[index.tsx]\n Entry -->|renders| App[App.tsx]\n App -->|audio| Synth[synth.ts]\n App -->|graphics| Viz[visualizer.ts]\n Synth -->|frequency data| Viz\n```\n",[],[138],["D",1779369423632],[148,149,150,151,152,153],[19],{"_36":116,"_13":117,"_68":118,"_70":71,"_72":73,"_74":97,"_76":77,"_38":169,"_17":79,"_80":120,"_82":-5,"_84":51,"_85":-5,"_134":170,"_18":171},{"_36":109,"_13":110,"_68":111,"_70":71,"_72":73,"_74":112,"_76":77,"_38":166,"_17":97,"_80":24,"_82":114,"_84":51,"_85":-5,"_134":167,"_18":168},{"_36":101,"_13":102,"_68":103,"_70":71,"_72":73,"_74":104,"_76":77,"_38":163,"_17":106,"_80":24,"_82":107,"_84":51,"_85":-5,"_134":164,"_18":165},{"_36":94,"_13":95,"_68":96,"_70":71,"_72":73,"_74":97,"_76":77,"_38":160,"_17":79,"_80":81,"_82":99,"_84":51,"_85":-5,"_134":161,"_18":162},{"_36":87,"_13":88,"_68":89,"_70":71,"_72":73,"_74":90,"_76":77,"_38":157,"_17":79,"_80":81,"_82":92,"_84":51,"_85":-5,"_134":158,"_18":159},{"_36":66,"_13":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_38":154,"_17":79,"_80":81,"_82":83,"_84":51,"_85":-5,"_134":155,"_18":156},["D",1779369630756],[],[19,67],["D",1779369598210],[],[19,88],["D",1779369423632],[],[19,95],["D",1779369580124],[],[19,102],["D",1779369470803],[],[19,110],["D",1779369423632],[172],[19,117],{"_36":173,"_13":174,"_68":175,"_70":118,"_72":73,"_74":32,"_76":77,"_38":176,"_17":106,"_80":81,"_82":177,"_84":51,"_85":-5,"_134":178,"_18":179},"ef3c0b14-5517-11f1-a028-ee650bb23af1","App.tsx","019e4aae-b355-7240-ab73-c6aa8f28b61a",["D",1779369671129],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n initAudio, noteOn, noteOff, getNoteFreqs,\n setWaveShape, getWaveShape,\n type WaveShape,\n} from \"../synth.ts\";\nimport { render } from \"../visualizer.ts\";\n\nconst KEY_LABELS: Record = {\n a: { note: \"C\" }, w: { note: \"C#\", black: true },\n s: { note: \"D\" }, e: { note: \"D#\", black: true },\n d: { note: \"E\" },\n f: { note: \"F\" }, t: { note: \"F#\", black: true },\n g: { note: \"G\" }, y: { note: \"G#\", black: true },\n h: { note: \"A\" }, u: { note: \"A#\", black: true },\n j: { note: \"B\" },\n k: { note: \"C\" }, o: { note: \"C#\", black: true },\n l: { note: \"D\" }, p: { note: \"D#\", black: true },\n};\n\nconst WHITE_KEYS = [\"a\",\"s\",\"d\",\"f\",\"g\",\"h\",\"j\",\"k\",\"l\"];\nconst BLACK_KEYS_MAP: Record = {\n w: { key: \"w\", offset: 0 },\n e: { key: \"e\", offset: 1 },\n t: { key: \"t\", offset: 3 },\n y: { key: \"y\", offset: 4 },\n u: { key: \"u\", offset: 5 },\n o: { key: \"o\", offset: 7 },\n p: { key: \"p\", offset: 8 },\n};\n\nconst WAVES: WaveShape[] = [\"sine\", \"triangle\", \"sawtooth\", \"square\"];\nconst WAVE_ICONS: Record = {\n sine: \"∿\",\n triangle: \"△\",\n sawtooth: \"⩘\",\n square: \"⊓\",\n};\n\nexport function App() {\n const canvasRef = useRef(null);\n const [started, setStarted] = useState(false);\n const [wave, setWave] = useState(\"sawtooth\");\n const [activeKeys, setActiveKeys] = useState>(new Set());\n const [showHelp, setShowHelp] = useState(true);\n\n const start = useCallback(() => {\n initAudio();\n setStarted(true);\n setTimeout(() => setShowHelp(false), 4000);\n }, []);\n\n // Keyboard handler\n useEffect(() => {\n if (!started) return;\n const freqs = getNoteFreqs();\n const down = (e: KeyboardEvent) => {\n if (e.repeat) return;\n const k = e.key.toLowerCase();\n if (freqs[k]) {\n noteOn(k);\n setActiveKeys(prev => new Set(prev).add(k));\n }\n };\n const up = (e: KeyboardEvent) => {\n const k = e.key.toLowerCase();\n if (freqs[k]) {\n noteOff(k);\n setActiveKeys(prev => { const s = new Set(prev); s.delete(k); return s; });\n }\n };\n window.addEventListener(\"keydown\", down);\n window.addEventListener(\"keyup\", up);\n return () => { window.removeEventListener(\"keydown\", down); window.removeEventListener(\"keyup\", up); };\n }, [started]);\n\n // Canvas animation\n useEffect(() => {\n if (!started) return;\n const canvas = canvasRef.current!;\n const ctx = canvas.getContext(\"2d\")!;\n let animId: number;\n\n const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; };\n resize();\n window.addEventListener(\"resize\", resize);\n\n const loop = () => {\n render(ctx, canvas.width, canvas.height);\n animId = requestAnimationFrame(loop);\n };\n loop();\n return () => { cancelAnimationFrame(animId); window.removeEventListener(\"resize\", resize); };\n }, [started]);\n\n if (!started) {\n return (\n

🎹

\n SYNTH UNIVERSE\n

\n Audio-reactive visualizer & keyboard synthesizer\n

\n ▶ CLICK TO START\n

\n \n

\n Use keyboard keys A–L to play • Works best on desktop\n

\n );\n }\n\n const keyWidth = 52;\n const pianoWidth = WHITE_KEYS.length * keyWidth;\n\n return (\n <>\n