🪩

Let's Dance! 🕺💃

🎵 🎶 🎵 Now Playing: The Val Town Shuffle 🎵 🎶 🎵

\n \n \n \n \n

\n \n\n","label",[18],"pulls","branches","forks","envVars",{"_182":26,"_184":26},"connections",{"_182":26,"_183":26},"count","unfilledCount","emptyCount",{"_33":227,"_13":228,"_66":229,"_43":-5,"_35":36,"_168":118,"_169":95,"_37":230,"_39":40,"_68":21,"_171":231,"_69":24,"_173":-5,"_197":232,"_17":233},{"_33":219,"_13":220,"_66":221,"_43":-5,"_35":36,"_168":222,"_169":95,"_37":223,"_39":40,"_68":21,"_171":224,"_69":24,"_173":-5,"_197":225,"_17":226},{"_33":167,"_13":18,"_66":67,"_43":-5,"_35":36,"_168":75,"_169":95,"_37":216,"_39":40,"_68":21,"_171":172,"_69":24,"_173":-5,"_197":217,"_17":218},{"_33":209,"_13":210,"_66":93,"_43":-5,"_35":36,"_168":40,"_169":95,"_37":211,"_39":26,"_68":212,"_171":213,"_69":24,"_173":-5,"_197":214,"_17":215},{"_33":200,"_13":201,"_66":202,"_43":-5,"_35":36,"_168":203,"_169":95,"_37":204,"_39":40,"_68":205,"_171":206,"_69":24,"_173":-5,"_197":207,"_17":208},{"_33":191,"_13":192,"_66":193,"_43":-5,"_35":36,"_168":194,"_169":95,"_37":195,"_39":40,"_68":21,"_171":196,"_69":24,"_173":-5,"_197":198,"_17":199},"2d97e04c-f2f8-4b22-9d46-681c411f473d","style.css","019f14e7-768b-71ba-9a9d-20e13b59c8ce",3,["D",1782762168440],"/* The hottest dance floor on the internet */\n\nbody {\n margin: 0;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-family: system-ui, sans-serif;\n overflow-x: hidden;\n background: linear-gradient(135deg, #1a0033, #0d1b2a, #1b0033);\n background-size: 200% 200%;\n animation: bg-shift 8s ease infinite;\n}\n\n@keyframes bg-shift {\n 0%, 100% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n}\n\nh1 {\n font-size: clamp(1.5rem, 5vw, 3rem);\n color: #fff;\n text-shadow: 0 0 20px #ff00ff, 0 0 40px #00ffff;\n margin: 1rem 0 0.5rem;\n text-align: center;\n z-index: 2;\n}\n\n/* Disco ball */\n#disco-ball {\n position: fixed;\n top: 30px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 4rem;\n z-index: 3;\n animation: spin 3s linear infinite, bob 2s ease-in-out infinite alternate;\n filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));\n}\n\n@keyframes spin {\n from { transform: translateX(-50%) rotateY(0deg); }\n to { transform: translateX(-50%) rotateY(360deg); }\n}\n\n@keyframes bob {\n from { margin-top: 0; }\n to { margin-top: 10px; }\n}\n\n/* Disco light rays */\nbody::before {\n content: \"\";\n position: fixed;\n top: 0; left: 0;\n width: 100%; height: 100%;\n background:\n radial-gradient(circle at 20% 50%, rgba(255, 0, 128, 0.15), transparent 40%),\n radial-gradient(circle at 80% 50%, rgba(0, 255, 255, 0.15), transparent 40%),\n radial-gradient(circle at 50% 80%, rgba(255, 255, 0, 0.1), transparent 40%);\n pointer-events: none;\n z-index: 0;\n}\n\n/* Dance floor */\n#dance-floor {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 1rem;\n max-width: 900px;\n min-height: 300px;\n padding: 2rem;\n z-index: 1;\n}\n\n.dancer {\n font-size: clamp(2rem, 6vw, 4rem);\n animation: dance 0.6s ease-in-out infinite alternate;\n transition: transform 0.3s;\n cursor: pointer;\n user-select: none;\n display: inline-block;\n}\n\n.dancer:nth-child(3n) { animation-duration: 0.8s; animation-name: dance2; }\n.dancer:nth-child(3n+1) { animation-duration: 0.5s; animation-name: dance3; }\n.dancer:nth-child(4n) { animation-delay: 0.2s; }\n.dancer:nth-child(5n) { animation-delay: 0.1s; animation-name: dance2; }\n\n.dancer:hover {\n animation-play-state: paused;\n transform: scale(1.5) rotate(15deg);\n}\n\n@keyframes dance {\n 0% { transform: translateY(0) rotate(-5deg) scale(1); }\n 100% { transform: translateY(-30px) rotate(5deg) scale(1.1); }\n}\n\n@keyframes dance2 {\n 0% { transform: translateY(0) rotate(10deg) scaleX(1) scaleY(1); }\n 50% { transform: translateY(-15px) rotate(-10deg) scaleX(1.1) scaleY(0.9); }\n 100% { transform: translateY(-25px) rotate(15deg) scaleX(0.9) scaleY(1.1); }\n}\n\n@keyframes dance3 {\n 0% { transform: translateY(0) skewX(0deg); }\n 100% { transform: translateY(-20px) skewX(-10deg); }\n}\n\n/* Now playing marquee */\n#marquee {\n color: #ff00ff;\n font-size: 1.1rem;\n white-space: nowrap;\n overflow: hidden;\n width: 100%;\n max-width: 600px;\n text-shadow: 0 0 10px #ff00ff;\n margin: 1rem 0;\n z-index: 2;\n}\n\n#marquee {\n display: inline-block;\n animation: marquee 15s linear infinite;\n}\n\n@keyframes marquee {\n from { transform: translateX(100%); }\n to { transform: translateX(-100%); }\n}\n\n/* Controls */\n#controls {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n justify-content: center;\n padding: 1rem;\n z-index: 2;\n}\n\n#controls button {\n background: linear-gradient(135deg, #ff00ff, #00ffff);\n border: none;\n border-radius: 12px;\n padding: 0.6rem 1.2rem;\n font-size: 1rem;\n font-weight: bold;\n color: #1a0033;\n cursor: pointer;\n transition: transform 0.2s, box-shadow 0.2s;\n box-shadow: 0 4px 15px rgba(255, 0, 255, 0.4);\n}\n\n#controls button:hover {\n transform: translateY(-2px) scale(1.05);\n box-shadow: 0 6px 20px rgba(0, 255, 255, 0.5);\n}\n\n#controls button:active {\n transform: translateY(0) scale(0.98);\n}\n\n/* Responsive */\n@media (max-width: 600px) {\n #disco-ball { font-size: 2.5rem; }\n #dance-floor { padding: 1rem; gap: 0.5rem; }\n}\n","children",[],[192],"9d2f8ae6-d3db-4f6b-82b4-ed382de99d6e","script.js","019f14e7-768b-71ba-9a9d-1c16bbbff930",4,["D",1782762178618],"script","// Dance Floor — interactive dancing emoji\n\nconst DANCERS = [\n \"🕺\", \"💃\", \"🤳\", \"👯\", \"🙌\", \"🤩\", \"😎\", \"🥳\",\n \"🎶\", \"🎵\", \"✨\", \"💥\", \"🔥\", \"⭐\", \"💫\", \"🌟\",\n \"🪩\", \"🎧\", \"🎤\", \"🥁\", \"🎸\", \"🎹\", \"🎺\", \"🎷\",\n \"😂\", \"🤯\", \"😍\", \"🫶\", \"👏\", \"🤟\", \"👋\", \"💪\",\n];\n\nconst VIBES = [\n { name: \"Disco\", bg: \"linear-gradient(135deg, #1a0033, #0d1b2a, #1b0033)\", glow: \"#ff00ff\", glow2: \"#00ffff\" },\n { name: \"Sunset\", bg: \"linear-gradient(135deg, #2d1b69, #6b2d5c, #c2185b)\", glow: \"#ff6b6b\", glow2: \"#ffd93d\" },\n { name: \"Ocean\", bg: \"linear-gradient(135deg, #001f3f, #003d5b, #002642)\", glow: \"#00d4ff\", glow2: \"#7dd3fc\" },\n { name: \"Forest Rave\", bg: \"linear-gradient(135deg, #0d2818, #1a3c2a, #0d2818)\", glow: \"#00ff88\", glow2: \"#a3ff00\" },\n { name: \"Candy\", bg: \"linear-gradient(135deg, #ff69b4, #ffb6c1, #dda0dd)\", glow: \"#ff1493\", glow2: \"#ffffff\" },\n { name: \"Vaporwave\", bg: \"linear-gradient(135deg, #1a0d2e, #2d1b4e, #0d1b2a)\", glow: \"#ff71ce\", glow2: \"#01cdfe\" },\n];\n\nconst floor = document.getElementById(\"dance-floor\");\nconst speedUpBtn = document.getElementById(\"speed-up\");\nconst slowDownBtn = document.getElementById(\"slow-down\");\nconst addDancerBtn = document.getElementById(\"add-dancer\");\nconst changeVibeBtn = document.getElementById(\"change-vibe\");\nconst marquee = document.getElementById(\"marquee\");\n\nlet speedMultiplier = 1;\nlet vibeIndex = 0;\nlet dancerCount = 12;\n\nfunction pickDancer() {\n return DANCERS[Math.floor(Math.random() * DANCERS.length)];\n}\n\nfunction renderDancers() {\n floor.innerHTML = \"\";\n for (let i = 0; i < dancerCount; i++) {\n const span = document.createElement(\"span\");\n span.className = \"dancer\";\n span.textContent = pickDancer();\n span.addEventListener(\"click\", () => {\n span.textContent = pickDancer();\n span.style.transform = \"scale(2) rotate(360deg)\";\n setTimeout(() => { span.style.transform = \"\"; }, 300);\n });\n floor.appendChild(span);\n }\n}\n\nfunction applySpeed() {\n const dancers = document.querySelectorAll(\".dancer\");\n dancers.forEach((d) => {\n const computed = window.getComputedStyle(d);\n const baseDuration = parseFloat(computed.animationDuration);\n if (baseDuration > 0) {\n const newDur = (baseDuration / speedMultiplier).toFixed(2);\n d.style.animationDuration = newDur + \"s\";\n }\n });\n}\n\nfunction applyVibe() {\n const vibe = VIBES[vibeIndex];\n document.body.style.background = vibe.bg;\n document.body.style.backgroundSize = \"200% 200%\";\n const h1 = document.querySelector(\"h1\");\n if (h1) h1.style.textShadow = `0 0 20px ${vibe.glow}, 0 0 40px ${vibe.glow2}`;\n marquee.style.color = vibe.glow;\n marquee.style.textShadow = `0 0 10px ${vibe.glow}`;\n changeVibeBtn.textContent = `🎭 ${vibe.name}`;\n}\n\nspeedUpBtn.addEventListener(\"click\", () => {\n speedMultiplier = Math.min(speedMultiplier * 1.5, 10);\n applySpeed();\n});\n\nslowDownBtn.addEventListener(\"click\", () => {\n speedMultiplier = Math.max(speedMultiplier / 1.5, 0.1);\n applySpeed();\n});\n\naddDancerBtn.addEventListener(\"click\", () => {\n dancerCount = Math.min(dancerCount + 4, 48);\n renderDancers();\n applySpeed();\n});\n\nchangeVibeBtn.addEventListener(\"click\", () => {\n vibeIndex = (vibeIndex + 1) % VIBES.length;\n applyVibe();\n});\n\n// Init\nrenderDancers();\napplyVibe();\n\n// Periodically shuffle dancers for extra chaos\nsetInterval(() => {\n const dancers = document.querySelectorAll(\".dancer\");\n if (dancers.length === 0) return;\n const lucky = dancers[Math.floor(Math.random() * dancers.length)];\n lucky.textContent = pickDancer();\n lucky.style.transform = \"scale(1.8) rotate(\" + (Math.random() > 0.5 ? \"360\" : \"-360\") + \"deg)\";\n setTimeout(() => { lucky.style.transform = \"\"; }, 400);\n}, 2000);\n\nconsole.log(\"🕺 Dance floor initialized — let's boogie! 🕺\");\n",[],[201],"7912a51a-d00b-475e-8f08-72348e5b5416","main.tsx",["D",1782762141230],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();",[],[210],["D",1782762150625],[],[18],"ce09c2ac-9ca2-41f2-b567-276350a53a88","favicon.svg","019f14e7-768b-71ba-9a9d-10536590d80e",5,["D",1782762182446],"\n",[],[220],"c6573f1c-4a5c-4868-a853-8c393be96988","README.md","019f14e7-768a-707d-9da4-f8450a466fb5",["D",1782762184712],"# 🕺 Dance Floor\n\nA val that dances! Animated emoji busting moves on a neon dance floor with a spinning disco ball.\n\n## Features\n\n- 🪩 Spinning disco ball\n- 💃 12+ dancing emoji with 3 different dance animations\n- 🎭 6 vibe presets (Disco, Sunset, Ocean, Forest Rave, Candy, Vaporwave)\n- ⚡ Speed up / slow down the dancers\n- ➕ Add more dancers (up to 48)\n- 🎵 Scrolling now-playing marquee\n- 🌈 Animated gradient background with light rays\n- 📱 Responsive — works on mobile\n\n## How it works\n\n- `main.tsx` — static HTTP server hosting the files\n- `index.html` — page structure\n- `style.css` — all the CSS animations (dance moves, disco ball spin, gradient shifts)\n- `script.js` — interactivity (dancer generation, speed control, vibe switching)\n",[],[228],["D",1782762141230],{"_11":12,"_133":72},{"_11":12,"_129":-5,"_71":72,"_30":70,"_130":131,"_132":24},{"_39":118,"_13":16,"_33":36,"_119":82,"_120":63,"_121":64,"_122":86,"_123":124,"_125":126,"_127":14,"_128":12},"ctx",{"_52":-5,"_154":271,"_272":273,"_274":275,"_276":24,"_277":24,"_278":24,"_279":95,"_280":-5,"_281":-7,"_282":-7,"_283":26,"_284":24,"_285":24,"_286":-5,"_287":24,"_288":24,"_289":24,"_290":-5},"ENV",{"_242":243,"_244":245,"_246":16,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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"]

History · index.html