Task: Build a real-time microphone frequency-reactive hologr...

Prompt

Task: Build a real-time microphone frequency-reactive holographic visualization that reproduces the uploaded reference image /mnt/data/Jarvis wallpaper.jpg as closely as technically possible. Do not reinterpret the design. Do not turn it into a generic audio visualizer. The reference image is the visual authority. 1. REFERENCE COMPOSITION Canvas Use a full-screen viewport: width: 100vw height: 100vh Aspect ratio must adapt dynamically without stretching the visualization. Background must occupy the entire canvas with no visible border, frame, card, panel, or gradient UI container. Visual center The holographic object must be positioned at: X = 50% viewport width Y = 50% viewport height Use the smaller viewport dimension as the primary scale reference. baseSize = Math.min(window.innerWidth, window.innerHeight); The entire holographic structure should occupy approximately: 72–82% of the smaller viewport dimension The central globe itself should occupy approximately: 22–28% of the smaller viewport dimension The reference has a large amount of empty black space around the object. Preserve this negative space. 2. COLOR PALETTE Use only a tightly controlled cyan/teal/white palette. Background Primary background: #000504 Allow extremely subtle variation toward: #00110F #001A18 The background must remain visually almost black. Do not use blue, purple, pink, red, orange, or rainbow colors. Outer holographic structures Primary teal: #007F78 Secondary: #00AAA0 Bright reactive highlight: #00D8CD Maximum-energy highlight: #6DFFF5 Central globe Wireframe primary: #D8FFFC Secondary glow: #61FFF5 The center should be significantly brighter than the surrounding rings. 3. OPACITY HIERARCHY The visualization must have depth through transparency. Outer shell Base opacity: 0.08–0.20 Reactive peaks: 0.25–0.45 Intermediate rings Base opacity: 0.08–0.16 Reactive peaks: 0.20–0.35 Central globe Wireframe: 0.65–0.95 Central glow: 0.15–0.40 Avoid making the entire object uniformly bright. 4. CENTRAL HOLOGRAPHIC GLOBE The center is the primary focal point. Create a spherical object viewed almost directly from the front. Globe size Diameter: 24% ± 3% of viewport height/width reference depending on aspect ratio. Geometry Do not use a simple latitude/longitude globe. Create a dense triangular wireframe. Target: 20–28 longitudinal divisions 16–24 latitudinal divisions Then generate triangulated surface topology so the visible wireframe contains many small triangular cells. Target visual density: approximately 250–500 visible triangular cells The triangles should be relatively uniform. Globe appearance The interior must remain mostly transparent/dark. Only the thin geometric lines should define the sphere. Add: thin cyan/white wireframe soft outer glow very subtle interior haze Do not fill the sphere with opaque cyan. 5. GLOBE ANIMATION The globe should never appear completely static. Idle rotation Very slow rotation: 0.08–0.15 revolutions / second Use different tiny rotational rates on X/Y axes. Example: rotationY += 0.0007; rotationX += 0.00015; Avoid obvious spinning. The viewer should perceive it as an almost stationary holographic object. Audio deformation Microphone frequencies may cause extremely subtle deformation of the globe surface. Maximum deformation: 3–7% radius Do not let microphone input destroy the spherical form. Bass can create slow radial breathing. High frequencies can create microscopic surface vibration. 6. INNER CIRCULAR STRUCTURE Immediately surrounding the central globe, create a dark circular chamber. Approximate radius: 1.20–1.45 × globe radius This area should contain subtle circular/segmented geometry. Segments Create approximately: 48–80 radial segments The segments should appear as translucent vertical/curved structures around the globe. They should resemble the reference's dark teal segmented ring rather than equalizer bars. Segment behavior Bass: segment length scale = 1.00 → 1.25 Mid frequencies: segment brightness = 1.00 → 1.40 High frequencies: fine flicker = subtle Do not create exaggerated spikes. 7. INTERMEDIATE RINGS Create approximately 3–5 concentric holographic layers around the globe. Each layer has slightly different radius and behavior. Example normalized radii: Ring 1 = 1.45R Ring 2 = 1.65R Ring 3 = 1.90R Ring 4 = 2.15R Ring 5 = 2.40R Where: R = central globe radius These rings should not be perfect circles. They should contain controlled organic deformation. 8. OUTER ORGANIC RING This is one of the most important features. Create a large irregular translucent turquoise circular shell closely matching the reference. It should appear like a soft organic energy membrane around the central structure. Shape Base radius: 2.3–2.7 × globe radius Number of waveform control points: 96–160 The shape must remain approximately circular. Do not generate extreme jagged spikes. Idle deformation Use several low-frequency sine/noise functions: amplitude = 2–5% radius Animation speed: 0.05–0.15 Hz This creates slow organic breathing. 9. AUDIO-REACTIVE OUTER RING The microphone controls the outer membrane primarily through low-frequency FFT data. Use: 20–250 Hz for primary bass response. Normalize the bass energy. Map it to: ring radius ring thickness opacity local deformation glow intensity Expansion Idle: 1.00 Moderate sound: 1.04–1.10 Strong bass: 1.10–1.18 Hard maximum: 1.22 Never allow uncontrolled expansion. Damping Use attack and decay smoothing. Suggested: attack: 60–100 ms release: 250–450 ms This keeps the motion fluid instead of jittery. 10. FREQUENCY MAPPING Use a real FFT analyzer. Recommended: analyser.fftSize = 2048; Use logarithmic frequency grouping rather than treating every FFT bin identically. Bass Approx: 20–150 Hz Controls: outer radius large-scale ring deformation overall breathing Low-mid Approx: 150–500 Hz Controls: intermediate ring displacement segment movement ring thickness Mid Approx: 500–2000 Hz Controls: inner segmented geometry globe intensity secondary deformation High Approx: 2–10 kHz Controls: fine outer-edge movement particles micro-ripples shimmer Very high Above: 10 kHz Use only very subtle effects. Do not make high-frequency noise dominate the visualization. 11. AUDIO SMOOTHING Raw FFT values must never be applied directly to geometry. Use smoothing such as: smoothed += (target - smoothed) * smoothingFactor; Use separate smoothing constants for each frequency band. Recommended: bass attack: 0.12 bass release: 0.035 mid attack: 0.18 mid release: 0.055 high attack: 0.25 high release: 0.08 The visualizer should feel like a physical energy field, not a digital equalizer. 12. GLOW / BLOOM The reference depends heavily on restrained glow. Use additive blending where appropriate. Central globe glow Approximate bloom: strength: 1.0–1.8 radius: moderate threshold: low Outer ring glow Use weaker bloom: strength: 0.35–0.85 High-frequency particles Very small glow: strength: 0.2–0.5 The glow must remain concentrated around geometry. Do not create a giant neon halo that washes out the entire screen. 13. PARTICLES / ENERGY NOISE Add very subtle particles around the outer structure. Amount: 300–1200 particles depending on performance. Particle size: 0.5–2 px Most particles should be barely visible. Distribution: primarily around outer ring Do not fill the entire screen with stars. Audio behavior High-frequency energy can control: particle brightness particle displacement particle visibility Maximum displacement should remain small: 2–5% of outer radius 14. RING THICKNESS The holographic lines should be extremely thin. Primary ring line: 1–2 screen pixels At high DPI, scale using device pixel ratio but preserve the perceived thinness. Outer translucent membrane may contain: 1 bright edge + 1–3 faint neighboring glow layers Do not use thick solid outlines. 15. ANIMATION TIMING The system must combine three animation speeds. Layer A — ambient Very slow: 0.03–0.10 Hz Used for: outer membrane background haze slow ring breathing Layer B — globe Slow: 0.05–0.15 Hz Used for: sphere rotation subtle holographic movement Layer C — microphone Real-time: 20–15,000+ Hz frequency information Used for: ring deformation brightness micro movement particles The audio response should be immediate, while the resulting movement remains smooth. 16. IDLE STATE When microphone is OFF or silent: The visual must not disappear. Keep: globe visible rings visible outer membrane visible very subtle particle activity very slow movement Reduce intensity to roughly: 35–55% of active visual intensity The idle state should resemble a sleeping holographic AI interface. 17. MICROPHONE ON/OFF CONTROL Add one minimal futuristic control near the bottom-center or lower-right area. It must not interfere with the central orb. Control text MIC ON or MIC OFF OFF behavior When toggled OFF: stop microphone analysis stop audio-driven deformation release/close audio resources where appropriate return visualizer to idle animation Do not reload the page. ON behavior Request microphone permission only when the user intentionally activates the control. Then create: MediaStream AudioContext MediaStreamAudioSourceNode AnalyserNode 18. UI POSITIONING The visualization itself must dominate the screen. Recommended toggle location: bottom: 28–40px right: 28–40px or centered under the visualization with approximately: 24–32px of separation. UI opacity: 0.45–0.75 The control should feel like part of the holographic interface. Do not introduce conventional dashboard cards. 19. RESPONSIVE DESIGN Desktop For viewport width ≥ 1000 px: visual scale = 0.78 × min(width,height) Tablet For: 600–999 px use: visual scale = 0.74 × min(width,height) Mobile For: < 600 px use: visual scale = 0.72 × min(width,height) Reduce particle count and geometry complexity automatically. Very wide displays Never scale based only on width. Use: Math.min(width, height) so the globe does not become oversized on ultrawide monitors. 20. PERFORMANCE Target: 60 FPS Use GPU rendering wherever possible. Prefer: Three.js WebGL GPU shaders BufferGeometry Instancing where useful Avoid rebuilding entire geometries every animation frame. Update vertex buffers or shader uniforms instead. Automatically reduce particle count on low-performance devices. 21. VISUAL PROPORTION CHECK At a typical desktop resolution, the visual should approximately resemble: BLACK SPACE ┌─────────────────┐ │ outer membrane │ │ │ │ ┌─────────┐ │ │ │ │ │ │ │ GLOBE │ │ │ │ ◇◇◇◇◇ │ │ │ │ ◇◇◇◇◇ │ │ │ │ │ │ │ └─────────┘ │ │ │ └─────────────────┘ BLACK SPACE The central globe must remain the brightest and most geometrically precise element. 22. REFERENCE-MATCHING PRIORITY When making implementation decisions, prioritize the following in this exact order: 1. Overall composition 2. Central globe geometry 3. Outer organic membrane 4. Concentric ring structure 5. Cyan/teal color balance 6. Transparency 7. Glow/bloom 8. Frequency-reactive deformation 9. Particle effects 10. UI controls Do not sacrifice the reference appearance merely to make the audio response more dramatic. 23. ANTI-GENERIC-VISUALIZER RULE FORBIDDEN: equalizer bars radial audio bars rainbow spectrum large spikes audio waveform across the screen solid glowing sphere large neon circle Spotify-style visualizer music-player UI The output must look like a holographic energy/orb system whose geometry happens to be driven by sound. 24. FINAL IMPLEMENTATION REQUIREMENT Build the visualization as a complete working application. Use: HTML CSS JavaScript Three.js/WebGL Web Audio API The application must: start in MIC OFF mode display the idle hologram allow the user to toggle MIC ON request microphone access analyze real FFT frequency data map separate frequency ranges to separate visual layers smooth all reactions allow MIC OFF without reloading remain responsive maintain the reference composition Final instruction to the coding AI Treat /mnt/data/Jarvis wallpaper.jpg as the design reference, not merely inspiration. Reproduce its visual proportions, centered composition, dark negative space, cyan/teal translucent concentric structures, thin bright triangular globe, and irregular outer energy membrane. The microphone-reactive system must be integrated into this exact visual language. Do not replace the reference design with a conventional audio spectrum.