🎹 Synth Universe

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_260":261,"_262":263},"routes/_app.x.$handle.$name",{"_106":105,"_37":50,"_115":92,"_32":116,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_26":-5,"_127":128,"_129":130,"_131":30,"_132":133,"_134":64,"_135":-5,"_136":-5,"_137":138},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":30},"version",8,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","f8ea93bb-730b-4676-84e7-1a33304fd720","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","frontend/visualizer.ts","latestPath","fileId","d72a31d6-5517-11f1-a028-ee650bb23af1","name","visualizer.ts","fileType","script","content","// Canvas visualizer — renders audio-reactive graphics\nimport { getFrequencyData, getWaveformData, getActiveNoteCount } from \"./synth.ts\";\n\nlet hueOffset = 0;\nlet time = 0;\nlet rings: { radius: number; hue: number; alpha: number; width: number }[] = [];\nlet stars: { x: number; y: number; size: number; hue: number; speed: number; angle: number }[] = [];\n\nfunction initStars(w: number, h: number) {\n stars = [];\n for (let i = 0; i < 200; i++) {\n stars.push({\n x: Math.random() * w,\n y: Math.random() * h,\n size: Math.random() * 2 + 0.5,\n hue: Math.random() * 360,\n speed: Math.random() * 0.5 + 0.1,\n angle: Math.random() * Math.PI * 2,\n });\n }\n}\n\nexport function render(ctx: CanvasRenderingContext2D, width: number, height: number) {\n time++;\n hueOffset = (hueOffset + 0.2) % 360;\n\n if (stars.length === 0) initStars(width, height);\n\n const freq = getFrequencyData();\n const wave = getWaveformData();\n const noteCount = getActiveNoteCount();\n\n // Average energy levels\n let bass = 0, mid = 0, high = 0, total = 0;\n const len = freq.length;\n for (let i = 0; i < len; i++) {\n const v = freq[i];\n total += v;\n if (i < len * 0.1) bass += v;\n else if (i < len * 0.4) mid += v;\n else high += v;\n }\n bass = bass / (len * 0.1) / 255;\n mid = mid / (len * 0.3) / 255;\n high = high / (len * 0.6) / 255;\n const energy = total / len / 255;\n\n // Background fade\n ctx.fillStyle = `rgba(0, 0, 5, ${0.15 - energy * 0.08})`;\n ctx.fillRect(0, 0, width, height);\n\n const cx = width / 2;\n const cy = height / 2;\n\n // Stars react to music\n for (const star of stars) {\n star.angle += star.speed * 0.01 * (1 + energy * 3);\n const drift = energy * 2;\n star.x += Math.cos(star.angle) * drift;\n star.y += Math.sin(star.angle) * drift;\n if (star.x < 0) star.x = width;\n if (star.x > width) star.x = 0;\n if (star.y < 0) star.y = height;\n if (star.y > height) star.y = 0;\n\n const pulse = star.size * (1 + energy * 2);\n ctx.beginPath();\n ctx.arc(star.x, star.y, pulse, 0, Math.PI * 2);\n ctx.fillStyle = `hsla(${(star.hue + hueOffset) % 360}, 80%, 80%, ${0.3 + energy * 0.5})`;\n ctx.fill();\n }\n\n // Spawn rings on notes\n if (noteCount > 0 && time % 4 === 0) {\n rings.push({\n radius: 10,\n hue: (hueOffset + Math.random() * 90) % 360,\n alpha: 0.8,\n width: 2 + noteCount * 1.5,\n });\n }\n\n // Draw expanding rings\n rings = rings.filter(r => {\n r.radius += 3 + energy * 8;\n r.alpha -= 0.012;\n if (r.alpha <= 0) return false;\n ctx.beginPath();\n ctx.arc(cx, cy, r.radius, 0, Math.PI * 2);\n ctx.strokeStyle = `hsla(${r.hue}, 90%, 60%, ${r.alpha})`;\n ctx.lineWidth = r.width * r.alpha;\n ctx.stroke();\n return true;\n });\n\n // Circular frequency bars\n if (freq.length > 0) {\n const bars = 180;\n const step = Math.floor(freq.length / bars);\n for (let i = 0; i < bars; i++) {\n const val = freq[i * step] / 255;\n const angle = (i / bars) * Math.PI * 2 - Math.PI / 2;\n const baseR = 80 + bass * 40;\n const barLen = val * 150 * (1 + energy);\n const x1 = cx + Math.cos(angle) * baseR;\n const y1 = cy + Math.sin(angle) * baseR;\n const x2 = cx + Math.cos(angle) * (baseR + barLen);\n const y2 = cy + Math.sin(angle) * (baseR + barLen);\n\n const hue = (i / bars * 360 + hueOffset) % 360;\n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.lineTo(x2, y2);\n ctx.strokeStyle = `hsla(${hue}, 100%, ${50 + val * 30}%, ${0.4 + val * 0.6})`;\n ctx.lineWidth = 2;\n ctx.stroke();\n\n // Glow dots at tips\n if (val > 0.5) {\n ctx.beginPath();\n ctx.arc(x2, y2, 2 + val * 3, 0, Math.PI * 2);\n ctx.fillStyle = `hsla(${hue}, 100%, 80%, ${val * 0.8})`;\n ctx.fill();\n }\n }\n }\n\n // Center orb\n const orbSize = 30 + bass * 50 + energy * 20;\n const orbGrad = ctx.createRadialGradient(cx, cy, 0, cx, cy, orbSize);\n const h1 = (hueOffset) % 360;\n const h2 = (hueOffset + 120) % 360;\n orbGrad.addColorStop(0, `hsla(${h1}, 100%, 90%, ${0.6 + energy * 0.4})`);\n orbGrad.addColorStop(0.5, `hsla(${h2}, 100%, 50%, ${0.3 + energy * 0.3})`);\n orbGrad.addColorStop(1, `hsla(${h2}, 100%, 30%, 0)`);\n ctx.beginPath();\n ctx.arc(cx, cy, orbSize, 0, Math.PI * 2);\n ctx.fillStyle = orbGrad;\n ctx.fill();\n\n // Waveform oscilloscope\n if (wave.length > 0) {\n ctx.beginPath();\n const sliceWidth = width / wave.length;\n let x = 0;\n for (let i = 0; i < wave.length; i++) {\n const v = wave[i] / 128.0;\n const y = cy + (v - 1) * 100 * (1 + energy * 2);\n if (i === 0) ctx.moveTo(x, y);\n else ctx.lineTo(x, y);\n x += sliceWidth;\n }\n ctx.strokeStyle = `hsla(${(hueOffset + 180) % 360}, 100%, 70%, ${0.15 + energy * 0.3})`;\n ctx.lineWidth = 1.5;\n ctx.stroke();\n }\n\n // Morphing geometry\n const shapes = 3 + Math.floor(noteCount * 1.5);\n for (let s = 0; s < shapes; s++) {\n const sides = 3 + s;\n const r = 120 + s * 60 + mid * 80;\n const rotSpeed = (s % 2 === 0 ? 1 : -1) * 0.003 * (1 + energy * 3);\n const rot = time * rotSpeed + s * 0.5;\n ctx.beginPath();\n for (let i = 0; i <= sides; i++) {\n const a = (i / sides) * Math.PI * 2 + rot;\n const wobble = 1 + Math.sin(time * 0.02 + i) * energy * 0.2;\n const px = cx + Math.cos(a) * r * wobble;\n const py = cy + Math.sin(a) * r * wobble;\n if (i === 0) ctx.moveTo(px, py);\n else ctx.lineTo(px, py);\n }\n ctx.closePath();\n ctx.strokeStyle = `hsla(${(hueOffset + s * 40) % 360}, 80%, 60%, ${0.1 + energy * 0.2})`;\n ctx.lineWidth = 1 + energy * 2;\n ctx.stroke();\n }\n}\n","createdAt",["D",1779369630756],"branchVersion","branchId","5bbc2d4c-5517-11f1-ab88-ee650bb23af1","id","5bb6348c-5517-11f1-ab88-ee650bb23af1","synth-universe",["D",1779369423632],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","🎹 Audio-reactive visualizer & keyboard synthesizer","imageUrl","a68d8f06-32e2-4c58-a1d3-3cf162b2be94","pinnedFileId","019e4aae-b356-73f8-880d-c6d242bfa3ef","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019e483d-cd7f-75b2-92ce-45d8c35ab538","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_114":110},"org",{"_106":105,"_107":108,"_109":110,"_19":60,"_111":112,"_113":30},"branch",{"_13":91,"_37":92,"_48":47,"_93":49,"_94":95,"_96":97,"_98":55,"_99":100,"_101":102,"_103":50,"_104":105},"isOwned",10,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",88,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","agg","handle","displayName","Andrew Guzman","avatar","https://lh3.googleusercontent.com/a/ACg8ocI6mvqOR_vASQkdKgnOdaMsHmKGeq759bCV9PdTuTmnMezozqE=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_37":50,"_43":256,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":257,"_86":258,"_88":259,"_90":30},"tree",[186,194,195],"files",[186,187,188,189,190,191,192,193,194,195],"counts",{"_176":68,"_177":157,"_178":68,"_179":180,"_181":182},"contents",[151,152,153],"upstreamProject",{"_48":100,"_37":146,"_57":147,"_59":148,"_54":55,"_84":149},"upstreamBranch",{"_48":95,"_43":139,"_140":141,"_37":92,"_93":100,"_13":142,"_94":-5,"_96":-5,"_143":144,"_52":-5,"_90":30,"_54":55,"_104":145,"_69":102,"_103":146},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789559999&sig=919739a563bb9acb90fc6bc4f6c1789207958a7e1bd397d82b192d76e7e11de2",{"_106":145,"_114":150},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789559999&sig=5c07b77d973a9a7831cc1779f4bd4ec152796753863d0aeae4088e1e0ae03921",{"_48":170,"_37":171,"_35":172,"_156":-5,"_46":47,"_45":157,"_158":64,"_43":173,"_13":68,"_39":174,"_41":-5,"_29":30,"_162":-5,"_32":175},{"_48":164,"_37":165,"_35":166,"_156":-5,"_46":47,"_45":157,"_158":30,"_43":167,"_13":68,"_39":26,"_41":168,"_29":30,"_162":-5,"_32":169},{"_48":154,"_37":155,"_35":62,"_156":-5,"_46":47,"_45":157,"_158":64,"_43":159,"_13":68,"_39":160,"_41":161,"_29":30,"_162":-5,"_32":163},"5bc154f2-5517-11f1-ab88-ee650bb23af1","index.ts","parentId",1,"latest",["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","label",[155],"5bc142f0-5517-11f1-ab88-ee650bb23af1","README.md","019e4aae-b356-73f8-880d-c1008e589272",["D",1779369423632],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types",[165],"5bc141a6-5517-11f1-ab88-ee650bb23af1","frontend","019e4aae-b356-73f8-880d-bc7061e7e972",["D",1779369423632],"directory",[171],"pulls","branches","forks","envVars",{"_183":68,"_185":68},"connections",{"_183":68,"_184":68},"count","unfilledCount","emptyCount",{"_48":170,"_37":171,"_35":172,"_156":-5,"_46":47,"_45":157,"_158":64,"_43":253,"_13":68,"_39":174,"_41":-5,"_29":30,"_162":-5,"_197":254,"_32":255},{"_48":249,"_37":248,"_35":242,"_156":172,"_46":47,"_45":157,"_158":64,"_43":250,"_13":68,"_39":174,"_41":-5,"_29":30,"_162":-5,"_197":251,"_32":252},{"_48":239,"_37":240,"_35":241,"_156":242,"_46":47,"_45":243,"_158":30,"_43":244,"_13":157,"_39":40,"_41":245,"_29":30,"_162":-5,"_197":246,"_32":247},{"_48":231,"_37":232,"_35":233,"_156":172,"_46":47,"_45":234,"_158":64,"_43":235,"_13":157,"_39":26,"_41":236,"_29":30,"_162":-5,"_197":237,"_32":238},{"_48":222,"_37":223,"_35":224,"_156":172,"_46":47,"_45":225,"_158":64,"_43":226,"_13":227,"_39":26,"_41":228,"_29":30,"_162":-5,"_197":229,"_32":230},{"_48":215,"_37":216,"_35":217,"_156":172,"_46":47,"_45":157,"_158":64,"_43":218,"_13":68,"_39":40,"_41":219,"_29":30,"_162":-5,"_197":220,"_32":221},{"_48":207,"_37":208,"_35":209,"_156":172,"_46":47,"_45":210,"_158":64,"_43":211,"_13":68,"_39":40,"_41":212,"_29":30,"_162":-5,"_197":213,"_32":214},{"_48":203,"_37":38,"_35":36,"_156":172,"_46":47,"_45":14,"_158":64,"_43":204,"_13":68,"_39":40,"_41":42,"_29":30,"_162":-5,"_197":205,"_32":206},{"_48":164,"_37":165,"_35":166,"_156":-5,"_46":47,"_45":157,"_158":30,"_43":200,"_13":68,"_39":26,"_41":168,"_29":30,"_162":-5,"_197":201,"_32":202},{"_48":154,"_37":155,"_35":62,"_156":-5,"_46":47,"_45":157,"_158":64,"_43":196,"_13":68,"_39":160,"_41":161,"_29":30,"_162":-5,"_197":198,"_32":199},["D",1779369423632],"children",[],[155],["D",1779369423632],[],[165],"d72a3136-5517-11f1-a028-ee650bb23af1",["D",1779369630756],[],[171,38],"c3c52538-5517-11f1-8753-ee650bb23af1","synth.ts","c3c5260a-5517-11f1-8753-ee650bb23af1",7,["D",1779369598210],"// Audio engine — Web Audio API synthesizer + analyser\nlet audioCtx: AudioContext | null = null;\nlet analyser: AnalyserNode | null = null;\nlet masterGain: GainNode | null = null;\nconst activeOscs = new Map();\n\nconst NOTE_FREQS: Record = {\n a: 261.63, // C4\n w: 277.18, // C#4\n s: 293.66, // D4\n e: 311.13, // D#4\n d: 329.63, // E4\n f: 349.23, // F4\n t: 369.99, // F#4\n g: 392.00, // G4\n y: 415.30, // G#4\n h: 440.00, // A4\n u: 466.16, // A#4\n j: 493.88, // B4\n k: 523.25, // C5\n o: 554.37, // C#5\n l: 587.33, // D5\n p: 622.25, // D#5\n};\n\nexport type WaveShape = \"sine\" | \"triangle\" | \"sawtooth\" | \"square\";\n\nlet currentWave: WaveShape = \"sawtooth\";\nlet reverbNode: ConvolverNode | null = null;\nlet reverbGain: GainNode | null = null;\nlet dryGain: GainNode | null = null;\n\nexport function setWaveShape(w: WaveShape) {\n currentWave = w;\n}\n\nexport function getWaveShape(): WaveShape {\n return currentWave;\n}\n\nfunction createReverb(ctx: AudioContext): ConvolverNode {\n const conv = ctx.createConvolver();\n const rate = ctx.sampleRate;\n const length = rate * 2.5;\n const buf = ctx.createBuffer(2, length, rate);\n for (let ch = 0; ch < 2; ch++) {\n const data = buf.getChannelData(ch);\n for (let i = 0; i < length; i++) {\n data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, 2.5);\n }\n }\n conv.buffer = buf;\n return conv;\n}\n\nexport function initAudio() {\n if (audioCtx) return;\n audioCtx = new AudioContext();\n analyser = audioCtx.createAnalyser();\n analyser.fftSize = 2048;\n analyser.smoothingTimeConstant = 0.85;\n\n masterGain = audioCtx.createGain();\n masterGain.gain.value = 0.3;\n\n reverbNode = createReverb(audioCtx);\n reverbGain = audioCtx.createGain();\n reverbGain.gain.value = 0.4;\n dryGain = audioCtx.createGain();\n dryGain.gain.value = 0.7;\n\n masterGain.connect(dryGain);\n masterGain.connect(reverbNode);\n reverbNode.connect(reverbGain);\n dryGain.connect(analyser);\n reverbGain.connect(analyser);\n analyser.connect(audioCtx.destination);\n}\n\nexport function noteOn(key: string) {\n if (!audioCtx || !masterGain) return;\n if (activeOscs.has(key)) return;\n const freq = NOTE_FREQS[key];\n if (!freq) return;\n\n const osc = audioCtx.createOscillator();\n osc.type = currentWave;\n osc.frequency.value = freq;\n\n const gain = audioCtx.createGain();\n gain.gain.setValueAtTime(0, audioCtx.currentTime);\n gain.gain.linearRampToValueAtTime(0.5, audioCtx.currentTime + 0.02);\n\n osc.connect(gain);\n gain.connect(masterGain);\n osc.start();\n\n activeOscs.set(key, { osc, gain });\n}\n\nexport function noteOff(key: string) {\n if (!audioCtx) return;\n const entry = activeOscs.get(key);\n if (!entry) return;\n const { osc, gain } = entry;\n gain.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 0.3);\n setTimeout(() => { try { osc.stop(); osc.disconnect(); } catch {} }, 400);\n activeOscs.delete(key);\n}\n\nexport function getFrequencyData(): Uint8Array {\n if (!analyser) return new Uint8Array(0);\n const data = new Uint8Array(analyser.frequencyBinCount);\n analyser.getByteFrequencyData(data);\n return data;\n}\n\nexport function getWaveformData(): Uint8Array {\n if (!analyser) return new Uint8Array(0);\n const data = new Uint8Array(analyser.frequencyBinCount);\n analyser.getByteTimeDomainData(data);\n return data;\n}\n\nexport function getActiveNoteCount(): number {\n return activeOscs.size;\n}\n\nexport function getNoteFreqs() {\n return NOTE_FREQS;\n}\n",[],[171,208],"5bc13e40-5517-11f1-ab88-ee650bb23af1","index.tsx","019e4aae-b356-73f8-880d-b9831ff22db6",["D",1779369423632],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[171,216],"b8ffb168-5517-11f1-b839-ee650bb23af1","index.html","019e4aae-b356-73f8-880d-b7dcdd74243a",6,["D",1779369580124],2,"\n\n \n \n \n 🎹 Synth Universe\n \n \n \n \n

