[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_200":201,"_202":203},"routes/_app.x.$handle.$name",{"_16":17,"_20":21,"_81":64,"_82":83,"_62":-7,"_84":-5,"_13":85,"_86":87,"_11":88,"_89":90,"_91":92,"_93":-5,"_94":-5,"_95":-5,"_96":26,"_97":98,"_99":26,"_100":-5,"_101":-5,"_102":103},"routes/_app.x.$handle.$name.search.$(branch)",{"_11":12,"_13":14,"_15":-5,"_16":17},"files",[],"project",{"_18":19,"_20":21,"_22":23,"_24":-5,"_25":26,"_27":28,"_29":28,"_30":-5,"_31":-5,"_32":33,"_34":-5,"_35":26,"_36":-5,"_37":-5,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":-5,"_45":-5,"_46":47,"_48":47,"_49":50,"_51":50,"_52":50,"_53":47,"_54":47,"_55":56,"_57":58,"_59":60,"_61":26},"query","handle","want","id","213f8a72-18bf-11f1-b9ac-42dde27851f2","name","untitled-5845","createdAt",["D",1772734460077],"deletedAt","legacyEnvVars",false,"privacy","public","httpPrivacy","description","imageUrl","userId","01999b42-6923-7516-b82f-33ca961b034d","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01999b42-6923-7516-b82f-3505b8a0d6c5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_16":17,"_80":76},"org",{"_16":17,"_74":-5,"_75":76,"_32":33,"_77":78,"_79":26},"branch",{"_62":63,"_20":64,"_18":65,"_66":19,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":21,"_73":17},"isOwned","version",28,"main","213ff3ae-18bf-11f1-b9ac-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzMzUVBmSlozZlNTS0gzRFFsaHhPZk84VDFPNyJ9","tier","free","canRestrictVals","profileImageUrl","branchName","path","","adoptOrgId",{"_18":19,"_20":21,"_22":196,"_24":-5,"_25":26,"_27":28,"_29":28,"_30":-5,"_31":-5,"_32":33,"_34":-5,"_35":26,"_36":-5,"_37":-5,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":-5,"_45":-5,"_46":47,"_48":47,"_49":50,"_51":50,"_52":50,"_53":47,"_54":47,"_55":197,"_57":198,"_59":199,"_61":26},"tree",[142,148],[142,143,144,145,146,147,148],"counts",{"_131":39,"_132":133,"_134":39,"_135":136,"_137":138},"contents",[104,105],"file","upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_18":123,"_20":124,"_108":125,"_110":-5,"_111":65,"_112":126,"_113":114,"_22":127,"_62":128,"_117":129,"_118":-5,"_120":26,"_121":-5,"_82":130},{"_18":106,"_20":107,"_108":109,"_110":-5,"_111":65,"_112":63,"_113":114,"_22":115,"_62":116,"_117":93,"_118":119,"_120":26,"_121":-5,"_82":122},"d9580da8-18c1-11f1-9169-42dde27851f2","index.html","fileId","d5f64dd2-18c1-11f1-bf1f-42dde27851f2","parentId","branchId","branchVersion","latest",true,["D",1772735627925],3,"fileType","content","\n\n \n \n \n Arena Web Dev App\n \n \n

