A 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.

The Val Town deployment is served by main.ts using staticHTTPServer() from https://esm.town/v/std/utils/index.ts.

Locally, open index.html directly, or serve the directory with:

npx live-server

The app has no build step and no runtime dependencies.

• main.ts is the Val Town HTTP endpoint.
• index.html defines the stat display, the bouncing face image, and the confetti canvas.
• styles.css creates the 2000s CRT treatment with scanlines, phosphor glow, vignette, and RGB ghosting.
• app.js owns the animation loop, corner-distance math, and confetti particle simulation.
• cage-face.svg is the local face asset, so the page works offline.

The 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.

Confetti 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.