🧞‍♂️ Magic Button Race

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_226":227,"_228":229},"routes/_app.x.$handle.$name",{"_99":98,"_32":44,"_107":85,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":120,"_121":122,"_123":25,"_124":125,"_126":57,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",4,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","index.html","latestPath","fileId","8bcf89b3-53de-49af-be59-e0df70156a2a","name","fileType","content","\n\n \n \n 🧞‍♂️ Magic Button Race\n \n \n \n \n

🧞‍♂️✨ Magic Button: AI Coding Race

\n\n

Prompt

\n Make a single button that does something magical, strange, or\n oddly specific.\n

\n\n

When clicked, it might:

Summon a new language into existence
Turn your deepest secret into pixel art
Change the color of the moon (or just the page background)
Generate a new conspiracy theory
Ask ChatGPT for its favorite pasta shape, but only on Tuesdays

\n\n

Let your AI tools take the wheel:

Ask it to name the button
Ask it to invent the behavior
Ask it to write the CSS
Ask it to generate sound effects, visuals, or names

\n\n

\n 🗣️ Pro tip: The less you do manually, the better. Let AI\n get weird for you.\n

\n\n

🧪 Bonus parameters to consider:

A short loading animation before the magic happens
An unexpected second click behavior
A poetic or mysterious tooltip
A voice or sound cue
A themed name like “The Button of Eternal Regret” or “YESMAAM”

\n\n

🏁 Judging Matrix

(Very serious, extremely scientific, don’t overthink it)

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Category	Max Points	Explanation
🧠 Used AI for most of it	🧠🧠🧠🧠🧠	\n Did you hand off creativity or implementation to AI? Did it surprise\n you?\n
🌈 Got weird with the idea	🌈🌈🌈🌈🌈	Was it unexpected, surreal, poetic, funny, or oddly moving?
⚙️ Actually kinda worked?	⚙️⚙️⚙️⚙️⚙️	Did the button do something real (or convincingly fake)?
💣 Gloriously failed?	💣💣💣💣💣	Failure is beautiful. Especially with style.
🎤 Demo was a vibe	🎤🎤🎤🎤🎤	Was the final demo fun, memorable, or had great energy?
🐙 Broke the rules in a good way	🐙🐙🐙🐙🐙	Bent the prompt, redefined the goal, made it your own.
😵‍💫 Induced existential angst	😵‍💫😵‍💫😵‍💫😵‍💫😵‍💫	\n Did your user of AI raise unsettling questions about life, meaning,\n or reality?\n

\n \n","\n\n \n \n 🧞‍♂️ Magic Button Race\n \n \n \n \n

🧞‍♂️✨ Magic Button: AI Coding Race

\n\n

Prompt

\n Make a single button that does something magical, strange, or\n oddly specific.\n

\n\n

When clicked, it might:

Summon a new language into existence
Turn your deepest secret into pixel art
Change the color of the moon (or just the page background)
Generate a new conspiracy theory
Ask ChatGPT for its favorite pasta shape, but only on Tuesdays

\n\n

Let your AI tools take the wheel:

Ask it to name the button
Ask it to invent the behavior
Ask it to write the CSS
Ask it to generate sound effects, visuals, or names

\n\n

\n 🗣️ Pro tip: The less you do manually, the better. Let AI\n get weird for you.\n

\n\n

🧪 Bonus parameters to consider:

A short loading animation before the magic happens
An unexpected second click behavior
A poetic or mysterious tooltip
A voice or sound cue
A themed name like “The Button of Eternal Regret” or “YESMAAM”

\n\n

🏁 Judging Matrix

(Very serious, extremely scientific, don’t overthink it)

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Category	Max Points	Explanation
🧠 Used AI for most of it	🧠🧠🧠🧠🧠	\n Did you hand off creativity or implementation to AI? Did it surprise\n you?\n
🌈 Got weird with the idea	🌈🌈🌈🌈🌈	Was it unexpected, surreal, poetic, funny, or oddly moving?
⚙️ Actually kinda worked?	⚙️⚙️⚙️⚙️⚙️	Did the button do something real (or convincingly fake)?
💣 Gloriously failed?	💣💣💣💣💣	Failure is beautiful. Especially with style.
🎤 Demo was a vibe	🎤🎤🎤🎤🎤	Was the final demo fun, memorable, or had great energy?
🐙 Broke the rules in a good way	🐙🐙🐙🐙🐙	Bent the prompt, redefined the goal, made it your own.
😵‍💫 Induced existential angst	😵‍💫😵‍💫😵‍💫😵‍💫😵‍💫	\n Did your user of AI raise unsettling questions about life, meaning,\n or reality?\n

