Motion

3D turntable scene in the browser

A real-time vinyl setup with album covers on the shelf and glitchy reflections; drag to orbit the camera.

Industries: music
Colors: whitesilverblack
Styles: realisticglitchproduct
Category: 3dwebgl

REFERENCE
- Gallery page: https://magpui.com/en/i/3d-turntable-scene-in-the-browser-9dedbf
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/3d-turntable-scene-in-the-browser-9dedbf/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/3d-turntable-scene-in-the-browser-9dedbf/clip.mp4
- Original post: https://x.com/gasphedde/status/2100549328368521343 by @gasphedde
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.

BUILD
An interactive 3D scene of a turntable on a minimal shelf holding vinyl records, shown on a white backdrop with orbit controls. The floor reflection has a subtle glitch distortion.

DESIGN SYSTEM
- Backdrop #EDEDED with a soft vignette; chrome shelf, black turntable, colorful sleeves as textures.

MOTION
- Platter rotates at 33 rpm while playing; tonearm eases onto the record in 1.2s.
- Orbit with damping 0.08, limited to 60deg vertical.
- Reflection: animated UV offset noise in bands, 2s loop.

SECTIONS
- Canvas scene.
- Small caption with the track name.

IMPLEMENTATION
- React Three Fiber + drei (OrbitControls, MeshReflectorMaterial); compress models with Draco, textures to KTX2.
- prefers-reduced-motion: skip the animation and show the end state.

ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.

SUCCESS CHECK
- First render under 2s on broadband.
- Camera never clips into the shelf.
- Static image fallback without WebGL.

1
Paste the prompt in your agent
Hit Copy prompt above, open your project in the agent and paste it. The prompt links the original frames, so the agent can look at them before building.
Claude Code Codex
Uses
Three.js React Three Fiber Blender
2
Compare with the original
Put the two side by side. If something is off, tell the agent exactly what: timing, size, color or spacing.

Paste the prompt in your agent

Compare with the original