✓ 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 (value=0/top puts crowns at top of container, but value=100/bottom also means submerged — however the crown Y calculation uses `(1-progress)*height` making slider-bottom=submersion which is correct directionally, BUT the slider thumb at the bottom visually reads as 100 and crowns go in, so direction is debatable; more critically, the water level visualization is fundamentally broken — water height is calculated as displaced_volume × (280/100) px scaling making it disproportionate and disconnected from actual container geometry, and the base water level is zero so the "water" only appears as displaced volume with no pre-existing water body, while the crowns have no true fall animation (they snap via CSS top positioning with no keyframe/fall sequence).
Slider direction is inverted (value=0/top puts crowns at top of container, but value=100/bottom also means submerged — however the crown Y calculation uses `(1-progress)*height` making slider-bottom=submersion which is correct directionally, BUT the slider thumb at the bottom visually reads as 100 and crowns go in, so direction is debatable; more critically, the water level visualization is fundamentally broken — water height is calculated as displaced_volume × (280/100) px scaling making it disproportionate and disconnected from actual container geometry, and the base water level is zero so the "water" only appears as displaced volume with no pre-existing water body, while the crowns have no true fall animation (they snap via CSS top positioning with no keyframe/fall sequence).