Marble Mayhem

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 mobile-friendly 3D spectator racing game titled “Marble Mayhem.” Use Three.js or an equivalent real-time 3D renderer with a dark navy background and fog, strong soft lighting, shadows, and a polished televised arcade aesthetic. The game should be automated after setup: the player does not steer a marble; the camera follows the race leaders.

Scene and course: Build one long elevated obstacle course as a blue-gray tubular track following a smooth 3D Catmull-Rom-style path. Start high in the air around y=30, descend through a curving approach, then a large spiral/funnel section, followed by a descending zig-zag/switchback section, another spiral-like section, steep drops, and a final trap-filled descent ending at a finish gate. Use yellow torus rings/rails around the track at intervals. Add visible set dressing matching the course: turquoise funnel-rim bars around the spiral, yellow vertical switchback posts on both sides of the zig-zag section, two red/pink trapdoor platforms in the lower section, three purple rotating paddles, and a large yellow finish gate at the end. The course should be lit by a bright white key light, cool blue rim light, and ambient hemisphere light, with fog fading into the dark navy distance.

Marbles: Spawn up to 50 spherical marbles, each about the same size, with glossy materials and colors cycling through vivid pink, blue, yellow, mint, purple, orange, magenta, green, white, and cyan. Give each marble a player name and place it on the shared track with a slight lane offset. Marbles automatically advance along the course at varied speeds, with gentle speed changes based on their progress and occasional small bump/slip effects when nearby marbles are close. Make them visibly roll as they travel. The race should feel like a chaotic pack race, but retain the simple automated simulation.

Race rules: Players advance from progress 0 to 1 along the course. At two lower-course danger windows, approximately around 70–73.5% and 82–86.5% of the track, randomly eliminate marbles using timed trap/knockout behavior; eliminated marbles disappear from the course. The first three marbles that reach the end are finishers and receive 1st, 2nd, and 3rd ranks. End the race once three finishers exist (or sooner if every marble has finished or been eliminated). Do not add weapons, player steering, jumping, health, or other mechanics not described here.

Camera: In the join screen, show a wide elevated view of the course. During the race, smoothly move the perspective camera behind and slightly above the current leaders and look ahead along the track; the camera should do the work and require no controls. On results, move to a view of the lower course and finish gate. Make the layout responsive and phone friendly.

HUD and screens: Keep the 3D scene visible behind a fixed HTML-style HUD. At the upper-left, show a rounded yellow pill labeled “MARBLE MAYHEM,” with dark bold uppercase lettering and a subtle darker bottom shadow. Initially show a centered dark translucent rounded panel with a thin light border and shadow. It must contain the large heading “Build the pack.”, the explanatory text “Join the televised run through spirals, funnels, drops, split lanes and knockout traps.”, a “Player name” text input, a teal “Join” button, a wrapping roster of colored name chips, and a counter reading “0 / 50 marbles joined” that updates as names are added. Include a yellow “Start race” button and a dark translucent “Demo pack” button. The demo button should populate a sample pack of ten named marbles: Comet, Pebble, Orbit, Cobalt, Mango, Mint, Rocket, Nova, Pogo, and Drift. If Start race is pressed with no players, use the demo pack automatically. Include the small note “Phone friendly — the camera does the work. Add up to 50 players.”

During racing, hide the join panel and show a small pill near the top center reading “LIVE • Camera following the leaders.” Show a dark translucent leaderboard panel in the upper-right titled “Live leaderboard,” listing up to the top eight entries with rank, colored marble dot, player name, and a check mark for finishers. On small screens make the leaderboard narrower and reduce visible entries; place the live tip near the bottom instead of the top. When the race ends, hide the race HUD and show a centered dark translucent results panel titled “Finish line,” a message such as “[winner] takes the first flag! Knockouts: [count].”, and a three-column podium with second place on the left in silver/light blue, first in the center in yellow and tallest, and third on the right in bronze. Display each name and ordinal (1st/2nd/3rd), use an em dash for missing places, and provide a yellow “Race again” button that restarts the same roster.

Visual style: clean modern UI with Inter/system sans-serif typography, rounded 12–18px corners, translucent navy panels, white headings, muted blue-gray body text, yellow accent for branding/finish/race start, teal for joining, and bright candy-colored marbles. Preserve the cinematic dark background, perspective depth, soft shadows, and smooth camera interpolation seen in the reference.”