\n \n \n \n\n",[],[171,223],"77db300e-5517-11f1-b5c7-ee650bb23af1","favicon.svg","019e4aae-b356-73f8-880d-b185c53e237c",5,["D",1779369470803],"\n\n",[],[171,232],"7368a254-5517-11f1-b518-ee650bb23af1","App.tsx","019e4aae-b355-7240-ab73-c6aa8f28b61a","019e4aae-b356-73f8-880d-aca478e9634a",3,["D",1779369463387],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Particle {\n x: number;\n y: number;\n vx: number;\n vy: number;\n radius: number;\n hue: number;\n life: number;\n maxLife: number;\n trail: { x: number; y: number }[];\n}\n\nconst MODES = [\"galaxy\", \"fireworks\", \"blackhole\", \"dna\"] as const;\ntype Mode = typeof MODES[number];\n\nexport function App() {\n const canvasRef = useRef(null);\n const particlesRef = useRef([]);\n const mouseRef = useRef({ x: 0, y: 0, down: false });\n const [mode, setMode] = useState(\"galaxy\");\n const modeRef = useRef(mode);\n const hueRef = useRef(0);\n\n useEffect(() => {\n modeRef.current = mode;\n }, [mode]);\n\n useEffect(() => {\n const canvas = canvasRef.current!;\n const ctx = canvas.getContext(\"2d\")!;\n let animId: number;\n\n const resize = () => {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n };\n resize();\n window.addEventListener(\"resize\", resize);\n\n const spawn = (x: number, y: number, count: number) => {\n const m = modeRef.current;\n for (let i = 0; i < count; i++) {\n const angle = Math.random() * Math.PI * 2;\n let speed = Math.random() * 3 + 0.5;\n let vx = Math.cos(angle) * speed;\n let vy = Math.sin(angle) * speed;\n\n if (m === \"fireworks\") {\n speed = Math.random() * 6 + 2;\n vx = Math.cos(angle) * speed;\n vy = Math.sin(angle) * speed - 2;\n } else if (m === \"dna\") {\n vx = (Math.random() - 0.5) * 0.5;\n vy = -Math.random() * 2 - 1;\n }\n\n const maxLife = 80 + Math.random() * 120;\n particlesRef.current.push({\n x: x + (Math.random() - 0.5) * 10,\n y: y + (Math.random() - 0.5) * 10,\n vx, vy,\n radius: Math.random() * 2.5 + 0.5,\n hue: (hueRef.current + Math.random() * 60) % 360,\n life: maxLife,\n maxLife,\n trail: [],\n });\n }\n };\n\n const onMove = (e: MouseEvent | TouchEvent) => {\n const p = \"touches\" in e ? e.touches[0] : e;\n mouseRef.current.x = p.clientX;\n mouseRef.current.y = p.clientY;\n if (mouseRef.current.down) spawn(p.clientX, p.clientY, 5);\n };\n const onDown = (e: MouseEvent | TouchEvent) => {\n mouseRef.current.down = true;\n const p = \"touches\" in e ? e.touches[0] : e;\n spawn(p.clientX, p.clientY, 30);\n };\n const onUp = () => { mouseRef.current.down = false; };\n\n canvas.addEventListener(\"mousemove\", onMove);\n canvas.addEventListener(\"mousedown\", onDown);\n canvas.addEventListener(\"mouseup\", onUp);\n canvas.addEventListener(\"touchmove\", onMove);\n canvas.addEventListener(\"touchstart\", onDown);\n canvas.addEventListener(\"touchend\", onUp);\n\n // Auto-spawn ambient particles\n let autoTimer = 0;\n\n const animate = () => {\n const { width, height } = canvas;\n ctx.fillStyle = \"rgba(0, 0, 0, 0.08)\";\n ctx.fillRect(0, 0, width, height);\n\n hueRef.current = (hueRef.current + 0.3) % 360;\n autoTimer++;\n\n // Auto-spawn some particles for ambient effect\n if (autoTimer % 3 === 0) {\n const cx = width / 2 + Math.sin(autoTimer * 0.01) * 150;\n const cy = height / 2 + Math.cos(autoTimer * 0.013) * 100;\n spawn(cx, cy, 2);\n }\n\n const m = modeRef.current;\n const mx = mouseRef.current.x;\n const my = mouseRef.current.y;\n\n particlesRef.current = particlesRef.current.filter(p => {\n p.life--;\n if (p.life <= 0) return false;\n\n // Store trail\n p.trail.push({ x: p.x, y: p.y });\n if (p.trail.length > 8) p.trail.shift();\n\n // Mode-specific physics\n if (m === \"galaxy\") {\n // Swirl around mouse\n const dx = mx - p.x;\n const dy = my - p.y;\n const dist = Math.sqrt(dx * dx + dy * dy) + 1;\n const force = Math.min(50 / dist, 0.5);\n // Tangential + radial force\n p.vx += (-dy / dist) * force * 0.3 + (dx / dist) * force * 0.1;\n p.vy += (dx / dist) * force * 0.3 + (dy / dist) * force * 0.1;\n p.vx *= 0.99;\n p.vy *= 0.99;\n } else if (m === \"blackhole\") {\n const dx = mx - p.x;\n const dy = my - p.y;\n const dist = Math.sqrt(dx * dx + dy * dy) + 1;\n const force = 200 / (dist * dist) * 5;\n p.vx += (dx / dist) * force;\n p.vy += (dy / dist) * force;\n p.vx *= 0.98;\n p.vy *= 0.98;\n } else if (m === \"fireworks\") {\n p.vy += 0.04; // gravity\n p.vx *= 0.99;\n p.vy *= 0.99;\n } else if (m === \"dna\") {\n const wave = Math.sin(p.y * 0.02 + autoTimer * 0.05) * 2;\n p.vx += wave * 0.05;\n p.vx *= 0.95;\n p.vy *= 0.995;\n }\n\n p.x += p.vx;\n p.y += p.vy;\n\n const alpha = p.life / p.maxLife;\n\n // Draw trail\n if (p.trail.length > 1) {\n ctx.beginPath();\n ctx.moveTo(p.trail[0].x, p.trail[0].y);\n for (let i = 1; i < p.trail.length; i++) {\n ctx.lineTo(p.trail[i].x, p.trail[i].y);\n }\n ctx.strokeStyle = `hsla(${p.hue}, 100%, 60%, ${alpha * 0.3})`;\n ctx.lineWidth = p.radius * 0.5;\n ctx.stroke();\n }\n\n // Draw particle glow\n const gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius * 4);\n gradient.addColorStop(0, `hsla(${p.hue}, 100%, 70%, ${alpha * 0.8})`);\n gradient.addColorStop(0.4, `hsla(${p.hue}, 100%, 50%, ${alpha * 0.3})`);\n gradient.addColorStop(1, `hsla(${p.hue}, 100%, 50%, 0)`);\n\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.radius * 4, 0, Math.PI * 2);\n ctx.fillStyle = gradient;\n ctx.fill();\n\n // Core dot\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n ctx.fillStyle = `hsla(${p.hue}, 100%, 90%, ${alpha})`;\n ctx.fill();\n\n return true;\n });\n\n // Cap particles\n if (particlesRef.current.length > 1500) {\n particlesRef.current = particlesRef.current.slice(-1500);\n }\n\n animId = requestAnimationFrame(animate);\n };\n\n animate();\n\n return () => {\n cancelAnimationFrame(animId);\n window.removeEventListener(\"resize\", resize);\n canvas.removeEventListener(\"mousemove\", onMove);\n canvas.removeEventListener(\"mousedown\", onDown);\n canvas.removeEventListener(\"mouseup\", onUp);\n };\n }, []);\n\n return (\n <>\n

Diff · v8