✓ 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 means crowns in air, but HTML range sliders render min at top natively so the visual top position maps to value=0=air, which is actually correct semantically — however the RAF loop runs unconditionally every frame rather than only on input, and the "fall animation" is just linear interpolation via slider drag with no autonomous drop motion.
Slider direction is inverted (value=0/top means crowns in air, but HTML range sliders render min at top natively so the visual top position maps to value=0=air, which is actually correct semantically — however the RAF loop runs unconditionally every frame rather than only on input, and the "fall animation" is just linear interpolation via slider drag with no autonomous drop motion.