opus-5.5VIDEO
Opus 5.5 builds a music-reactive 3D disco-ball room
A single HTML file using three.js and Web Audio: load your own music and the whole room responds, built around a mirrored disco ball. The prompt is in the next post.
shmopix
@shmopixbznArchived 4 days agoOriginally posted 2026.10.13
ORIGINAL PROMPT
Create an immersive, interactive 3D music room in a single HTML file (three.js + Web Audio API) with a large mirrored disco ball as its centerpiece. Make it a personal space where people can listen to music, explore the room, customize it, and watch the whole environment respond to each song. VISUAL DIRECTION A nighttime neon atmosphere: volumetric lighting, soft haze, realistic reflections, floating particles and bloom. The disco ball is the main focal point. Balance energetic effects with quieter areas so the room never feels overwhelming. Neon in the room: tubes along the ceiling edges, around the dance floor and along the window frame, glowing seams between the floor tiles, and an "after hours" neon sign above the window. Use a saturated palette. DISCO BALL - The ball hangs from a rod and sways like a pendulum: strong bass hits push it. - Inertial spin: each beat gives it a push, then the speed eases back to normal. Add a slight precession wobble. - Real reflections of the room in the mirror tiles (cube camera). Only walls, floor and neon are reflected, to keep it fast. - Light spots from the ball travel across walls, floor and furniture and rotate with it. - On every beat a neon ring sweeps down across the tiles. During choruses, glowing spiral stripes wind around the ball. High frequencies make individual tiles sparkle. - A neon halo around the ball and two thin orbiting rings with running light segments. - Bass makes the ball pulse and sends light waves across the room. - Rhythm and energy drive the rotation speed, beam movement and particle intensity. COLOR AND MOOD The mood of the lyrics sets the palette: - tenderness — pink and gold; - sadness — blue and purple; - joy — warm, vivid colors; - tension — red and cool white. Blend colors smoothly, never jumping on every beat. Lyrics come from MP3 tags (USLT), an .lrc file with the same name, or text pasted by the user; LRC timing enables synced effects. Without lyrics, read the mood from the sound (energy and spectral brightness). Only show synced lyric effects when timing data exists. Users can choose the automatic palette or set three colors of their own. AUDIO ANALYSIS - Drive reactions from real frequency analysis (AnalyserNode). - Give each band its own role: bass drives the floor, the ball and the speakers; mids shape the wall patterns and beams; highs add sparkles. - Precompute a loudness envelope for the whole track. Use it to find choruses (lighting opens up, projections spread across walls and ceiling), quiet passages (the atmosphere softens), and strong transitions. - Detect tempo with autocorrelation. PLAYBACK (important) Play all music through Web Audio: decode files into an AudioBuffer and play them with AudioBufferSourceNode. Do not use the <audio> element or blob URLs — sandboxes such as Claude artifacts block them. Build a small custom player with play, pause, seek, currentTime, duration and an ended event. Start audio only after a user action. DEMO TRACKS Three original tracks with original lyrics, synthesized in the browser sample by sample (in a Web Worker, with a main-thread fallback): - "Glass Hour" — 120 BPM, joy; - "Low Tide Letters" — 84 BPM, sadness; - "Static Bloom" — 128 BPM, tension. Each has a structure with intro, verse, build-up, chorus and break, and lyrics timed to the bars. INTERACTIVE FEATURES - Reactive light floor: tiles ripple outward on bass hits; clicking a tile sends an extra light wave. - Panoramic window showing a night city, deep space or an ocean. The view responds gently to the track: city lights brighten, stars drift faster, waves grow. - Projection walls with flowing abstract patterns and lyric fragments; at musical peaks the projections spread across the walls and ceiling. - DJ desk: clicking a record opens the playlist; labeled knobs adjust visual intensity, bass sensitivity and room lighting. The same controls exist in the compact interface. - Small details: speakers vibrate, a lava lamp flows with the music, VU meters on the desk. - Three dancing robots with distinct looks and places: Disco (white, by the sofa), Volt (black with a neon visor, on the dance floor), Bubble (pink and round, by the DJ desk). They dance on the beat; clicking one changes its style (Bounce, Wave, Spin, Robot, Disco point). Each robot's style can also be set in the settings. - Rare surprises at strong transitions: a star field on the ceiling, a glowing whale passing the window, an aurora. They can be turned off, and the settings include preview buttons. MUSIC AND PLAYLISTS - Upload several audio files at once, or drag files into the room. - Playlists: create, rename, delete; switch tracks, play/pause, seek, volume, shuffle, repeat. - Uploaded files are kept in IndexedDB. - No adding music by link and no YouTube. ROOM CUSTOMIZATION - A catalog of furniture, plants, posters, lamps and speakers; an arrange mode for dragging pieces across the floor, rotating them, changing their style, or removing them. - Save rooms and visual settings to localStorage, and link a room to a playlist. - Three coordinated presets: - Neon Club — saturated colors, moving beams, a glowing city skyline; - Cosmic Drift — floating particles, aurora, a view of space; - Retro Disco — warm light, vintage furniture, vinyl, a classic multicolor dance floor. CAMERA Viewpoints: overview, from the sofa, beside the DJ desk, beneath the ball, at the window. Optional smooth drift and a slow cinematic orbit. Default to a stable camera. Support mouse, touch and keyboard, and keep the camera inside the walls. SIGNATURE FEATURES - Musical Aura: each track grows its own mix of color, light and motion; when tracks change, the atmosphere dissolves smoothly into the next. Users can save an aura as a preset. - Song Light Trail: a thin colored line on the seek bar that draws the song's changing atmosphere. At the end it can be turned into an abstract cover image. - Ambient Mode: hides the interface and calms the motion. INTERFACE AND ACCESSIBILITY - A minimal translucent player at the bottom and a collapsible settings panel. In fullscreen, controls hide after inactivity. - Responsive on desktop and mobile. - Reduced-motion mode, no-flash mode, adjustable intensity, readable labels, full keyboard control. No strobing by default. - Playback errors are explained specifically and never stacked as duplicates. PERFORMANCE - High / Balanced / Simple quality tiers; weak devices start on Simple. - Dynamic resolution: lower it when FPS drops below 50 and raise it back smoothly. - Cap rendering at about 60 FPS on 120–144 Hz displays. - Precompile shaders while the welcome screen is showing. - Music must keep playing smoothly under any load. PRIORITY Build a polished, working core first: the reactive ball, light floor, window, music controls and robots. Add the remaining details without compromising responsiveness or visual coherence.
shmopix @shmopixbznOriginally posted 2026.10.13
Built this with Claude Opus 5.5 🛠 A single HTML file powered by Three.js + Web Audio API. Load your own music from your computer and try it out. The prompt I used is in the next post if you want to build your own What would you build with it?🤔
x.com/shmopixbzn/status/2109943654873784569Archived 2026.10.23 20:06