\n \n \n","deleted","label",[107],"a4d0a3ce-18c1-11f1-8cd5-42dde27851f2","src","a04c3e58-18c1-11f1-80f6-42dde27851f2",7,["D",1772735539797],2,"directory",[124],"pulls","branches",1,"forks","envVars",{"_139":39,"_141":39},"connections",{"_139":39,"_140":39},"count","unfilledCount","emptyCount",{"_18":123,"_20":124,"_108":125,"_110":-5,"_111":65,"_112":126,"_113":114,"_22":193,"_62":128,"_117":129,"_118":-5,"_120":26,"_121":-5,"_150":194,"_82":195},{"_18":188,"_20":187,"_108":181,"_110":125,"_111":65,"_112":189,"_113":114,"_22":190,"_62":133,"_117":129,"_118":-5,"_120":26,"_121":-5,"_150":191,"_82":192},{"_18":178,"_20":179,"_108":180,"_110":181,"_111":65,"_112":182,"_113":114,"_22":183,"_62":128,"_117":158,"_118":184,"_120":26,"_121":-5,"_150":185,"_82":186},{"_18":170,"_20":171,"_108":172,"_110":125,"_111":65,"_112":173,"_113":114,"_22":174,"_62":116,"_117":158,"_118":175,"_120":26,"_121":-5,"_150":176,"_82":177},{"_18":162,"_20":163,"_108":164,"_110":125,"_111":65,"_112":165,"_113":114,"_22":166,"_62":116,"_117":93,"_118":167,"_120":26,"_121":-5,"_150":168,"_82":169},{"_18":153,"_20":154,"_108":155,"_110":125,"_111":65,"_112":156,"_113":114,"_22":157,"_62":128,"_117":158,"_118":159,"_120":26,"_121":-5,"_150":160,"_82":161},{"_18":106,"_20":107,"_108":109,"_110":-5,"_111":65,"_112":63,"_113":114,"_22":149,"_62":116,"_117":93,"_118":119,"_120":26,"_121":-5,"_150":151,"_82":152},["D",1772735627925],"children",[],[107],"bb80ccd4-18c1-11f1-9f73-42dde27851f2","main.tsx","b895f22e-18c1-11f1-9f6f-42dde27851f2",14,["D",1772735577854],"script","import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./index.css\";\nimport { App } from \"./App\";\n\ncreateRoot(document.getElementById(\"root\")!).render(\n \n \n ,\n);",[],[124,154],"c117c3fa-18c1-11f1-9f73-42dde27851f2","index.css","be5b6b1c-18c1-11f1-9aef-42dde27851f2",18,["D",1772735587235],"@import url(\"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap\");\n@import \"tailwindcss\";\n\n:root {\n color-scheme: light;\n --page-wash: #f5eee0;\n --page-glow: rgba(236, 176, 144, 0.28);\n --panel: rgba(255, 251, 245, 0.78);\n --panel-edge: rgba(104, 85, 64, 0.16);\n --ink: #241e17;\n --muted: #6c6357;\n --frame: #7d6549;\n --sky: #8d98ab;\n --celestial: #d68b5f;\n --star: #de9c76;\n --trunk: #5f4432;\n --leaf: #688556;\n --leaf-alt: #8aa96d;\n --petal: #c47b74;\n --grass: #738d5d;\n --water: #6b8a8c;\n --path: #b19b83;\n}\n\nhtml {\n min-height: 100%;\n}\n\nbody {\n min-height: 100vh;\n margin: 0;\n background:\n radial-gradient(circle at top left, var(--page-glow) 0%, transparent 32%),\n radial-gradient(\n circle at bottom right,\n rgba(255, 255, 255, 0.55) 0%,\n transparent 26%\n ),\n linear-gradient(180deg, var(--page-wash) 0%, #f8f4ec 100%);\n color: var(--ink);\n font-family: \"IBM Plex Mono\", monospace;\n}\n\nbody::before {\n content: \"\";\n position: fixed;\n inset: 0;\n pointer-events: none;\n background-image:\n linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);\n background-size: 28px 28px;\n mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 88%);\n}\n\n#root {\n min-height: 100vh;\n}\n\n.garden-shell {\n background:\n radial-gradient(circle at top left, var(--page-glow) 0%, transparent 32%),\n radial-gradient(\n circle at bottom right,\n rgba(255, 255, 255, 0.55) 0%,\n transparent 26%\n ),\n linear-gradient(180deg, var(--page-wash) 0%, #f8f4ec 100%);\n}\n\n.font-display {\n font-family: \"Fraunces\", serif;\n letter-spacing: -0.04em;\n}\n\n.glass-panel {\n border: 1px solid var(--panel-edge);\n background: var(--panel);\n backdrop-filter: blur(12px);\n box-shadow: 0 24px 70px rgba(50, 40, 24, 0.08);\n}\n\n.ascii-screen {\n font-family: \"IBM Plex Mono\", monospace;\n font-size: clamp(0.56rem, 0.48rem + 0.3vw, 0.76rem);\n line-height: 1.04;\n letter-spacing: 0.01em;\n}\n\n.ascii-line {\n white-space: pre;\n}\n\n.control-slider {\n accent-color: var(--frame);\n}\n\n.tone-frame {\n color: var(--frame);\n}\n\n.tone-sky {\n color: var(--sky);\n}\n\n.tone-celestial {\n color: var(--celestial);\n}\n\n.tone-star {\n color: var(--star);\n}\n\n.tone-bird {\n color: var(--ink);\n}\n\n.tone-trunk {\n color: var(--trunk);\n}\n\n.tone-leaf {\n color: var(--leaf);\n}\n\n.tone-leafAlt {\n color: var(--leaf-alt);\n}\n\n.tone-petal {\n color: var(--petal);\n}\n\n.tone-grass {\n color: var(--grass);\n}\n\n.tone-water {\n color: var(--water);\n}\n\n.tone-path {\n color: var(--path);\n}\n\n.reveal {\n animation: rise-in 700ms ease both;\n}\n\n@keyframes rise-in {\n from {\n opacity: 0;\n transform: translateY(18px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}",[],[124,163],"b5b1c3f8-18c1-11f1-9a9c-42dde27851f2","App.tsx","a77a1c0e-18c1-11f1-9f73-42dde27851f2",11,["D",1772735568113],"import { type CSSProperties, useEffect, useMemo, useState } from \"react\";\n\ntype Season = \"spring\" | \"summer\" | \"amber\" | \"winter\";\ntype Tone =\n | \"frame\"\n | \"sky\"\n | \"celestial\"\n | \"star\"\n | \"bird\"\n | \"trunk\"\n | \"leaf\"\n | \"leafAlt\"\n | \"petal\"\n | \"grass\"\n | \"water\"\n | \"path\";\n\ntype Cell = {\n char: string;\n tone: Tone;\n z: number;\n};\n\ntype GardenStats = {\n trees: number;\n branches: number;\n blooms: number;\n waterline: number;\n};\n\nconst INNER_WIDTH = 68;\nconst INNER_HEIGHT = 24;\n\nconst seasonThemes: Record = {\n spring: {\n \"--page-wash\": \"#f5eee0\",\n \"--page-glow\": \"rgba(236, 176, 144, 0.28)\",\n \"--panel\": \"rgba(255, 251, 245, 0.78)\",\n \"--panel-edge\": \"rgba(104, 85, 64, 0.16)\",\n \"--ink\": \"#241e17\",\n \"--muted\": \"#6c6357\",\n \"--frame\": \"#7d6549\",\n \"--sky\": \"#8d98ab\",\n \"--celestial\": \"#d68b5f\",\n \"--star\": \"#de9c76\",\n \"--trunk\": \"#5f4432\",\n \"--leaf\": \"#688556\",\n \"--leaf-alt\": \"#8aa96d\",\n \"--petal\": \"#c47b74\",\n \"--grass\": \"#738d5d\",\n \"--water\": \"#6b8a8c\",\n \"--path\": \"#b19b83\",\n } as CSSProperties,\n summer: {\n \"--page-wash\": \"#efe9d5\",\n \"--page-glow\": \"rgba(228, 187, 93, 0.24)\",\n \"--panel\": \"rgba(253, 249, 238, 0.78)\",\n \"--panel-edge\": \"rgba(92, 88, 62, 0.18)\",\n \"--ink\": \"#1f1f18\",\n \"--muted\": \"#65634f\",\n \"--frame\": \"#726746\",\n \"--sky\": \"#7a8ca1\",\n \"--celestial\": \"#c17e34\",\n \"--star\": \"#d09a4f\",\n \"--trunk\": \"#62462d\",\n \"--leaf\": \"#527249\",\n \"--leaf-alt\": \"#7d9358\",\n \"--petal\": \"#d7b259\",\n \"--grass\": \"#607c4f\",\n \"--water\": \"#5b7f8a\",\n \"--path\": \"#ac9474\",\n } as CSSProperties,\n amber: {\n \"--page-wash\": \"#f3e5d7\",\n \"--page-glow\": \"rgba(186, 92, 38, 0.26)\",\n \"--panel\": \"rgba(255, 248, 242, 0.78)\",\n \"--panel-edge\": \"rgba(105, 69, 47, 0.18)\",\n \"--ink\": \"#251812\",\n \"--muted\": \"#755745\",\n \"--frame\": \"#865d43\",\n \"--sky\": \"#8b7f83\",\n \"--celestial\": \"#c35f31\",\n \"--star\": \"#d5764d\",\n \"--trunk\": \"#684130\",\n \"--leaf\": \"#8a5b36\",\n \"--leaf-alt\": \"#b7793f\",\n \"--petal\": \"#d39b4d\",\n \"--grass\": \"#857148\",\n \"--water\": \"#6f7f8c\",\n \"--path\": \"#b08f74\",\n } as CSSProperties,\n winter: {\n \"--page-wash\": \"#edf0ef\",\n \"--page-glow\": \"rgba(112, 142, 160, 0.18)\",\n \"--panel\": \"rgba(249, 252, 253, 0.76)\",\n \"--panel-edge\": \"rgba(90, 106, 116, 0.18)\",\n \"--ink\": \"#1e2328\",\n \"--muted\": \"#61717b\",\n \"--frame\": \"#60717c\",\n \"--sky\": \"#80909d\",\n \"--celestial\": \"#c3d0d9\",\n \"--star\": \"#e1e8eb\",\n \"--trunk\": \"#53616b\",\n \"--leaf\": \"#9fb0b8\",\n \"--leaf-alt\": \"#b9c7ce\",\n \"--petal\": \"#dbe3e8\",\n \"--grass\": \"#839399\",\n \"--water\": \"#7f97a6\",\n \"--path\": \"#b7c0c5\",\n } as CSSProperties,\n};\n\nconst seasonCopy: Record = {\n spring: \"soft bloom pass / petal-heavy canopies / bright understory\",\n summer: \"dense crown pass / warm light pool / deeper water reflections\",\n amber: \"split-tone foliage / longer limbs / ember-like field texture\",\n winter: \"bare branch bias / moonlit sky pass / quiet frost accents\",\n};\n\nconst leafChars: Record = {\n spring: [\"o\", \"*\", \"+\", \".\"],\n summer: [\"o\", \"O\", \"+\", \"*\"],\n amber: [\"*\", \"o\", \"+\", \".\"],\n winter: [\".\", \"*\", \"+\", \"'\"],\n};\n\nfunction mulberry32(seed: number) {\n let t = seed >>> 0;\n return () => {\n t += 0x6d2b79f5;\n let value = Math.imul(t ^ (t >>> 15), t | 1);\n value ^= value + Math.imul(value ^ (value >>> 7), value | 61);\n return ((value ^ (value >>> 14)) >>> 0) / 4294967296;\n };\n}\n\nfunction createCanvas(width: number, height: number): Cell[][] {\n return Array.from(\n { length: height },\n () =>\n Array.from(\n { length: width },\n () => ({ char: \" \", tone: \"sky\" as Tone, z: -1000 }),\n ),\n );\n}\n\nfunction setCell(\n canvas: Cell[][],\n x: number,\n y: number,\n char: string,\n tone: Tone,\n z = 0,\n) {\n if (\n x < 0 || y < 0 || y >= canvas.length || x >= canvas[0].length ||\n char === \" \"\n ) {\n return;\n }\n\n if (z >= canvas[y][x].z) {\n canvas[y][x] = { char, tone, z };\n }\n}\n\nfunction drawLine(\n canvas: Cell[][],\n x1: number,\n y1: number,\n x2: number,\n y2: number,\n tone: Tone,\n z: number,\n) {\n const steps = Math.max(Math.abs(x2 - x1), Math.abs(y2 - y1), 1);\n\n for (let index = 0; index <= steps; index += 1) {\n const t = index / steps;\n const x = Math.round(x1 + (x2 - x1) * t);\n const y = Math.round(y1 + (y2 - y1) * t);\n const dx = x2 - x1;\n const dy = y2 - y1;\n const char = Math.abs(dx) <= Math.abs(dy) * 0.45\n ? \"|\"\n : dx > 0\n ? \"/\"\n : \"\\\\\";\n setCell(canvas, x, y, char, tone, z);\n }\n}\n\nfunction addLeafCluster(\n canvas: Cell[][],\n cx: number,\n cy: number,\n radius: number,\n z: number,\n season: Season,\n rng: () => number,\n stats: GardenStats,\n) {\n const glyphs = leafChars[season];\n\n for (let y = -radius; y <= radius; y += 1) {\n for (let x = -radius; x <= radius; x += 1) {\n const distance = Math.sqrt(x * x + y * y);\n\n if (distance > radius + rng() * 0.35 || rng() < 0.33) {\n continue;\n }\n\n const char = glyphs[Math.floor(rng() * glyphs.length)];\n const tone = season === \"winter\"\n ? (rng() > 0.72 ? \"petal\" : \"leaf\")\n : rng() > 0.76\n ? \"petal\"\n : rng() > 0.42\n ? \"leafAlt\"\n : \"leaf\";\n setCell(\n canvas,\n cx + x,\n cy + y,\n char,\n tone,\n z + radius - Math.round(distance),\n );\n stats.blooms += 1;\n }\n }\n}\n\nfunction growBranch(\n canvas: Cell[][],\n x: number,\n y: number,\n length: number,\n angle: number,\n depth: number,\n z: number,\n season: Season,\n rng: () => number,\n wind: number,\n stats: GardenStats,\n) {\n const x2 = x + Math.cos(angle) * length;\n const y2 = y + Math.sin(angle) * length;\n drawLine(\n canvas,\n Math.round(x),\n Math.round(y),\n Math.round(x2),\n Math.round(y2),\n \"trunk\",\n z + depth,\n );\n stats.branches += 1;\n\n if (depth <= 1 || length < 2.3) {\n addLeafCluster(\n canvas,\n Math.round(x2),\n Math.round(y2),\n Math.max(1, Math.round(length * 0.45)),\n z + depth,\n season,\n rng,\n stats,\n );\n return;\n }\n\n const spread = 0.36 + rng() * 0.2;\n const sway = wind * (0.04 + rng() * 0.05);\n const nextLength = length * (0.72 + rng() * 0.08);\n\n growBranch(\n canvas,\n x2,\n y2,\n nextLength,\n angle - spread - sway,\n depth - 1,\n z + 1,\n season,\n rng,\n wind,\n stats,\n );\n growBranch(\n canvas,\n x2,\n y2,\n nextLength,\n angle + spread + sway,\n depth - 1,\n z + 1,\n season,\n rng,\n wind,\n stats,\n );\n\n if (depth > 2 && rng() > 0.42) {\n growBranch(\n canvas,\n x2,\n y2,\n nextLength * 0.86,\n angle + (rng() - 0.5) * 0.42 + sway * 0.4,\n depth - 2,\n z + 1,\n season,\n rng,\n wind,\n stats,\n );\n }\n}\n\nfunction drawTree(\n canvas: Cell[][],\n trunkX: number,\n groundY: number,\n height: number,\n spread: number,\n season: Season,\n rng: () => number,\n wind: number,\n stats: GardenStats,\n) {\n const lean = (rng() - 0.5) * 0.24 + wind * 0.05;\n const trunkTopX = trunkX + Math.sin(lean) * (height * 0.18);\n const trunkTopY = groundY - height;\n drawLine(\n canvas,\n trunkX,\n groundY,\n Math.round(trunkTopX),\n Math.round(trunkTopY),\n \"trunk\",\n groundY + 4,\n );\n\n for (let offset = -1; offset <= 1; offset += 1) {\n if (rng() > 0.45) {\n setCell(canvas, trunkX + offset, groundY, \"_\", \"path\", groundY + 1);\n }\n }\n\n const depth = Math.max(3, Math.round(spread));\n growBranch(\n canvas,\n trunkTopX,\n trunkTopY,\n height * 0.38,\n -Math.PI / 2 + lean,\n depth,\n groundY + 5,\n season,\n rng,\n wind,\n stats,\n );\n stats.trees += 1;\n}\n\nfunction addCloud(canvas: Cell[][], x: number, y: number, rng: () => number) {\n const cloud = rng() > 0.5 ? \" .--. .-. \" : \" .-. .--. \";\n cloud.split(\"\").forEach((char, index) => {\n if (char !== \" \") {\n setCell(canvas, x + index, y, char, \"sky\", 3);\n }\n });\n}\n\nfunction addBirds(canvas: Cell[][], x: number, y: number, count: number) {\n for (let index = 0; index < count; index += 1) {\n setCell(canvas, x + index * 3, y + (index % 2), \"v\", \"bird\", 4);\n }\n}\n\nfunction addCelestial(canvas: Cell[][], season: Season) {\n const x = season === \"winter\" ? 53 : 10;\n const y = season === \"winter\" ? 4 : 3;\n const glyphs = season === \"winter\"\n ? [\".\", \"o\", \".\", \"o\"]\n : [\".\", \"O\", \"o\", \".\"];\n\n glyphs.forEach((char, index) => {\n setCell(\n canvas,\n x + (index % 2),\n y + Math.floor(index / 2),\n char,\n \"celestial\",\n 2,\n );\n });\n\n if (season === \"winter\") {\n for (let i = 0; i < 16; i += 1) {\n const sx = 5 + ((i * 11) % (INNER_WIDTH - 10));\n const sy = 1 + ((i * 7) % 8);\n setCell(canvas, sx, sy, i % 3 === 0 ? \"+\" : \".\", \"star\", 1);\n }\n }\n}\n\nfunction buildGarden(\n seed: number,\n season: Season,\n grove: number,\n detail: number,\n breeze: number,\n frame: number,\n) {\n const rng = mulberry32(seed);\n const canvas = createCanvas(INNER_WIDTH, INNER_HEIGHT);\n const stats: GardenStats = { trees: 0, branches: 0, blooms: 0, waterline: 0 };\n const groundY = INNER_HEIGHT - 5;\n const wind = Math.sin(frame * 0.8) * (breeze / 10);\n\n addCelestial(canvas, season);\n addCloud(canvas, 18, season === \"winter\" ? 2 : 4, rng);\n addCloud(canvas, 42, season === \"amber\" ? 5 : 3, rng);\n addBirds(canvas, 24, 6, season === \"winter\" ? 2 : 4);\n\n const pondWidth = 10 + detail * 2;\n const pondOffset = 6 + Math.floor(rng() * 14);\n const pondY = groundY + 1;\n stats.waterline = pondWidth;\n\n for (let y = groundY - 1; y < INNER_HEIGHT; y += 1) {\n for (let x = 0; x < INNER_WIDTH; x += 1) {\n const isPond = y >= pondY &&\n Math.abs(x - (pondOffset + pondWidth)) <\n pondWidth * 0.8 - (y - pondY) * 1.2;\n const isPath = y >= groundY && x > 3 && x < 17 &&\n y - groundY >= Math.abs(x - 10) * 0.12;\n\n if (isPond) {\n const char = y === pondY ? \"~\" : rng() > 0.52 ? \"_\" : \"~\";\n setCell(canvas, x, y, char, \"water\", 20 + y);\n } else if (isPath) {\n setCell(canvas, x, y, rng() > 0.6 ? \".\" : \":\", \"path\", 18 + y);\n } else {\n const char = y < groundY + 1\n ? (rng() > 0.58 ? \",\" : \"'\")\n : rng() > 0.55\n ? \";\"\n : \".\";\n const tone = rng() > 0.92 ? \"petal\" : \"grass\";\n setCell(canvas, x, y, char, tone, 18 + y);\n }\n }\n }\n\n const treeCount = 3 + grove;\n const anchors = Array.from({ length: treeCount }, (_, index) => {\n const spreadSlot = (INNER_WIDTH - 8) / (treeCount + 1);\n const x = 4 + Math.round((index + 1) * spreadSlot + (rng() - 0.5) * 5);\n const y = groundY - Math.round(rng() * 3);\n return { x, y };\n }).sort((a, b) => a.y - b.y);\n\n anchors.forEach(({ x, y }, index) => {\n const height = 6 + detail + Math.floor(rng() * 4) + (index % 2);\n const spread = 3 + Math.round(detail * 0.7 + rng() * 2);\n drawTree(canvas, x, y, height, spread, season, rng, wind, stats);\n });\n\n for (let x = 2; x < INNER_WIDTH - 2; x += 4) {\n if (rng() > 0.6) {\n setCell(\n canvas,\n x,\n groundY + 1 - Math.round(rng() * 2),\n rng() > 0.5 ? \"*\" : \"+\",\n \"petal\",\n 24,\n );\n }\n }\n\n const label = `[ ASCII GARDEN / ${season.toUpperCase()} / SEED ${seed} ]`;\n const paddedTop = `-${label}`.padEnd(INNER_WIDTH, \"-\").slice(0, INNER_WIDTH);\n const bottomNote =\n `-${stats.trees} trees | ${stats.branches} branch passes | ${stats.blooms} leaf cells`\n .padEnd(\n INNER_WIDTH,\n \"-\",\n );\n\n const lines: Cell[][] = [];\n lines.push([\n { char: \"+\", tone: \"frame\", z: 999 },\n ...paddedTop.split(\"\").map((char) => ({\n char,\n tone: \"frame\" as Tone,\n z: 999,\n })),\n { char: \"+\", tone: \"frame\", z: 999 },\n ]);\n\n canvas.forEach((row) => {\n lines.push([\n { char: \"|\", tone: \"frame\", z: 999 },\n ...row,\n { char: \"|\", tone: \"frame\", z: 999 },\n ]);\n });\n\n lines.push([\n { char: \"+\", tone: \"frame\", z: 999 },\n ...bottomNote.split(\"\").map((char) => ({\n char,\n tone: \"frame\" as Tone,\n z: 999,\n })),\n { char: \"+\", tone: \"frame\", z: 999 },\n ]);\n\n return { lines, stats };\n}\n\nfunction AsciiViewport({ lines }: { lines: Cell[][] }) {\n return (\n

