✓ 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 at top maps to crowns in air, but HTML range inputs render min at top on vertical, so dragging toward bottom increases value and submerges crowns — direction is actually correct mechanically, but `appearance: slider-vertical` is non-standard and broken in most browsers); mass/volume/density values are static (not live-updating); fall animation is absent (crowns just jump via translateY on input event, no tween/smooth fall); splash only triggers for depth 1–15% and has no per-crown positioning.
Slider direction is inverted (value=0 at top maps to crowns in air, but HTML range inputs render min at top on vertical, so dragging toward bottom increases value and submerges crowns — direction is actually correct mechanically, but `appearance: slider-vertical` is non-standard and broken in most browsers); mass/volume/density values are static (not live-updating); fall animation is absent (crowns just jump via translateY on input event, no tween/smooth fall); splash only triggers for depth 1–15% and has no per-crown positioning.