All MicroEvals
Create a production-ready, single-file HTML/CSS/JS interacti...
Create MicroEval
Header image for Create a production-ready, single-file HTML/CSS/JS interacti...

Create a production-ready, single-file HTML/CSS/JS interacti...

Prompt

Create a production-ready, single-file HTML/CSS/JS interactive simulation of a realistic Black Hole (Kerr/Schwarzschild metric inspired) with high visual fidelity and smooth performance across desktop and mobile devices. Technical & Visual Requirements: - Rendering Engine: Use Three.js or pure WebGL shaders (Raymarching / Gravitational Lensing shader preferred). - Gravitational Lensing: Real-time bending of background starfield light and the accretion disk around the event horizon. - Accretion Disk: Volumetric/particle-based or shader-driven disk with dynamic rotation, temperature color gradient (bluish-white hot inner core to reddish outer rim), and subtle Doppler beaming/asymmetry. - Post-Processing: Bloom effect, space distortion glow, and dynamic exposure. Controls & UI: - Desktop: Mouse drag to orbit/rotate camera, scroll wheel to zoom, click-and-drag panning. - Mobile: Touch gestures (one-finger rotate, pinch-to-zoom, two-finger pan) with smooth inertia. - UI Panel (lil-gui / dat.gui via CDN): Collapsible controls for Black Hole Mass/Scale, Spin Speed, Accretion Disk Brightness, Bloom Intensity, and Camera FOV. - Presets: "Cinematic Mode" (hides UI, auto-orbit camera) and "Performance Mode" (caps devicePixelRatio and lowers shader iterations for mobile GPUs). Code Structure & Compatibility: - Single standalone HTML file using CDN imports for libraries. - No local external asset dependencies (generate stars and disk noise procedurally). - Responsive full-screen canvas handling window resizing seamlessly. - Clean, well-commented JavaScript code optimized for 60 FPS.

A system prompt was added to support web rendering

Drag to resize
Drag to resize
Drag to resize
Drag to resize