\n {lines.map((line, rowIndex) => (\n

\n {line.map((cell, columnIndex) => (\n \n {cell.char === \" \" ? String.fromCharCode(160) : cell.char}\n \n ))}\n

\n ))}\n

\n );\n}\n\nexport function App() {\n const [season, setSeason] = useState(\"spring\");\n const [seed, setSeed] = useState(1987);\n const [grove, setGrove] = useState(3);\n const [detail, setDetail] = useState(4);\n const [breeze, setBreeze] = useState(5);\n const [frame, setFrame] = useState(0);\n\n useEffect(() => {\n const timer = window.setInterval(\n () => setFrame((value) => value + 1),\n 1400,\n );\n return () => window.clearInterval(timer);\n }, []);\n\n const scene = useMemo(\n () => buildGarden(seed, season, grove, detail, breeze, frame),\n [seed, season, grove, detail, breeze, frame],\n );\n\n return (\n \n

\n ascii ui greenhouse\n

\n A coded garden built from clean branching rules and quiet\n terminal charm.\n

\n This scene grows from a seeded tree algorithm: recursive trunk\n passes, seasonal leaf palettes, a layered ground pass, and a\n slow breeze loop that keeps the grove alive without breaking\n the ASCII silhouette.\n

\n\n

\n growth mode\n

{season}

\n {seasonCopy[season]}\n

\n grove density\n

{scene.stats.trees} trunks

\n balanced across foreground depth for cleaner overlap.\n

\n canopy cells\n

{scene.stats.blooms}

\n leaf clusters use seeded jitter to avoid noisy repetition.\n

\n\n

\n garden console\n

\n Tune the generator\n

\n \n setSeed(Math.floor(Math.random() * 9000) + 1000)}\n className=\"rounded-full border border-[color:var(--panel-edge)] bg-white/55 px-4 py-2 text-sm transition hover:-translate-y-0.5 hover:bg-white/80\"\n >\n randomize seed\n \n

\n\n

\n \n

\n seed\n {seed}\n

\n setSeed(Number(event.target.value))}\n />\n \n\n \n

\n grove size\n {grove}\n

\n setGrove(Number(event.target.value))}\n />\n \n\n \n

\n branch detail\n {detail}\n

\n setDetail(Number(event.target.value))}\n />\n \n\n \n

