Animazioni

Giradischi 3D nel browser

Un giradischi in tempo reale con le copertine sullo scaffale e riflessi glitch; trascini per girare la camera.

Settori: music
Colori: whitesilverblack
Stili: realisticglitchproduct
Categoria: 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
Incolla il prompt nel tuo agente
Premi Copia prompt qui sopra, apri il progetto nell'agente e incollalo. Il prompt contiene i link ai fotogrammi originali, così l'agente li guarda prima di costruire.
Claude Code Codex
Usa
Three.js React Three Fiber Blender
2
Confronta con l'originale
Mettili uno accanto all'altro. Se qualcosa non torna, di' all'agente cosa esattamente: tempi, dimensioni, colori o spazi.

Incolla il prompt nel tuo agente

Confronta con l'originale