Build an exceptionally beautiful, fully interactive 3D Japanese arcade claw machine in a single runnable HTML file using Three.js and WebGL.
This should look like a premium, professionally art-directed 3D experience, with the visual quality of a high-end animated product commercial and the functionality of a real arcade game.
VISUAL DIRECTION
Create a gorgeous, glossy cherry-red Japanese claw machine with creamy white accents, brushed chrome details, a large illuminated "CATCH CLUB" marquee, and subtle pastel LED lighting.
Place the entire machine in a bright, clean white photography studio with soft contact shadows and beautiful reflections.
The camera should use a carefully composed three-quarter perspective, showing the front, right side, transparent prize chamber, control panel, and prize collection compartment.
Design every part with attention to physical construction:
Large crystal-clear glass panels with realistic reflections, visible thickness, polished edges, and minimal tint.
A mechanical chrome claw with three articulated fingers, pivot joints, a retractable cable, and a moving overhead rail assembly.
A glossy arcade control panel with a physical joystick, illuminated buttons, and a small digital display.
A beautifully constructed prize chute with a hinged collection flap.
Tiny screws, ventilation slots, rubber trim, subtle seams, internal LED strips, and carefully beveled edges.
The machine must feel like a real manufactured object, not a collection of basic Three.js shapes.
THE PLUSH TOYS
Fill the chamber with 10 adorable, individually modeled plush toys in a carefully arranged, colorful pile.
Include a pastel pink axolotl, a butter-yellow duck, a lavender bunny, a mint-green dinosaur, and a peach-colored bear, with some color variations.
Each toy should have:
A recognizable silhouette and distinct anatomy.
Rounded, soft-looking fabric forms.
Small stitched-style facial details, shiny bead eyes, ears or limbs appropriate to its character.
Subtle fabric texture, soft shading, and realistic material variation.
Its own position, scale, and orientation.
Make them look like collectible designer plush toys someone would genuinely want to win.
Avoid generic spheres with faces, overly shiny plastic toys, floating objects, and visually cluttered arrangements.
REAL, WORKING GAMEPLAY
Make the claw machine genuinely playable.
Add beautifully styled on-screen controls:
LEFT / RIGHT / FORWARD / BACK to position the claw.
GRAB to initiate a complete grabbing sequence.
DEMO RUN to automatically play a successful round.
RESET to restore the initial machine and toy positions.
A visible PRIZES WON counter.
Support keyboard arrow keys or WASD for movement and Space for grabbing.
When GRAB is pressed:
The overhead carriage stops at its current position.
The cable unwinds and the claw physically descends.
The three individual metal fingers open outward.
The claw reaches the plush pile.
The fingers close around the target area.
If a toy is properly positioned inside the fingers, the claw grips it.
The cable retracts and lifts the toy visibly above the pile.
The toy hangs naturally, with subtle swinging and movement.
The overhead carriage travels along its rails toward the prize chute.
The claw opens, releasing the toy.
The toy falls through the chute, bounces naturally, and becomes visible in the prize collection compartment.
The counter increases only after the toy enters the collection area.
The empty claw returns to its starting position, ready for another turn.
Unsuccessful grabs must also work correctly. If the claw misses, it closes on empty space, retracts, and returns without awarding a prize.
Use real spatial checks for grabbing. Never award an invisible prize or teleport a toy into the chute.
THE DEMO RUN
This is extremely important.
The DEMO RUN button must trigger a complete, beautiful, automatically controlled winning sequence lasting approximately 12–16 seconds.
It must start from a reproducible arrangement and use the SAME mechanical and grabbing system as manual gameplay.
The demonstration should show the claw traveling over a recognizable plush character, opening, descending, grabbing it, lifting it, carrying it across the chamber, and dropping it into the prize chute.
Make the entire sequence clearly visible from the default camera.
When the toy is successfully collected, briefly animate the machine lights, play a satisfying win sound, and show a tasteful "YOU WON!" message.
Do not use a prerecorded animation, fake the grab, or skip intermediate movements.
ANIMATION AND PHYSICS
Movement must have convincing mechanical weight.
The overhead carriage should accelerate and decelerate smoothly. The cable must visibly extend and retract. The metal fingers should rotate around actual joints.
Plush toys should react believably when disturbed, falling, settling, and slightly wobbling on impact. The captured toy should remain visibly secured inside the claw until release.
Use stable collision approximations, gravity, spring motion, and damping where appropriate. Avoid clipping through the machine, physically impossible movement, and abrupt position snapping.
Make the joystick visibly tilt when directional controls are used. Buttons should physically depress when clicked.
Add small details that make the machine feel alive: gentle LED illumination, subtle idle animation, mechanical motor sounds, and a satisfying prize-drop sound. Include a mute toggle.
PRESENTATION QUALITY
The first frame must already look spectacular without requiring any interaction.
Use sophisticated lighting with soft studio shadows, bright but controlled highlights, ambient occlusion where feasible, polished materials, and excellent color balance.
Keep the background pure white or very light ivory. The red cabinet and colorful plush toys should stand out immediately.
Optimize the default framing for a square 1080 × 1080 screen recording. The entire cabinet must fit comfortably in view while the claw and toys remain large enough to see clearly.
Keep the camera stable during the demo. Allow optional mouse orbit and zoom for manual inspection, with a button to return to the original camera.
Maintain smooth animation with frame-rate-independent timing and responsive resizing.
TECHNICAL REQUIREMENTS
Return one complete HTML file containing all HTML, CSS, and JavaScript.
Use Three.js, with a pinned CDN version permitted.
Build all 3D geometry procedurally. No downloaded 3D models, external textures, images, or paid assets.
Use procedural materials and textures when useful.
Implement a proper state machine for idle, positioning, descending, grabbing, lifting, transporting, releasing, and returning.
Prevent overlapping actions and broken animation states.
The RESET button must fully restore toy positions, counter, controls, and claw state.
DEMO RUN must be repeatable after reset.
All controls must actually function, not merely look interactive.
Avoid console errors and incomplete placeholder features.
Prioritize three things equally: extraordinary visual quality, believable mechanical movement, and a completely functional prize-winning experience.
The finished result should make someone stop scrolling because it looks like a beautiful little arcade machine they can actually play.
Make strong design and engineering decisions yourself. Do not ask questions.
Return the complete runnable HTML code. Prompt by @ivanainai , posted on X on 2026-10-17. x.com/ivanainai/status/2111569875793744245 . Copies include this credit. 