✓ 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 direction is inverted (min=0 at top means air, but the vertical slider's visual top maps to value=0 in most browsers — however the hint text says "Oben=Luft, Unten=Wasser" and the code maps value/100 directly to submersion depth, which is correct semantically but the `writing-mode: vertical-lr; direction: rtl` CSS may render the thumb at the bottom for value=0, making the physical drag direction ambiguous/inverted); no fall animation (crowns teleport to position rather than animate independently), but physics values, live readouts, splash, rising water, HEUREKA overlay with confetti, and comparison bars are all solidly implemented.
Slider direction is inverted (min=0 at top means air, but the vertical slider's visual top maps to value=0 in most browsers — however the hint text says "Oben=Luft, Unten=Wasser" and the code maps value/100 directly to submersion depth, which is correct semantically but the `writing-mode: vertical-lr; direction: rtl` CSS may render the thumb at the bottom for value=0, making the physical drag direction ambiguous/inverted); no fall animation (crowns teleport to position rather than animate independently), but physics values, live readouts, splash, rising water, HEUREKA overlay with confetti, and comparison bars are all solidly implemented.