Cage Corner Watch

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_211":212,"_213":214},"routes/_app.x.$handle.$name",{"_94":93,"_31":42,"_102":84,"_26":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":24,"_117":118,"_119":56,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_40":41,"_31":42,"_35":43,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":-5,"_18":52,"_53":54,"_55":56,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":24},"version",6,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":20,"_33":34,"_35":36,"_37":14,"_38":39,"_23":24},"previous","deleted",false,"deletedHere","path","README.md","latestPath","fileId","b08dfe16-6446-11f1-aa01-1607ee4eb77e","name","fileType","content","# 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","createdAt",["D",1781039019765],"branchVersion","branchId","99e51303-2781-4382-a14b-ab1a6b3a7a48","id","64111127-deec-4790-8d11-4bcf5914f7cf","cage-corner-watch",["D",1781038895267],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","CRT Cage corner tracker","imageUrl","40e69d1a-3254-4858-920b-7b1449761575","pinnedFileId","666756de-6446-11f1-8b09-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":52,"_98":99,"_100":24},"branch",{"_13":83,"_31":84,"_40":39,"_85":41,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":42,"_92":93},"isOwned",9,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","pchinjr","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OaSpooJk6yZ5KFqyjtIVA4z3SH.jpeg","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_40":41,"_31":42,"_35":207,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":-5,"_18":52,"_53":54,"_55":56,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":208,"_78":209,"_80":210,"_82":24},"tree",[182,183,184,185,186,187],"files",[182,183,184,185,186,187],"counts",{"_172":60,"_173":142,"_174":60,"_175":176,"_177":178},"contents",[124,125,126,127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_40":169,"_31":27,"_29":30,"_133":-5,"_38":39,"_37":14,"_135":56,"_35":170,"_13":60,"_32":20,"_33":34,"_23":24,"_138":-5,"_26":171},{"_40":161,"_31":162,"_29":163,"_133":-5,"_38":39,"_37":164,"_135":24,"_35":165,"_13":60,"_32":166,"_33":167,"_23":24,"_138":-5,"_26":168},{"_40":154,"_31":155,"_29":156,"_133":-5,"_38":39,"_37":157,"_135":56,"_35":158,"_13":60,"_32":20,"_33":159,"_23":24,"_138":-5,"_26":160},{"_40":147,"_31":148,"_29":149,"_133":-5,"_38":39,"_37":150,"_135":24,"_35":151,"_13":60,"_32":20,"_33":152,"_23":24,"_138":-5,"_26":153},{"_40":140,"_31":141,"_29":54,"_133":-5,"_38":39,"_37":142,"_135":56,"_35":143,"_13":60,"_32":144,"_33":145,"_23":24,"_138":42,"_26":146},{"_40":130,"_31":131,"_29":132,"_133":-5,"_38":39,"_37":134,"_135":24,"_35":136,"_13":60,"_32":20,"_33":137,"_23":24,"_138":-5,"_26":139},"991accee-0f8e-44bf-a899-9f403b1e091f","styles.css","84cd1262-6446-11f1-b160-1607ee4eb77e","parentId",3,"latest",["D",1781038946361],":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 {\n position: absolute;\n z-index: 3;\n top: 16px;\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 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","label",[131],"b0275ed5-36c9-4fce-a2a0-204ce3ee8f5c","main.ts",1,["D",1781038895331],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default staticHTTPServer(import.meta.url);\n",[141],"f8593c77-b165-4c61-a785-2881d12f562c","index.html","6e2b7058-6446-11f1-a7b9-1607ee4eb77e",2,["D",1781038908393],"\n\n \n \n \n Cage Corner Watch\n \n \n \n

\n Nearest corner\n 0.00 px\n

\n Closest pass\n 0.00 px\n

\n Corner hits\n 0\n

\n Target\n top left\n

\n\n

CAGECAST 2003

\n \n

\n\n \n \n \n\n",[148],"0810f0b2-cc51-4cea-bd33-28cf3036f879","cage-face.svg","a8cd66da-6446-11f1-8c5e-1607ee4eb77e",5,["D",1781039006758],"\n",[155],"c95c3130-8a43-4b30-a807-221c17c640ab","app.js","9a1244ee-6446-11f1-a3f1-1607ee4eb77e",4,["D",1781038982042],"script","const stage = document.getElementById(\"stage\");\nconst face = document.getElementById(\"cageFace\");\nconst confettiCanvas = document.getElementById(\"confetti\");\nconst confettiContext = confettiCanvas.getContext(\"2d\");\n\nconst nearestDistanceEl = document.getElementById(\"nearestDistance\");\nconst bestDistanceEl = document.getElementById(\"bestDistance\");\nconst cornerHitsEl = document.getElementById(\"cornerHits\");\nconst nearestCornerEl = document.getElementById(\"nearestCorner\");\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",[162],"27a1a12c-3383-4bf8-ac7a-911891b47bf0",["D",1781039019765],[27],"pulls","branches","forks","envVars",{"_179":60,"_181":60},"connections",{"_179":60,"_180":60},"count","unfilledCount","emptyCount",{"_40":169,"_31":27,"_29":30,"_133":-5,"_38":39,"_37":14,"_135":56,"_35":204,"_13":60,"_32":20,"_33":34,"_23":24,"_138":-5,"_189":205,"_26":206},{"_40":161,"_31":162,"_29":163,"_133":-5,"_38":39,"_37":164,"_135":24,"_35":201,"_13":60,"_32":166,"_33":167,"_23":24,"_138":-5,"_189":202,"_26":203},{"_40":154,"_31":155,"_29":156,"_133":-5,"_38":39,"_37":157,"_135":56,"_35":198,"_13":60,"_32":20,"_33":159,"_23":24,"_138":-5,"_189":199,"_26":200},{"_40":147,"_31":148,"_29":149,"_133":-5,"_38":39,"_37":150,"_135":24,"_35":195,"_13":60,"_32":20,"_33":152,"_23":24,"_138":-5,"_189":196,"_26":197},{"_40":140,"_31":141,"_29":54,"_133":-5,"_38":39,"_37":142,"_135":56,"_35":192,"_13":60,"_32":144,"_33":145,"_23":24,"_138":42,"_189":193,"_26":194},{"_40":130,"_31":131,"_29":132,"_133":-5,"_38":39,"_37":134,"_135":24,"_35":188,"_13":60,"_32":20,"_33":137,"_23":24,"_138":-5,"_189":190,"_26":191},["D",1781038946361],"children",[],[131],["D",1781038895331],[],[141],["D",1781038908393],[],[148],["D",1781039006758],[],[155],["D",1781038982042],[],[162],["D",1781039019765],[],[27],["D",1781038895267],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":52,"_98":99,"_100":24},{"_13":83,"_31":84,"_40":39,"_85":41,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":42,"_92":93},"ctx",{"_76":-5,"_121":244,"_245":246,"_247":248,"_249":24,"_250":24,"_251":24,"_252":56,"_253":-5,"_254":-7,"_255":-7,"_256":60,"_257":24,"_258":24,"_259":-5,"_260":24,"_261":24,"_262":24,"_263":-5},"ENV",{"_215":216,"_217":218,"_219":84,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243},"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"]

Diff · v6