✓ 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 crowns in air, but the vertical-lr + rtl CSS trick makes the physical thumb move opposite to the label hints — top thumb position yields value=0 which is "air", yet the hints read "↑ Luft" at top and "↓ Wasser" at bottom, seemingly correct in label but the writing-mode/direction combination actually renders the slider inverted on most browsers); water rise correctly differs between containers (4 vs 6 rows), same-mass/different-density physics are solid, but the ASCII crown horizontal centering is off (ALOY vs CROWN widths differ) and the animation loop is purely frame-count driven with no delta-time, causing splash and wave speed to vary with display refresh rate.
Slider direction is inverted (min=0 at top maps to crowns in air, but the vertical-lr + rtl CSS trick makes the physical thumb move opposite to the label hints — top thumb position yields value=0 which is "air", yet the hints read "↑ Luft" at top and "↓ Wasser" at bottom, seemingly correct in label but the writing-mode/direction combination actually renders the slider inverted on most browsers); water rise correctly differs between containers (4 vs 6 rows), same-mass/different-density physics are solid, but the ASCII crown horizontal centering is off (ALOY vs CROWN widths differ) and the animation loop is purely frame-count driven with no delta-time, causing splash and wave speed to vary with display refresh rate.