AgeSnap

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Recreate “AgeSnap” as a single-page browser photo-filter experience, not a conventional game. Use a fullscreen Three.js WebGL canvas with an orthographic camera and a 2D fullscreen quad; the quad displays either a live front-facing webcam stream or a user-uploaded image, fitted to cover the viewport with aspect-ratio cropping. Keep the source video element hidden. The initial canvas is black/dark because no source is selected.

Build a dark, minimal interface layered over the canvas. The page background should be near-black/navy with a subtle radial blue gradient, and the translucent controls should use deep navy panels, thin blue-gray borders, rounded corners, white text, muted gray secondary text, soft shadows, and slight backdrop blur. At the top-left show the title “AgeSnap” and subtitle “Take a picture — preview an “older” look (stylized filter).” Below it, provide these controls in a wrapping horizontal layout: “Start Camera”, “Take Photo”, “Resume”, “Upload Image”, and “Download”. Start with only Start Camera and Upload Image active; Take Photo, Resume, and Download are disabled until the corresponding source/state exists. Upload Image must open a file picker restricted to image files.

Under the buttons, show a rounded translucent “Age” pill containing an HTML range slider from 0 to 100, initially set to 55, and a numeric value reading “55”; update that number live while dragging. Beside it show a “Tip” pill with the text “Good lighting helps.” At the bottom of the UI area show status/help text initially reading: “Click Start Camera or Upload Image. (This is a stylized filter, not a real age prediction model.)” The interface should remain usable over the canvas, while the canvas itself fills the entire viewport.

When Start Camera is clicked, request getUserMedia with a front/user-facing video stream, no audio, and ideal 1280x720 dimensions. Play the stream and display it through a Three.js VideoTexture. Change the status to “Camera live. Adjust Age slider, then click Take Photo to freeze.” Enable Take Photo and Download. If camera permission fails, show “Could not access camera. Try Upload Image instead (or allow permissions).”

When Upload Image is selected, load the chosen image as a Three.js texture, display it through the same shader, enable Download, and show “Image loaded. Adjust Age and Download when ready.” An uploaded image is not a camera video and does not get a Take Photo button enabled. Preserve the image’s natural dimensions for shader aspect fitting. Revoke the temporary object URL after loading or on error; on error show “Could not load that image. Try a different file.”

For live camera mode, Take Photo must freeze the current video frame by drawing it to an offscreen 2D canvas and switching the shader source to a CanvasTexture. Change the status to “Frozen. You can tweak Age and Download. Click Resume for live camera again.” Disable Take Photo and enable Resume. Resume switches back to the live VideoTexture, changes the status to “Back to live camera.” and restores live mode. Download should render the current filtered canvas and trigger a PNG download named agesnap_<age>.png, where <age> is the current rounded 0–100 slider value. Download is enabled for an uploaded, live, or frozen source.

Implement the visible aging effect entirely in a fragment shader. Include uniforms for the source texture, normalized age (slider value divided by 100), elapsed time, viewport resolution, and source texture resolution. Fit the source to the screen using a cover crop: crop horizontal sides when the source is wider than the screen, otherwise crop the top/bottom. Sample the source, then apply a stylized—not scientifically accurate or face-aware—older look whose strength increases with Age: desaturate toward luminance gray, increase contrast, apply a subtle warm-to-cool color shift, add procedural multi-octave noise/fbm for fine wrinkle-like micro-contrast, darken a center-weighted face-ish region, add a soft under-eye/nasolabial-style horizontal shading band around the center, add subtle mottled age spots, and apply a vignette that becomes somewhat stronger with age. The shader must not claim to detect faces or predict real age; it is a generalized center-weighted visual filter. Keep the procedural noise slightly time-varying while the live camera is running. At Age 0 the treatment should be minimal, and at Age 100 the desaturation, contrast, wrinkle/noise, shading, spots, and vignette should be strongest.

Render continuously with requestAnimationFrame, update elapsed shader time, update the camera texture dimensions as metadata becomes available, and resize the renderer and resolution uniform with the window. Use linear texture filtering, sRGB color handling, and preserve the drawing buffer so the filtered result can be downloaded. The experience should feel like a polished, compact dark webcam/image utility with a live preview and a clearly labeled stylized aging filter rather than a score-based game.