Cage Corner Watch

\n \n Show stats\n \n\n \n\n

CAGECAST 2003

\n \n

\n\n \n \n\n","label",[18],"pulls","branches","forks","envVars",{"_165":26,"_167":26},"connections",{"_165":26,"_166":26},"count","unfilledCount","emptyCount",{"_33":209,"_13":210,"_62":211,"_43":-5,"_35":36,"_150":212,"_151":91,"_37":213,"_39":26,"_64":21,"_154":214,"_65":24,"_156":-5,"_179":215,"_17":216},{"_33":200,"_13":201,"_62":202,"_43":-5,"_35":36,"_150":203,"_151":91,"_37":204,"_39":153,"_64":205,"_154":206,"_65":24,"_156":-5,"_179":207,"_17":208},{"_33":192,"_13":193,"_62":194,"_43":-5,"_35":36,"_150":195,"_151":91,"_37":196,"_39":26,"_64":21,"_154":197,"_65":24,"_156":-5,"_179":198,"_17":199},{"_33":149,"_13":18,"_62":63,"_43":-5,"_35":36,"_150":71,"_151":91,"_37":189,"_39":153,"_64":21,"_154":155,"_65":24,"_156":-5,"_179":190,"_17":191},{"_33":182,"_13":183,"_62":89,"_43":-5,"_35":36,"_150":153,"_151":91,"_37":184,"_39":26,"_64":185,"_154":186,"_65":24,"_156":14,"_179":187,"_17":188},{"_33":174,"_13":175,"_62":176,"_43":-5,"_35":36,"_150":114,"_151":91,"_37":177,"_39":153,"_64":21,"_154":178,"_65":24,"_156":-5,"_179":180,"_17":181},"5d3c4f7a-8609-4d6b-b532-c471a7ddfaed","styles.css","84cd1262-6446-11f1-b160-1607ee4eb77e",["D",1784824834006],":root {\n color-scheme: dark;\n --bg: #020403;\n --panel: rgba(0, 19, 14, 0.82);\n --panel-border: rgba(105, 255, 202, 0.34);\n --text: #dfffea;\n --muted: #63d89f;\n --accent: #ffea63;\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody {\n height: 100%;\n margin: 0;\n}\n\nbody {\n overflow: hidden;\n background:\n radial-gradient(circle at 50% 50%, rgba(47, 255, 151, 0.1), transparent 34rem),\n linear-gradient(135deg, #020403 0%, #07120e 48%, #010201 100%);\n color: var(--text);\n font-family: \"Lucida Console\", Monaco, \"Courier New\", monospace;\n}\n\nbody::before,\nbody::after {\n position: fixed;\n inset: 0;\n z-index: 4;\n pointer-events: none;\n content: \"\";\n}\n\nbody::before {\n /* Horizontal scanlines sit above the scene and flicker independently. */\n background:\n repeating-linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.08) 0,\n rgba(255, 255, 255, 0.08) 1px,\n rgba(0, 0, 0, 0.18) 2px,\n rgba(0, 0, 0, 0.18) 4px\n );\n mix-blend-mode: overlay;\n opacity: 0.48;\n animation: scanline-flicker 1.8s steps(2, end) infinite;\n}\n\nbody::after {\n /* The vignette and side color wash imply a curved CRT glass surface. */\n background:\n radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.32) 75%, rgba(0, 0, 0, 0.78) 100%),\n linear-gradient(90deg, rgba(255, 0, 0, 0.06), transparent 17%, transparent 83%, rgba(0, 70, 255, 0.06));\n box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.9);\n}\n\n.screen,\n.stage {\n width: 100%;\n height: 100%;\n}\n\n.screen {\n position: fixed;\n top: 50%;\n left: 50%;\n width: min(100vw, calc(100vh * 4 / 3));\n height: min(100vh, calc(100vw * 3 / 4));\n overflow: hidden;\n transform: translate(-50%, -50%);\n}\n\n.stage {\n position: absolute;\n inset: 0;\n overflow: hidden;\n border-radius: 2.5vw;\n box-shadow: inset 0 0 120px rgba(0, 255, 136, 0.12);\n}\n\n.crt-badge {\n position: absolute;\n right: 18px;\n bottom: 16px;\n z-index: 3;\n color: rgba(223, 255, 234, 0.72);\n font-size: 0.78rem;\n font-weight: 700;\n text-shadow:\n 1px 0 rgba(255, 0, 80, 0.46),\n -1px 0 rgba(0, 190, 255, 0.42),\n 0 0 10px rgba(95, 255, 178, 0.72);\n}\n\n.stats-toggle {\n position: absolute;\n z-index: 3;\n top: 16px;\n left: 16px;\n padding: 8px 11px;\n border: 1px solid var(--panel-border);\n border-radius: 4px;\n background: var(--panel);\n color: var(--muted);\n font: inherit;\n font-size: 0.72rem;\n font-weight: 700;\n text-transform: uppercase;\n cursor: pointer;\n box-shadow: 0 0 12px rgba(52, 255, 166, 0.18);\n text-shadow: 0 0 8px rgba(95, 255, 178, 0.56);\n backdrop-filter: blur(4px);\n}\n\n.stats-toggle:hover {\n color: var(--text);\n border-color: var(--muted);\n}\n\n.stats-toggle:focus-visible {\n outline: 2px solid var(--accent);\n outline-offset: 3px;\n}\n\n.stats {\n position: absolute;\n z-index: 3;\n top: 58px;\n left: 16px;\n right: 16px;\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 1px;\n max-width: 780px;\n overflow: hidden;\n border: 1px solid var(--panel-border);\n border-radius: 4px;\n background: var(--panel);\n /* Layered glow and RGB text shadows sell the phosphor display treatment. */\n box-shadow:\n 0 0 18px rgba(52, 255, 166, 0.26),\n inset 0 0 22px rgba(52, 255, 166, 0.1);\n text-shadow:\n 1px 0 rgba(255, 0, 80, 0.4),\n -1px 0 rgba(0, 190, 255, 0.36),\n 0 0 8px rgba(95, 255, 178, 0.56);\n backdrop-filter: blur(4px);\n}\n\n.stats[hidden] {\n display: none;\n}\n\n.stats div {\n min-width: 0;\n padding: 12px 14px;\n background:\n linear-gradient(180deg, rgba(105, 255, 202, 0.08), transparent),\n rgba(0, 0, 0, 0.2);\n}\n\n.label {\n display: block;\n margin-bottom: 5px;\n color: var(--muted);\n font-size: 0.74rem;\n font-weight: 700;\n letter-spacing: 0;\n text-transform: uppercase;\n}\n\n.stats strong {\n display: block;\n overflow: hidden;\n color: var(--text);\n font-size: clamp(1rem, 2vw, 1.45rem);\n line-height: 1.1;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-transform: uppercase;\n}\n\n.cage-face {\n position: absolute;\n z-index: 1;\n width: clamp(92px, 13vw, 170px);\n height: auto;\n user-select: none;\n /* Offset red/cyan shadows approximate analog RGB channel separation. */\n filter:\n drop-shadow(3px 0 0 rgba(255, 0, 72, 0.34))\n drop-shadow(-3px 0 0 rgba(0, 198, 255, 0.3))\n drop-shadow(0 0 18px rgba(255, 238, 93, 0.38))\n drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5));\n will-change: transform;\n}\n\n#confetti {\n position: absolute;\n z-index: 2;\n inset: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n@media (max-width: 680px) {\n .stats {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .stats strong {\n font-size: 1rem;\n }\n}\n\n@keyframes scanline-flicker {\n 0%,\n 100% {\n opacity: 0.42;\n transform: translateY(0);\n }\n\n 50% {\n opacity: 0.54;\n transform: translateY(1px);\n }\n}\n","children",[],[175],"b0275ed5-36c9-4fce-a2a0-204ce3ee8f5c","main.ts",["D",1781038895331],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default staticHTTPServer(import.meta.url);\n",[],[183],["D",1784824745401],[],[18],"0810f0b2-cc51-4cea-bd33-28cf3036f879","cage-face.svg","a8cd66da-6446-11f1-8c5e-1607ee4eb77e",5,["D",1781039006758],"\n",[],[193],"b1b50b82-4481-43c9-b8f4-681f4c722586","app.js","9a1244ee-6446-11f1-a3f1-1607ee4eb77e",8,["D",1784824788314],"script","const stage = document.getElementById(\"stage\");\nconst face = document.getElementById(\"cageFace\");\nconst confettiCanvas = document.getElementById(\"confetti\");\nconst confettiContext = confettiCanvas.getContext(\"2d\");\nconst stats = document.getElementById(\"stats\");\nconst statsToggle = document.getElementById(\"statsToggle\");\n\nconst nearestDistanceEl = document.getElementById(\"nearestDistance\");\nconst bestDistanceEl = document.getElementById(\"bestDistance\");\nconst cornerHitsEl = document.getElementById(\"cornerHits\");\nconst nearestCornerEl = document.getElementById(\"nearestCorner\");\n\nstatsToggle.addEventListener(\"click\", () => {\n const shouldShow = stats.hidden;\n stats.hidden = !shouldShow;\n statsToggle.setAttribute(\"aria-expanded\", String(shouldShow));\n statsToggle.textContent = shouldShow ? \"Hide stats\" : \"Show stats\";\n});\n\n// All animation state lives here so resize handling, bounce physics, stats, and\n// confetti can stay deterministic inside a single requestAnimationFrame loop.\nconst state = {\n x: 37,\n y: 83,\n vx: 1.4,\n vy: 0.95,\n width: 140,\n height: 140,\n bestDistance: Infinity,\n cornerHits: 0,\n confetti: [],\n};\n\n// Corner coordinates are normalized. x/y values of 1 map to maxX/maxY after\n// accounting for the current rendered size of the face.\nconst corners = [\n { name: \"top left\", x: 0, y: 0 },\n { name: \"top right\", x: 1, y: 0 },\n { name: \"bottom left\", x: 0, y: 1 },\n { name: \"bottom right\", x: 1, y: 1 },\n];\n\nfunction resize() {\n const rect = face.getBoundingClientRect();\n state.width = rect.width || state.width;\n state.height = rect.height || state.height;\n state.x = Math.min(state.x, maxX());\n state.y = Math.min(state.y, maxY());\n\n const pixelRatio = window.devicePixelRatio || 1;\n confettiCanvas.width = Math.floor(stage.clientWidth * pixelRatio);\n confettiCanvas.height = Math.floor(stage.clientHeight * pixelRatio);\n confettiCanvas.style.width = `${stage.clientWidth}px`;\n confettiCanvas.style.height = `${stage.clientHeight}px`;\n confettiContext.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);\n}\n\nfunction maxX() {\n // The face's transform uses the top-left corner, so the furthest valid x\n // position is the viewport width minus the face width.\n return Math.max(0, stage.clientWidth - state.width);\n}\n\nfunction maxY() {\n return Math.max(0, stage.clientHeight - state.height);\n}\n\nfunction stepBounce() {\n let hitX = false;\n let hitY = false;\n\n state.x += state.vx;\n state.y += state.vy;\n\n if (state.x <= 0 || state.x >= maxX()) {\n state.x = Math.max(0, Math.min(maxX(), state.x));\n state.vx *= -1;\n hitX = true;\n }\n\n if (state.y <= 0 || state.y >= maxY()) {\n state.y = Math.max(0, Math.min(maxY(), state.y));\n state.vy *= -1;\n hitY = true;\n }\n\n if (hitX && hitY && isExactlyCorner()) {\n state.cornerHits += 1;\n cornerHitsEl.textContent = String(state.cornerHits);\n rainConfetti();\n }\n}\n\nfunction isExactlyCorner() {\n // Floating point velocity can leave tiny fractions after clamping, so compare\n // rounded pixel positions when deciding whether to celebrate a perfect hit.\n const x = Math.round(state.x);\n const y = Math.round(state.y);\n return (x === 0 || x === Math.round(maxX())) && (y === 0 || y === Math.round(maxY()));\n}\n\nfunction distanceToNearestCorner() {\n const bounds = { maxX: maxX(), maxY: maxY() };\n let nearest = { name: \"\", distance: Infinity };\n\n for (const corner of corners) {\n const targetX = corner.x * bounds.maxX;\n const targetY = corner.y * bounds.maxY;\n // Euclidean distance gives a single \"how close was it?\" value for near\n // misses where both axes are offset from the corner.\n const distance = Math.hypot(state.x - targetX, state.y - targetY);\n\n if (distance < nearest.distance) {\n nearest = { name: corner.name, distance };\n }\n }\n\n return nearest;\n}\n\nfunction updateStats() {\n const nearest = distanceToNearestCorner();\n state.bestDistance = Math.min(state.bestDistance, nearest.distance);\n\n nearestDistanceEl.textContent = `${nearest.distance.toFixed(2)} px`;\n bestDistanceEl.textContent = `${state.bestDistance.toFixed(2)} px`;\n nearestCornerEl.textContent = nearest.name;\n}\n\nfunction rainConfetti() {\n const colors = [\"#ffd166\", \"#ef476f\", \"#06d6a0\", \"#118ab2\", \"#f8f7ff\"];\n\n for (let i = 0; i < 170; i += 1) {\n state.confetti.push({\n x: Math.random() * stage.clientWidth,\n y: -20 - Math.random() * stage.clientHeight * 0.4,\n vx: -2 + Math.random() * 4,\n vy: 3 + Math.random() * 5,\n size: 5 + Math.random() * 8,\n spin: Math.random() * Math.PI,\n rotationSpeed: -0.25 + Math.random() * 0.5,\n color: colors[Math.floor(Math.random() * colors.length)],\n life: 220 + Math.random() * 90,\n });\n }\n}\n\nfunction drawConfetti() {\n confettiContext.clearRect(0, 0, stage.clientWidth, stage.clientHeight);\n\n // Updating and filtering in one pass keeps old particles from accumulating\n // forever on long-running screensaver sessions.\n state.confetti = state.confetti.filter((piece) => {\n piece.x += piece.vx;\n piece.y += piece.vy;\n piece.vy += 0.035;\n piece.spin += piece.rotationSpeed;\n piece.life -= 1;\n\n confettiContext.save();\n confettiContext.translate(piece.x, piece.y);\n confettiContext.rotate(piece.spin);\n confettiContext.fillStyle = piece.color;\n confettiContext.fillRect(-piece.size / 2, -piece.size / 2, piece.size, piece.size * 0.55);\n confettiContext.restore();\n\n return piece.life > 0 && piece.y < stage.clientHeight + 40;\n });\n}\n\nfunction render() {\n stepBounce();\n face.style.transform = `translate3d(${state.x}px, ${state.y}px, 0)`;\n updateStats();\n drawConfetti();\n requestAnimationFrame(render);\n}\n\nface.addEventListener(\"load\", () => {\n resize();\n render();\n});\n\nwindow.addEventListener(\"resize\", resize);\n\nif (face.complete) {\n resize();\n render();\n}\n",[],[201],"27a1a12c-3383-4bf8-ac7a-911891b47bf0","README.md","b08dfe16-6446-11f1-aa01-1607ee4eb77e",6,["D",1781039019765],"# Cage Corner Watch\n\nA static, single-page DVD-screensaver-style toy: Nicolas Cage's face bounces around the viewport while the page measures how close it gets to landing exactly in a corner.\n\n## Run\n\nThe Val Town deployment is served by `main.ts` using `staticHTTPServer()` from `https://esm.town/v/std/utils/index.ts`.\n\nLocally, open `index.html` directly, or serve the directory with:\n\n```sh\nnpx live-server\n```\n\nThe app has no build step and no runtime dependencies.\n\n## How It Works\n\n- `main.ts` is the Val Town HTTP endpoint.\n- `index.html` defines the stat display, the bouncing face image, and the confetti canvas.\n- `styles.css` creates the 2000s CRT treatment with scanlines, phosphor glow, vignette, and RGB ghosting.\n- `app.js` owns the animation loop, corner-distance math, and confetti particle simulation.\n- `cage-face.svg` is the local face asset, so the page works offline.\n\nThe distance readout is based on the top-left coordinate of the face's bounding box. For each animation frame, the app compares that point to the four valid corner positions: `(0, 0)`, `(maxX, 0)`, `(0, maxY)`, and `(maxX, maxY)`. The nearest Euclidean distance is shown in pixels and the best value is retained.\n\nConfetti triggers when a bounce hits both a horizontal and vertical wall on the same frame and the clamped position is exactly one of those valid corner coordinates.\n",[],[210],["D",1781038895267],{"_11":12,"_127":68},{"_11":12,"_123":-5,"_67":68,"_30":66,"_124":125,"_126":24},{"_39":114,"_13":16,"_33":36,"_115":78,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":14,"_122":12},"ctx",{"_52":-5,"_146":254,"_255":256,"_257":258,"_259":24,"_260":24,"_261":24,"_262":91,"_263":-5,"_264":-7,"_265":-7,"_266":26,"_267":24,"_268":24,"_269":-5,"_270":24,"_271":24,"_272":24,"_273":-5},"ENV",{"_225":226,"_227":228,"_229":16,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253},"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"]

History · index.html