Suit Mirror

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.

Create a browser-based interactive AR body-tracking experience titled “Suit Mirror,” presented as a single full-screen dark sci-fi panel rather than a conventional score-based game. The user’s goal is to activate their webcam and see a stylized Iron-Man-like suit overlay follow their body in real time; there is no score, timer, health, ammo, enemy, level, or win state.

Layout and camera: Center one responsive stage panel on a nearly black/navy page with a subtle radial blue glow behind it. The stage should be about 760px wide by 920px tall at maximum, with rounded corners, a thin translucent amber border, deep shadow, and a faint orange inset glow. Inside, show a webcam video filling the entire stage using object-fit: cover, mirrored horizontally like a selfie camera. Initially the camera area is an empty dark gray/black rectangle because the camera is off. Put a transparent canvas exactly over the video, also mirrored horizontally, for the suit graphics. Add subtle horizontal amber scanlines across the entire stage.

Top HUD: At the top left show a rounded dark pill with amber outline and monospaced bold text “CAMERA OFF”; at top right show “TRACKING WAIT.” When the camera successfully starts, change the first to “CAMERA ON” with a green success tint. When body pose tracking succeeds, change the second to “BODY TRACKING ON” with a green success tint. If permission fails, show “CAMERA DENIED.” If WebGL is unavailable, show “WEBGL REQUIRED.”

Right-side status legend: Near the upper-right, show a translucent dark rounded box with monospaced labels and live states: HELMET WAIT, CHEST WAIT, HANDS WAIT, BOOTS WAIT. Successful tracked components change to LOCKED in mint/green. Hide this legend on narrow mobile screens. At the bottom left show an amber vertical accent bar and an Italian monospaced readout on a translucent brown-black background. Initial text: “SUIT MIRROR // Attiva la camera. Il modello segue testa, torso, braccia, mani, gambe e piedi quando il browser supporta WebGL.” After activation say that the camera is ready and body tracking is initializing; after a successful pose say: “SUIT MIRROR // Corpo agganciato. Muovi mani e piedi per vedere propulsori e stivali seguire il tracking.”

Controls: At bottom right place two large rounded dark brown buttons with amber borders and bold cream text: “Attiva camera” and “Reset.” On small screens make them span the bottom as two equal-width buttons, and move the readout above them. The camera button requests webcam video with the front-facing/user camera, no audio, ideally 1280x720, starts playback, and begins pose tracking. Reset stops all camera tracks, clears the video and overlay, resets all HUD labels to CAMERA OFF / TRACKING WAIT / WAIT states, and restores the initial Italian readout. Handle denied/unavailable permission with the CAMERA DENIED state and explanatory Italian message.

Tracking and suit behavior: Use a browser pose landmark model such as MediaPipe Pose loaded from its CDN, with model complexity 1, smooth landmarks enabled, segmentation disabled, detection and tracking confidence around 0.62. Process frames roughly every 110ms while the video is ready, and smooth each landmark toward its new position. Require visible left/right shoulders and left/right hips before drawing the body suit. Project normalized pose coordinates into the cover-scaled video/canvas area, preserving the camera crop.

When a valid body is detected, draw a translucent dark-red torso quadrilateral connecting left shoulder, right shoulder, right hip, and left hip. Outline it in glowing amber and place a small pale-cyan circular reactor at its center. Draw red armored plates and glowing amber inner lines along these pose connections: left shoulder to left elbow to left wrist, right shoulder to right elbow to right wrist, both shoulders to their corresponding hips, and each hip through knee to ankle. Use thick deep-red semi-transparent plates with amber edges, red structural lines, and a thinner amber highlight line. Add glowing joint circles: amber at shoulders and major joints, pale cyan at wrists/hand endpoints and feet.

Draw the helmet around the nose/head: infer its scale from the distance between the ears, place a rounded red helmet centered on the nose, rotate it slightly based on shoulder angle, and overlay a gold angular faceplate shape. Draw two short pale-cyan glowing eye slits around the eye landmarks. Draw cyan glowing circular repulsors at both wrist landmarks, with a pulsing radius, translucent cyan fill, bright outline, and white center. Draw cyan lines from each ankle toward the corresponding foot landmark to suggest boot thrusters. Only draw parts when their landmarks pass a visibility threshold; if the core torso landmarks are not visible, clear the suit and reset part statuses to WAIT. Helmet is LOCKED when the nose is visible, chest is LOCKED whenever the core body is valid, hands are LOCKED when both wrists are visible, and boots are LOCKED when both ankles are visible.

Visual style: cinematic futuristic armor overlay in red/crimson, brushed gold/amber outlines, pale cyan energy effects, dark navy-black UI, glow/shadow effects, and subtle scanlines. Keep the webcam and pose overlay as the central experience. Ensure the UI is accessible and touch-friendly, but do not add invented gameplay systems or extra screens. Include a WebGL capability check before starting the pose tracker; if it fails, leave the webcam available but explain that complete tracking requires WebGL or hardware acceleration. If repeated pose processing errors occur, stop full tracking and show a reduced-tracking message while leaving the webcam active.