🎹 Synth Universe

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_339":340,"_341":342},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_74":242,"_40":-7,"_243":-5,"_17":244,"_245":246,"_247":248,"_249":250,"_251":252,"_93":-5,"_253":254,"_255":256,"_257":48,"_258":259,"_260":26,"_261":-5,"_262":-5,"_263":264},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5},"handle","agg","name","synth-universe","branchName","main","project",{"_32":59,"_13":14,"_34":201,"_46":-5,"_202":48,"_49":50,"_203":50,"_204":205,"_206":-5,"_207":208,"_209":210,"_211":26,"_212":-5,"_213":-5,"_214":176,"_53":215,"_216":-5,"_217":-5,"_218":-5,"_219":-5,"_220":221,"_222":221,"_223":224,"_225":224,"_226":224,"_227":221,"_228":221,"_229":230,"_231":232,"_233":28,"_47":48},"ahead",9,"behind",3,"diff",{"_64":65,"_66":67,"_68":69},"hasChanges",true,"sourceBranch",{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"targetBranch",{"_32":33,"_34":35,"_36":37,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"pull","id","961078ea-f528-11ef-aa68-569c3dd06744","createdAt",["D",1740674013689],"updatedAt",["D",1785420707976],"projectId","96102714-f528-11ef-aa68-569c3dd06744","version",91,"forkedBranchId","forkedBranchVersion","lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","deletedAt","isOwned",false,"privacy","public","userHandle","templates","orgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","react-hono-starter",10,"5bbc2d4c-5517-11f1-ab88-ee650bb23af1","5bb6348c-5517-11f1-ab88-ee650bb23af1",88,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[180,181],"deleted",[168],"modified",[70,71,72,73],{"_74":151,"_76":152,"_78":153},{"_74":130,"_76":131,"_78":132},{"_74":111,"_76":112,"_78":113},{"_74":75,"_76":77,"_78":79},"path","frontend/index.html","targetFile",{"_32":102,"_13":81,"_82":103,"_84":104,"_86":33,"_87":105,"_89":48,"_34":106,"_40":107,"_92":93,"_94":108,"_66":48,"_96":-5,"_97":-7,"_74":109,"_99":110},"sourceFile",{"_32":80,"_13":81,"_82":83,"_84":85,"_86":58,"_87":88,"_89":26,"_34":90,"_40":91,"_92":93,"_94":95,"_66":48,"_96":-5,"_97":-7,"_74":98,"_99":100},"b8ffb168-5517-11f1-b839-ee650bb23af1","index.html","fileId","019e4aae-b356-73f8-880d-b7dcdd74243a","parentId","019e4aae-b356-73f8-880d-bc7061e7e972","branchId","branchVersion",6,"latest",["D",1779369580124],2,"fileType","file","content","\n\n \n \n \n 🎹 Synth Universe\n \n \n \n \n

\n \n \n \n\n","label","children",[101,81],"contentHash","79348e46be82601dbd31a49e3f4c5a5015e1aeadbda10276ed016aadf5a74061","frontend","5c059140-3996-11f1-a04c-42b51c65c3df","5404b440-f52b-11ef-99f0-569c3dd06744","a59cbf44-f528-11ef-ae42-569c3dd06744",74,["D",1776345337676],8,"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[101,81],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/favicon.svg",{"_32":123,"_13":115,"_82":124,"_84":104,"_86":33,"_87":125,"_89":26,"_34":126,"_40":119,"_92":93,"_94":127,"_66":48,"_96":-5,"_97":-7,"_74":128,"_99":129},{"_32":114,"_13":115,"_82":116,"_84":85,"_86":58,"_87":117,"_89":26,"_34":118,"_40":119,"_92":93,"_94":120,"_66":48,"_96":-5,"_97":-7,"_74":121,"_99":122},"77db300e-5517-11f1-b5c7-ee650bb23af1","favicon.svg","019e4aae-b356-73f8-880d-b185c53e237c",5,["D",1779369470803],1,"\n\n",[101,115],"8bc63defc901ad278de0f81dc56c6daeabd7c36cb271a0580cbd314be1566b7e","82a730d4-3261-11f0-aa46-569c3dd06744","6f196b86-3261-11f0-9a3d-569c3dd06744",45,["D",1747405483360],"\n",[101,115],"1b9cfa9bc87dc0db12471f908bb8438c469ac9b2a59379157b627909cb30fc53","frontend/components/App.tsx",{"_32":143,"_13":134,"_82":144,"_84":145,"_86":33,"_87":146,"_89":26,"_34":147,"_40":117,"_92":138,"_94":148,"_66":48,"_96":-5,"_97":-7,"_74":149,"_99":150},{"_32":133,"_13":134,"_82":135,"_84":136,"_86":58,"_87":20,"_89":26,"_34":137,"_40":91,"_92":138,"_94":139,"_66":48,"_96":-5,"_97":-7,"_74":140,"_99":141},"ef3c0b14-5517-11f1-a028-ee650bb23af1","App.tsx","019e4aae-b355-7240-ab73-c6aa8f28b61a","019e4aae-b356-73f8-880d-aca478e9634a",["D",1779369671129],"script","/** @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

React + Hono Starter

Compare

Mergeagg/mainintotemplates/main

README.md+16-47

frontend/components/App.tsx+255-8

frontend/favicon.svg+8-3

frontend/index.html+9-7

frontend/synth.ts+131-0

frontend/visualizer.ts+179-0

frontend/components/Counter.tsx+0-18