JIT Scroll-Morphing SVG Text

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_189":190,"_191":192},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_71":140,"_40":-7,"_141":-5,"_17":142,"_143":144,"_145":146,"_147":148,"_149":150,"_151":-5,"_152":153,"_154":155,"_156":48,"_157":158,"_159":26,"_160":-5,"_161":-5,"_162":163},"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","real","name","typo2","branchName","main","project",{"_32":59,"_13":14,"_34":101,"_46":-5,"_102":48,"_49":50,"_103":50,"_104":-5,"_105":-5,"_106":107,"_108":79,"_109":26,"_110":26,"_111":-5,"_112":113,"_53":114,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_128":129,"_130":131,"_132":28,"_47":48},"ahead",7,"behind",6,"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","302918ac-591e-11f0-8592-f69ea79377d9","createdAt",["D",1751664664020],"updatedAt",["D",1751864597999],"projectId","30286786-591e-11f0-8592-f69ea79377d9","version",85,"forkedBranchId","forkedBranchVersion","lockfileKey","1764723769971-esm.town_v_join_typo@85-main","deletedAt","isOwned",false,"privacy","public","userHandle","join","orgId","337daaab-8c3d-4b0e-843a-d7fe5ed4748b","projectName","typo",8,"b5f64372-5a2e-11f0-8be0-f69ea79377d9","b5f38bb4-5a2e-11f0-8be0-f69ea79377d9",79,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[],"deleted",[],"modified",[70],{"_71":72,"_73":74,"_75":76},"path","main.tsx","targetFile",{"_32":94,"_13":72,"_78":95,"_80":-5,"_81":33,"_82":60,"_83":48,"_34":96,"_40":97,"_85":86,"_87":98,"_66":48,"_89":56,"_90":-7,"_71":99,"_92":100},"sourceFile",{"_32":77,"_13":72,"_78":79,"_80":-5,"_81":58,"_82":57,"_83":26,"_34":84,"_40":20,"_85":86,"_87":88,"_66":48,"_89":-5,"_90":-7,"_71":91,"_92":93},"5a4c9072-5a41-11f0-b902-f69ea79377d9","fileId","db055e5a-1209-43a7-acd3-729cd7441782","parentId","branchId","branchVersion","latest",["D",1751789718275],"fileType","http","content","// @ts-ignore\nimport { OpenAI } from \"https://esm.town/v/std/openai?v=4\";\nimport { Hono } from \"npm:hono@4.4.12\";\n\n// --- AI BEHAVIORAL GUIDELINES ---\nconst GENERATION_STYLE_GUIDE = `\nAs the SVG Path Generator AI, you are an expert in converting text to precise SVG path data.\nYour responses must STRICTLY adhere to the specified JSON format.\nYou will receive a text string and a desired font style.\nGenerate a single SVG path data string that represents the text.\nThe path data MUST contain approximately 200 segments (commands like M, L, C, Z) to ensure smooth morphing. If a letter naturally has fewer segments, add invisible or tiny segments to reach the count.\nEnsure the text is centered within a 500x300 viewBox.\nDO NOT include any conversational filler. Respond ONLY with the JSON object.\n`;\n\nconst SVG_PATH_PROMPT = (text: string, fontStyle: string) => `\nGenerate the SVG path data for the text \"${text}\" using a ${fontStyle} style.\nThe text should be centered horizontally and vertically within a 500x300 SVG viewBox.\nThe resulting path data should be a single string suitable for the 'd' attribute of an element.\nIMPORTANT: The path should have approximately 200 segments/commands (M, L, C, Z) to ensure consistent morphing.\nRespond STRICTLY with a single, minified JSON object: { \"pathData\": \"M...Z\" }.\n`;\n\n// --- HTML & FRONTEND ---\nfunction generateHtml(sourceUrl: string) {\n // IMPORTANT: This now points to the same val, but to the /paths endpoint\n const JIT_CONVERTER_URL = `${sourceUrl}paths`;\n\n return `\n\n\n \n \n JIT Scroll-Morphing SVG Text\n \n \n\n\n

\n \n \n\n \n

\n\n \n\n`;\n}\n\n// Initialize Hono app\nconst app = new Hono();\n\n// Route for serving the HTML page\napp.get(\"/\", (c) => {\n // Ensure sourceUrl always ends with a '/' for correct relative path resolution\n const sourceUrl = `${c.req.url.split(\"?\")[0].replace(/\\/$/, \"\")}/`;\n return c.html(generateHtml(sourceUrl));\n});\n\n// Route for generating SVG path data via AI\napp.get(\"/paths\", async (c) => {\n const text = c.req.query(\"text\");\n const fontStyle = c.req.query(\"fontStyle\");\n\n if (!text || !fontStyle) {\n return c.json({ error: \"Missing 'text' or 'fontStyle' query parameter.\" }, 400);\n }\n\n try {\n const openai = new OpenAI();\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\", // Using gpt-4o for better spatial reasoning and precise output\n messages: [\n { role: \"system\", content: GENERATION_STYLE_GUIDE },\n { role: \"user\", content: SVG_PATH_PROMPT(text, fontStyle) },\n ],\n response_format: { type: \"json_object\" },\n temperature: 0.2, // Keep temperature low for deterministic output\n });\n\n const content = completion.choices[0].message.content;\n const parsedContent = JSON.parse(content || \"{}\");\n\n if (!parsedContent || typeof parsedContent.pathData !== \"string\") {\n // Demand Justification: If AI fails to return valid structure, log/expose\n const reason = parsedContent.reason || \"AI did not return expected 'pathData' string.\";\n throw new Error(`Invalid AI response: ${reason}. Raw: ${content}`);\n }\n\n return c.json({ pathData: parsedContent.pathData });\n } catch (error: any) {\n console.error(\"AI Path Generation Error:\", error);\n return c.json({ error: error.message || \"Failed to generate SVG path data.\" }, 500);\n }\n});\n\n// Export the Hono app's fetch handler\nexport default app.fetch;","label","children",[72],"contentHash","bc70f32cce22262dc88f0c993e48b8b4fe2d46fb49c7c2c5ae52efaaa6033021","5426fab8-5a26-11f0-93f1-f69ea79377d9","302fd2b4-591e-11f0-8592-f69ea79377d9",["D",1751778111546],78,"// @ts-ignore\nimport { OpenAI } from \"https://esm.town/v/std/openai?v=4\";\n\n// --- AI BEHAVIORAL GUIDELINES & PROMPT ---\n\nconst GENERATION_STYLE_GUIDE =\n \"As the AI design expert, you must adopt the persona of a sophisticated and meticulous creative technologist. Your vocabulary should be precise and professional. The objective is to produce output that is indistinguishable from that of a human expert in the field of digital design and typography.\";\n\nconst STYLE_GENERATOR_PROMPT = `\nYou are a master of SVG filters, a creative technologist specializing in generating complex, visually striking 3D text effects. Your persona is that of a meticulous, professional designer who uses precise and sophisticated language.\n\nThe user requires a sequence of five distinct visual styles to serve as keyframes for a fluid animation. Your task is to generate this set of 5 presets. The styles should be thematically related, as if progressing through a narrative (e.g., dawn to day to dusk, or metal heating to a molten state).\n\nYou MUST respond ONLY with a single, minified JSON object.\nThe root object must have a single key: \"styles\".\nThe value of \"styles\" must be an array of exactly 5 style objects.\n\nEach style object must have the following keys:\n- \"name\": A short, evocative name for the style (e.g., \"First Light\", \"Golden Hour\", \"Twilight\").\n- \"faceColor\": An array of three numbers [R, G, B], values 0 to 1.\n- \"extrudeColor1\": An array of three numbers [R, G, B], values 0 to 1.\n- \"extrudeColor2\": An array of three numbers [R, G, B], values 0 to 1.\n- \"shadowOpacity\": A number between 0.1 and 0.5.\n\nExample of a single style object within the array:\n{\n \"name\": \"Cool Dawn\",\n \"faceColor\": [0.8, 0.9, 0.95],\n \"extrudeColor1\": [0.5, 0.6, 0.7],\n \"extrudeColor2\": [0.2, 0.3, 0.4],\n \"shadowOpacity\": 0.3\n}\n\nGenerate a cohesive yet diverse palette of 5 styles. Adhere to the principles of high-quality design. Your response must be structured, clear, and ready for programmatic use without any conversational text or explanations.\n${GENERATION_STYLE_GUIDE}\n`;\n\n// --- HTML, CSS, & CLIENT-SIDE JAVASCRIPT ---\n\nfunction generateHtml(sourceUrl: string) {\n return `\n\n\n \n \n Generative 3D Scrolling Text\n \n\n\n

\n\n \n\n \n\n`;\n}\n\n// --- VAL TOWN SERVER-SIDE LOGIC ---\n\nexport default async function(req: Request) {\n const url = new URL(req.url);\n const action = url.searchParams.get(\"action\");\n\n if (req.method === \"POST\" && action === \"suggestStyles\") {\n try {\n const openai = new OpenAI();\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [{\n role: \"system\",\n content: STYLE_GENERATOR_PROMPT,\n }],\n response_format: { type: \"json_object\" },\n });\n\n const content = completion.choices[0].message.content;\n JSON.parse(content);\n return new Response(content, { headers: { \"Content-Type\": \"application/json\" } });\n } catch (error) {\n console.error(\"AI Style Generation Error:\", error);\n return new Response(\n JSON.stringify({\n error: \"The AI design assistant is currently unavailable.\",\n reason: error.message,\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n const sourceUrl = `https://${url.hostname}${url.pathname}`;\n return new Response(generateHtml(sourceUrl), { headers: { \"Content-Type\": \"text/html\" } });\n}",[72],"e7767408ddcb34f246983444c8fc2955c180faa5615d51175e359d79cc5d6493",["D",1751781711589],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","63f04ac0-562b-11f0-a849-2f0fd58d5bdc","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"0abcaa5c-2531-4e34-967b-6f68bd9904a8","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_139":135},"org",{"_11":12,"_133":-5,"_134":135,"_106":107,"_136":137,"_138":48},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ6Rng5NEh2b3dPMmVwbThwVm1keXA3aTk5bCJ9","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":185,"_46":-5,"_102":48,"_49":50,"_103":50,"_104":-5,"_105":-5,"_106":107,"_108":79,"_109":26,"_110":26,"_111":-5,"_112":113,"_53":114,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_128":186,"_130":187,"_132":188,"_47":48},"tree",[182],"files",[182],"counts",{"_171":113,"_172":173,"_174":173,"_175":176,"_177":178},"contents",[168],"file","upstreamProject",{"_32":39,"_13":56,"_104":-5,"_105":-5,"_49":50,"_128":166},"upstreamBranch",{"_32":33,"_34":164,"_36":165,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1751664664020],["D",1751864597999],{"_11":52,"_139":167},"https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4RElTYm91QXRtUWhBeEdMM1RYYUVmMVVwYSJ9",{"_32":77,"_13":72,"_78":79,"_80":-5,"_81":58,"_82":57,"_83":26,"_34":169,"_40":20,"_85":86,"_87":88,"_66":48,"_89":-5,"_71":170},["D",1751789718275],[72],"pulls","branches",1,"forks","envVars",{"_179":113,"_181":113},"connections",{"_179":113,"_180":113},"count","unfilledCount","emptyCount",{"_32":77,"_13":72,"_78":79,"_80":-5,"_81":58,"_82":57,"_83":26,"_34":84,"_40":20,"_85":86,"_87":88,"_66":48,"_89":-5,"_90":183,"_71":184},[],[72],["D",1751781711589],{"_11":12,"_139":135},{"_11":12,"_133":-5,"_134":135,"_106":107,"_136":137,"_138":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_128":-5,"_161":222,"_223":224,"_225":226,"_227":48,"_228":48,"_229":48,"_230":26,"_231":-5,"_232":-7,"_233":-7,"_234":113,"_235":48,"_236":48,"_237":-5,"_238":48,"_239":48,"_240":48,"_241":-5},"ENV",{"_193":194,"_195":196,"_197":16,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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"]

Compare

Mergereal/mainintojoin/main

Hmain.tsx+200-314