REFERENCE
- Gallery page: https://magpui.com/en/i/minidisc-carousel-in-colored-smoke-e9b6c3
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/minidisc-carousel-in-colored-smoke-e9b6c3/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/minidisc-carousel-in-colored-smoke-e9b6c3/clip.mp4
- Original post: https://x.com/LuisBizarro/status/2117177813325496358 by @LuisBizarro
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 full-viewport real-time 3D carousel of translucent MiniDisc cartridges floating in a row above a dark wet floor, with a large plume of volumetric smoke rising behind the center slot. Three to four discs are visible at once: the focused one sits centered, square to the camera and slightly larger; its neighbours sit left and right, tilted about 10-15deg and a bit further back. Moving to the next disc slides the row sideways and the whole atmosphere (smoke tint, key light, floor reflections, fog) re-colors to match the plastic color of the new focused disc: amber, teal, blue, pink, clear/silver, yellow. It should feel tactile and nostalgic, like a slow product film of colored plastic in a smoky studio.
DESIGN SYSTEM: Edge-to-edge canvas, no layout grid. Minimal chrome only: a small wordmark top-left (about 14px tall, white), a contact email top-right (13px, white, regular), and a tiny progress glyph bottom-right. Disc cartridges: square, about 22% of viewport width for the focused one, 18% for the neighbours, roughly 70x68x5 proportions with a metal shutter on one edge and a printed label sticker (white card with a big bold number) near a corner. Plastic colors as hex estimates: amber #C8782A, teal #2FA58C, blue #5B6FD6, pink #E0577F, yellow #E8D36A, clear #E6E8EC. Inside each shell, a dark disc with concentric grooves visible through the plastic and printed serif italic text like 'Recordable Mini Disc' on the face. Floor: near-black #0B0A0A glossy plane with blurred, color-bleeding reflections. Background: dark warm grey #1A1614 behind the smoke; in light themes (clear disc) the fog brightens to #CFCFCF.
MOTION: Carousel step (trigger: horizontal drag, wheel, arrow keys or auto-advance every 4000ms): row translates by one slot over 1200ms, cubic-bezier(0.65, 0, 0.35, 1); the outgoing focused disc eases from 0deg to about -12deg Y rotation and scales 1.0 to 0.85, the incoming one does the reverse. Atmosphere re-tint: lerp the smoke color, key light color and fog color to the new disc color over 1500ms starting together with the slide, cubic-bezier(0.4, 0, 0.2, 1). Idle on the focused disc: slow float of plus/minus 6px on Y over 5000ms ease-in-out plus a subtle 2-3deg rotational sway; neighbours float with a 600ms phase offset. Smoke: continuously billowing upward, noise scrolling about 0.05 units per second, never looping visibly. Reflections update every frame.
SECTIONS: Parts: stage (floor plane, smoke volume, fog), disc row, minimal chrome. States: idle (float + smoke), transitioning (slide + re-tint), hover on the focused disc (rotate toward the pointer up to 8deg, specular highlight brightens), focused/active (centered, square, largest).
IMPLEMENTATION: Three.js (or React Three Fiber). Model each cartridge procedurally: a rounded box with MeshPhysicalMaterial (transmission 0.9, roughness 0.15, thickness 0.4, colored attenuationColor per disc), an inner dark disc mesh with a groove normal map, a metallic shutter, and a label plane with a canvas texture. Smoke: a raymarched 3D-noise volume in a box behind the center (or several large camera-facing planes with animated fbm noise and soft depth fade), tinted by a uniform that lerps to the active color. Floor: MeshReflectorMaterial-style planar reflection with blur and a roughness map for the wet look. Post-processing: light bloom (threshold 0.8), subtle film grain and vignette. Cap devicePixelRatio at 1.5-2, lower smoke steps on mobile, pause the render loop when the tab is hidden or the canvas is offscreen. Keyboard: left/right arrows step the carousel, the canvas is focusable with a visible focus ring, and an aria-live region announces the focused disc name. prefers-reduced-motion: no auto-advance, no float, crossfade the atmosphere in 300ms and jump the row without sliding.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, fonts and components for the chrome (wordmark, email link, progress indicator). Map disc and atmosphere colors to the closest existing palette tokens where possible. Never copy logos, brand names, label artwork or product photos from the original: use placeholder label text and generic numbers.
SUCCESS CHECK:
- Stepping the carousel slides the row smoothly and the smoke, light and floor reflections all shift to the new disc color within about 1.5s.
- Discs read as translucent colored plastic with a visible dark disc inside, and their colors bleed into the glossy floor reflection.
- The scene holds near 60fps on a modern laptop, works with arrow keys, and respects prefers-reduced-motion.
