✓ 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 maps to air, but the vertical CSS styling with bt-lr and slider-vertical is browser-inconsistent and unreliable), displacement math conflates volume fractions with actual geometric submersion (crowns move down at same rate regardless of size), no true fall animation (crowns teleport frame-to-frame via full SVG rebuild), and the gilded crown density of 10.1 g/cm³ is plausible but the submerged-volume calculation is physically incorrect (both crowns reach 100% submerged simultaneously at slider=100 rather than based on geometry).
Slider direction is inverted (min=0 at top maps to air, but the vertical CSS styling with bt-lr and slider-vertical is browser-inconsistent and unreliable), displacement math conflates volume fractions with actual geometric submersion (crowns move down at same rate regardless of size), no true fall animation (crowns teleport frame-to-frame via full SVG rebuild), and the gilded crown density of 10.1 g/cm³ is plausible but the submerged-volume calculation is physically incorrect (both crowns reach 100% submerged simultaneously at slider=100 rather than based on geometry).