\n \n \n 🚫 Don't click this button\n \n\n \n \n","createdAt",["D",1750280179140],"branchVersion","branchId","489ca1dc-4c86-11f0-8859-76b3cceeab13","id","489a193a-4c86-11f0-8859-76b3cceeab13","basic-html-starter",["D",1750280007557],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","97567c3b-8285-4589-880d-547c23383b76","pinnedFileId","0a482043-1ee6-46f4-ac36-739dd42fc6c6","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","112e17ac-118d-4072-aca6-a4ddc6b3970f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":53,"_103":104,"_105":25},"branch",{"_13":84,"_32":85,"_42":41,"_86":43,"_87":88,"_89":90,"_91":49,"_92":93,"_94":95,"_96":44,"_97":98},"isOwned",10,"main","projectId","forkedBranchId","064b1eea-4bcc-11f0-82b3-76b3cceeab13","forkedBranchVersion",7,"forkedProjectPrivacy","forkedProjectId","0647c0e2-4bcc-11f0-82b3-76b3cceeab13","forkedProjectOrgId","d4c1465f-a26b-47b2-8a0b-ca05c7c54d93","projectName","userHandle","ashryanio","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaG5kR0hRRTM0S1BSeXlIR2hCdjFqb1dTS3AifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":222,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":223,"_79":224,"_81":225,"_83":25},"tree",[197,198,199,200,201,202],"files",[197,198,199,200,201,202],"counts",{"_187":61,"_188":151,"_189":61,"_190":191,"_192":193},"contents",[141,142,143,144,145,146],"upstreamProject",{"_42":93,"_32":44,"_51":-5,"_52":-5,"_48":49,"_77":139},"upstreamBranch",{"_42":88,"_37":131,"_132":133,"_32":85,"_86":93,"_13":90,"_87":134,"_89":135,"_136":137,"_46":-5,"_83":25,"_48":49,"_97":138,"_62":95,"_96":44},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1750200009896],"updatedAt",["D",1750200237554],"7a3b261a-4186-11f0-ae9b-76b3cceeab13",67,"lockfileKey","1756746285626-esm.town_v_joestrouth1_basic-html-starter@7-main","joestrouth1",{"_99":138,"_106":140},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybGZPa05TM3k2bU5OUEpKR1hUVGlaNDZNZmoifQ",{"_42":181,"_32":182,"_30":183,"_150":-5,"_40":41,"_39":151,"_152":57,"_37":184,"_13":61,"_33":20,"_34":185,"_24":25,"_155":-5,"_27":186},{"_42":175,"_32":176,"_30":177,"_150":-5,"_40":41,"_39":151,"_152":57,"_37":178,"_13":61,"_33":20,"_34":179,"_24":25,"_155":-5,"_27":180},{"_42":171,"_32":28,"_30":31,"_150":-5,"_40":41,"_39":14,"_152":25,"_37":172,"_13":173,"_33":20,"_34":36,"_24":25,"_155":-5,"_27":174},{"_42":164,"_32":165,"_30":55,"_150":-5,"_40":41,"_39":151,"_152":57,"_37":166,"_13":61,"_33":167,"_34":168,"_24":25,"_155":169,"_27":170},{"_42":157,"_32":158,"_30":159,"_150":-5,"_40":41,"_39":151,"_152":57,"_37":160,"_13":61,"_33":161,"_34":162,"_24":25,"_155":-5,"_27":163},{"_42":147,"_32":148,"_30":149,"_150":-5,"_40":41,"_39":151,"_152":57,"_37":153,"_13":61,"_33":20,"_34":154,"_24":25,"_155":-5,"_27":156},"48a4279a-4c86-11f0-8859-76b3cceeab13","style.css","da03f319-65d9-4779-a11c-ad34c4e337f5","parentId",1,"latest",["D",1750280007557],"* {\n margin: 0;\n box-sizing: border-box;\n}\nbody {\n font-family: system-ui;\n margin: 2em;\n}","label",[148],"48a424a2-4c86-11f0-8859-76b3cceeab13","script.js","6132ec85-46ff-4915-afe6-c5416f0dc2af",["D",1750280007557],"script","import { SplatMesh } from \"@sparkjsdev/spark\";\nimport * as THREE from \"three\";\n\nconst scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);\nconst renderer = new THREE.WebGLRenderer();\nrenderer.setSize(window.innerWidth, window.innerHeight);\ndocument.body.appendChild(renderer.domElement);\n\nconst splatURL = \"https://sparkjs.dev/assets/splats/butterfly.spz\";\nconst butterfly = new SplatMesh({ url: splatURL });\nbutterfly.quaternion.set(1, 0, 0, 0);\nbutterfly.position.set(0, 0, -3);\nscene.add(butterfly);\n\nrenderer.setAnimationLoop(function animate(time) {\n renderer.render(scene, camera);\n butterfly.rotation.y += 0.01;\n});",[158],"48a4234e-4c86-11f0-8859-76b3cceeab13","main.tsx",["D",1750280007557],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);","ai-coding-race",[165],"aedc71fc-4c86-11f0-8a45-76b3cceeab13",["D",1750280179140],3,[28],"48a41ad4-4c86-11f0-8859-76b3cceeab13","favicon.svg","bd2c0f52-0573-4ab9-9143-0b30aca06391",["D",1750280007557],"",[176],"48a4123c-4c86-11f0-8859-76b3cceeab13","README.md","05b194ca-87a9-47e2-b792-26f94d7583f8",["D",1750280007557],"# Welcome to Val Town\n\nVal Town is the simplest way to get code running in the cloud.\n\nThis is a basic HTML starter template.\n\n1. Click `Remix` on this val to get a copy of it\n2. Click `main.tsx` to view the website\n3. Saves to any file will instantly deploy\n\n### ← main.tsx\n\nThis HTTP server hosts all of the other files in this val.\n\nTo view your site in a new tab, click on the `...` menu of `main.tsx` to copy\nyour live HTTP endpoint.\n\n### ← README.md\n\nThat's this file, where you can tell people what your cool website does and how\nyou built it.\n\n### ← index.html\n\nWhere you'll write the content of your website.\n\n### ← style.css\n\nCSS files add styling rules to your content.\n\n### ← script.js\n\nIf you're feeling fancy you can add interactivity to your site with JavaScript.\n\nIf you want more interactivity, check out this\n[React starter](https://www.val.town/x/std/reactHonoStarter).\n\n### ← favicon.svg\n\nThe icon that shows up in the brower tab. Tip: AIs are pretty good at writing\nSVG favicons.\n\n---\n\nThis template was inspired by https://glitch.new/blank.",[182],"pulls","branches","forks","envVars",{"_194":61,"_196":61},"connections",{"_194":61,"_195":61},"count","unfilledCount","emptyCount",{"_42":181,"_32":182,"_30":183,"_150":-5,"_40":41,"_39":151,"_152":57,"_37":219,"_13":61,"_33":20,"_34":185,"_24":25,"_155":-5,"_204":220,"_27":221},{"_42":175,"_32":176,"_30":177,"_150":-5,"_40":41,"_39":151,"_152":57,"_37":216,"_13":61,"_33":20,"_34":179,"_24":25,"_155":-5,"_204":217,"_27":218},{"_42":171,"_32":28,"_30":31,"_150":-5,"_40":41,"_39":14,"_152":25,"_37":213,"_13":173,"_33":20,"_34":36,"_24":25,"_155":-5,"_204":214,"_27":215},{"_42":164,"_32":165,"_30":55,"_150":-5,"_40":41,"_39":151,"_152":57,"_37":210,"_13":61,"_33":167,"_34":168,"_24":25,"_155":169,"_204":211,"_27":212},{"_42":157,"_32":158,"_30":159,"_150":-5,"_40":41,"_39":151,"_152":57,"_37":207,"_13":61,"_33":161,"_34":162,"_24":25,"_155":-5,"_204":208,"_27":209},{"_42":147,"_32":148,"_30":149,"_150":-5,"_40":41,"_39":151,"_152":57,"_37":203,"_13":61,"_33":20,"_34":154,"_24":25,"_155":-5,"_204":205,"_27":206},["D",1750280007557],"children",[],[148],["D",1750280007557],[],[158],["D",1750280007557],[],[165],["D",1750280179140],[],[28],["D",1750280007557],[],[176],["D",1750280007557],[],[182],["D",1750280007557],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":53,"_103":104,"_105":25},{"_13":84,"_32":85,"_42":41,"_86":43,"_87":88,"_89":90,"_91":49,"_92":93,"_94":95,"_96":44,"_97":98},"ctx",{"_77":-5,"_128":259,"_260":261,"_262":263,"_264":25,"_265":25,"_266":25,"_267":57,"_268":-5,"_269":-7,"_270":-7,"_271":61,"_272":25,"_273":25,"_274":-5,"_275":25,"_276":25,"_277":25,"_278":-5},"ENV",{"_230":231,"_232":233,"_234":85,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]

Diff · v4