\n breeze\n {breeze}\n

\n setBreeze(Number(event.target.value))}\n />\n \n\n

\n season palette\n

\n {([\"spring\", \"summer\", \"amber\", \"winter\"] as Season[]).map((\n option,\n ) => (\n setSeason(option)}\n className={`rounded-full border px-4 py-2 text-sm transition ${\n season === option\n ? \"border-[color:var(--frame)] bg-white/80 text-[color:var(--ink)]\"\n : \"border-[color:var(--panel-edge)] bg-white/35 text-[color:var(--muted)] hover:bg-white/65\"\n }`}\n >\n [{option}]\n \n ))}\n

\n\n

\n algorithm sketch\n

\n{`root(seed)\n  -> place horizon + water + path\n  -> distribute trunk anchors by depth\n  -> recurse branch(angle, length, depth)\n  -> puff canopy clusters near tips\n  -> apply seasonal glyph palette\n  -> loop breeze offset every 1400ms`}\n

\n Layering keeps back trees readable instead of becoming a\n single noisy blob.\n

\n The pond, path, clouds, and petals are separate passes, so the\n viewport feels composed.\n

\n\n

\n \n

\n\n

\n branch passes\n

{scene.stats.branches}

\n water span\n

{scene.stats.waterline}

\n wind loop\n

\n {Math.abs(Math.sin(frame * 0.8) * breeze).toFixed(1)}\n

\n \n );\n}",[],[124,171],"cd91e854-18c1-11f1-94a1-42dde27851f2","cn.ts","cb1bd5e4-18c1-11f1-859d-42dde27851f2","c5214340-18c1-11f1-8cd5-42dde27851f2",23,["D",1772735608167],"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}",[],[124,187,179],"utils","c6a01354-18c1-11f1-bf1f-42dde27851f2",20,["D",1772735596517],[144],[124,187],["D",1772735539797],[143,145,146,147],[124],["D",1772734460077],{"_16":17,"_80":76},{"_16":17,"_74":-5,"_75":76,"_32":33,"_77":78,"_79":26},{"_62":63,"_20":64,"_18":65,"_66":19,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":21,"_73":17},"ctx",{"_55":-5,"_101":233,"_234":235,"_236":237,"_238":26,"_239":26,"_240":26,"_241":114,"_242":-5,"_243":-7,"_244":-7,"_245":39,"_246":26,"_247":26,"_248":-5,"_249":26,"_250":26,"_251":26,"_252":-5},"ENV",{"_204":205,"_206":207,"_208":64,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search