🌌 Particle Galaxy

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_245":246,"_247":248},"routes/_app.x.$handle.$name",{"_107":106,"_38":51,"_116":93,"_33":117,"_13":14,"_118":-5,"_11":119,"_120":121,"_122":123,"_124":125,"_126":127,"_26":-5,"_128":129,"_130":131,"_132":55,"_133":134,"_135":31,"_136":-5,"_137":-5,"_138":139},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_49":50,"_38":51,"_44":52,"_53":-5,"_54":55,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":31,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":55},"version",4,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","271430bb-b765-4f63-8190-14ab76ea7da2","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",true,"deletedHere","path","frontend/components/Counter.tsx","latestPath","fileId","019e4aae-b356-73f8-880d-aa833c8de9df","name","Counter.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n","createdAt",["D",1779369466834],"branchVersion","branchId","5bbc2d4c-5517-11f1-ab88-ee650bb23af1","id","5bb6348c-5517-11f1-ab88-ee650bb23af1","synth-universe",["D",1779369423632],"deletedAt","legacyEnvVars",false,"privacy","public","httpPrivacy","description","🎹 Audio-reactive visualizer & keyboard synthesizer","imageUrl","a68d8f06-32e2-4c58-a1d3-3cf162b2be94","pinnedFileId","019e4aae-b356-73f8-880d-c6d242bfa3ef","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019e483d-cd7f-75b2-92ce-45d8c35ab538","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_107":106,"_115":111},"org",{"_107":106,"_108":109,"_110":111,"_19":62,"_112":113,"_114":55},"branch",{"_13":92,"_38":93,"_49":48,"_94":50,"_95":96,"_97":98,"_99":57,"_100":101,"_102":103,"_104":51,"_105":106},"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",{"_49":50,"_38":51,"_44":241,"_53":-5,"_54":55,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":31,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":242,"_87":243,"_89":244,"_91":55},"tree",[187,193,194],"files",[187,188,189,190,191,192,193,194],"counts",{"_177":69,"_178":158,"_179":69,"_180":181,"_182":183},"contents",[152,153,154],"upstreamProject",{"_49":101,"_38":147,"_59":148,"_61":149,"_56":57,"_85":150},"upstreamBranch",{"_49":96,"_44":140,"_141":142,"_38":93,"_94":101,"_13":143,"_95":-5,"_97":-5,"_144":145,"_53":-5,"_91":55,"_56":57,"_105":146,"_70":103,"_104":147},"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=1789581599&sig=be8c9241dcaf80ae72eff5d4763f3300ec6426a8bddc365a5efaae5f85e4dee1",{"_107":146,"_115":151},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789581599&sig=bed85510764f48a9de82762af4b4ce99c525d0ab75e5b57f327c71a53e183d4a",{"_49":171,"_38":172,"_36":173,"_157":-5,"_47":48,"_46":158,"_159":31,"_44":174,"_13":69,"_40":175,"_42":-5,"_30":55,"_163":-5,"_33":176},{"_49":165,"_38":166,"_36":167,"_157":-5,"_47":48,"_46":158,"_159":55,"_44":168,"_13":69,"_40":26,"_42":169,"_30":55,"_163":-5,"_33":170},{"_49":155,"_38":156,"_36":64,"_157":-5,"_47":48,"_46":158,"_159":31,"_44":160,"_13":69,"_40":161,"_42":162,"_30":55,"_163":-5,"_33":164},"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",[156],"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",[166],"5bc141a6-5517-11f1-ab88-ee650bb23af1","frontend","019e4aae-b356-73f8-880d-bc7061e7e972",["D",1779369423632],"directory",[172],"pulls","branches","forks","envVars",{"_184":69,"_186":69},"connections",{"_184":69,"_185":69},"count","unfilledCount","emptyCount",{"_49":171,"_38":172,"_36":173,"_157":-5,"_47":48,"_46":158,"_159":31,"_44":238,"_13":69,"_40":175,"_42":-5,"_30":55,"_163":-5,"_196":239,"_33":240},{"_49":234,"_38":233,"_36":227,"_157":173,"_47":48,"_46":158,"_159":31,"_44":235,"_13":69,"_40":175,"_42":-5,"_30":55,"_163":-5,"_196":236,"_33":237},{"_49":224,"_38":225,"_36":226,"_157":227,"_47":48,"_46":228,"_159":55,"_44":229,"_13":158,"_40":41,"_42":230,"_30":55,"_163":-5,"_196":231,"_33":232},{"_49":217,"_38":218,"_36":219,"_157":173,"_47":48,"_46":158,"_159":55,"_44":220,"_13":69,"_40":26,"_42":221,"_30":55,"_163":-5,"_196":222,"_33":223},{"_49":209,"_38":210,"_36":211,"_157":173,"_47":48,"_46":212,"_159":55,"_44":213,"_13":158,"_40":26,"_42":214,"_30":55,"_163":-5,"_196":215,"_33":216},{"_49":202,"_38":203,"_36":204,"_157":173,"_47":48,"_46":158,"_159":31,"_44":205,"_13":69,"_40":41,"_42":206,"_30":55,"_163":-5,"_196":207,"_33":208},{"_49":165,"_38":166,"_36":167,"_157":-5,"_47":48,"_46":158,"_159":55,"_44":199,"_13":69,"_40":26,"_42":169,"_30":55,"_163":-5,"_196":200,"_33":201},{"_49":155,"_38":156,"_36":64,"_157":-5,"_47":48,"_46":158,"_159":31,"_44":195,"_13":69,"_40":161,"_42":162,"_30":55,"_163":-5,"_196":197,"_33":198},["D",1779369423632],"children",[],[156],["D",1779369423632],[],[166],"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();",[],[172,203],"5f265b6a-5517-11f1-ab88-ee650bb23af1","index.html","019e4aae-b356-73f8-880d-b7dcdd74243a",2,["D",1779369429401],"\n\n \n \n \n 🌌 Particle Galaxy\n \n \n \n \n \n

\n \n \n \n\n",[],[172,210],"5bc13670-5517-11f1-ab88-ee650bb23af1","favicon.svg","019e4aae-b356-73f8-880d-b185c53e237c",["D",1779369423632],"\n",[],[172,218],"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 · v4