REFERENCE
- Gallery page: https://magpui.com/en/i/draggable-3d-cd-jewel-case-088359
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/draggable-3d-cd-jewel-case-088359/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/draggable-3d-cd-jewel-case-088359/clip.mp4
- Original post: https://x.com/MoizArshi29/status/2116764297217081800 by @MoizArshi29
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: A single interactive 3D object centered on a pure black stage: a clear plastic CD jewel case holding an iridescent compact disc. The user grabs it with the pointer and drags to rotate it freely; on release it keeps spinning with inertia and slowly settles back toward a slight three-quarter view. As it turns, the disc's holographic reflections (violet, lavender, warm white) sweep across its surface, and the clear case catches thin bright edge highlights. Seen edge-on, the case becomes a thin glassy slab. It should feel physical and nostalgic, like turning a real CD in your hand under a lamp, and run smoothly in the browser.
DESIGN SYSTEM: Background #000000, no UI chrome. Object about 22% of viewport width (min 220px), centered. Case: 142x125x10 proportions (standard jewel case), clear material with very low opacity (#FFFFFF at 6-10%) and crisp light-grey edge lines #CFCFD6 at about 60% opacity, hinge tabs on the left spine, small clips and a center tray with a ridged spindle hub. Disc: diameter about 85% of the case height, outer silver rim #D9D9E0, a dark inner ring #121218 around a transparent hub with concentric grooves. Disc color comes from the environment and a thin-film iridescence: dominant violet #7B4BE0 and #A47CF5, highlights #F2ECFF, warm streak #F5E6D8. Subtle fine radial grooves visible in highlights.
MOTION: Drag rotates on X and Y: 1px of drag = 0.4deg, X rotation clamped to plus/minus 70deg, Y free. On release, angular velocity carries over and decays with damping about 0.92 per frame, then a soft spring (stiffness 40, damping 12) returns X tilt to -8deg and Y to 20deg if untouched for 2s. Idle: very slow Y sway of plus/minus 6deg over 6s, ease-in-out. Cursor shows grab / grabbing. Reflections are view-dependent, so they move automatically with rotation; additionally rotate the environment map 0.05 rad per second for a living shimmer.
SECTIONS: Parts: stage, case shell (front lid, back tray, spine with hinge), disc with label face. States: idle (sway), hover (cursor grab, highlight slightly brighter), dragging, inertia, settling.
IMPLEMENTATION: Three.js (or React Three Fiber) with a small procedural model: rounded box geometries for lid and tray using MeshPhysicalMaterial with transmission 1, thickness 0.5, roughness 0.05, ior 1.45, plus EdgesGeometry line overlay for the crisp edges. Disc as a thin cylinder with MeshPhysicalMaterial, metalness 1, roughness 0.15, iridescence 1, iridescenceIOR 1.3, iridescenceThicknessRange [100, 800], and an anisotropy or radial normal map for the groove streaks. Light it with an HDR environment (a soft studio HDRI) rather than many lights. Handle pointer drag manually (pointer events with setPointerCapture) to control rotation and inertia instead of OrbitControls, so the camera stays fixed. Cap devicePixelRatio at 2, pause rendering when the canvas is offscreen. Keyboard: the canvas is focusable, arrow keys rotate by 15deg, with a visible focus ring. prefers-reduced-motion: no idle sway or env rotation, drag still works without inertia. Provide a static image fallback when WebGL is unavailable.
ADAPT TO THE PROJECT: Reuse the project's design tokens, fonts and layout components; map the colors above to the closest existing tokens. Never copy logos, album art, brand names or textures from the original; keep the disc label plain or use a placeholder.
SUCCESS CHECK:
- Dragging rotates the case smoothly in both axes, and it keeps spinning briefly after release before settling.
- The disc shows shifting violet and white iridescent reflections that change with the viewing angle, and the case reads as clear plastic with sharp edges.
- Runs at 60fps on a laptop, works with arrow keys, and respects reduced motion.
