✓ Two crowns ✓ Same mass, different density ✓ Vertical slider ✓ Slider works — Slider controls crowns — Slider direction correct ✓ Full slider range — Fall animation ✓ Water displacement ✓ Rising water level ✓ Splash effects ✓ Physics correct — Live mass value — Live volume value — Live density value ✓ Live displaced water ✓ Gilded displaces more ✓ Heureka animation ✓ No external deps ✓ Light bg / dark text ✓ Self-contained HTML
Slider is a custom-draggable div that controls water level and displaced-water readouts correctly, but the crowns themselves never visually move into the water — there is no fall animation, no crown submersion visual, and the slider direction mapping is inverted (dragging down increases submersion, which is correct physically, but top=0%=air and bottom=100%=water matches the brief's requirement; however the thumb starts at top=0 meaning crowns in air, so direction is technically correct yet the crowns never actually descend); mass/volume/density values are static HTML, not live-updated, failing three live-value requirements.
Slider is a custom-draggable div that controls water level and displaced-water readouts correctly, but the crowns themselves never visually move into the water — there is no fall animation, no crown submersion visual, and the slider direction mapping is inverted (dragging down increases submersion, which is correct physically, but top=0%=air and bottom=100%=water matches the brief's requirement; however the thumb starts at top=0 meaning crowns in air, so direction is technically correct yet the crowns never actually descend); mass/volume/density values are static HTML, not live-updated, failing three live-value requirements.