✓ 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 top="Luft", max=100 bottom="Wasser", but vertical-lr + direction:rtl CSS means dragging toward the "Wasser" label actually increases value correctly in most browsers — however the writing-mode/rtl combination is browser-inconsistent and the label layout implies top=air/bottom=water which physically matches but the CSS rendering is unreliable); all physics values (ρ_gold=19.3, ρ_gilded=8.5, V_gold=51.8 cm³, V_gilded=117.6 cm³) are correct and the gilded crown visually displaces more water, Heureka overlay with animated elements is a strong finish.
Slider direction is inverted (min=0 top="Luft", max=100 bottom="Wasser", but vertical-lr + direction:rtl CSS means dragging toward the "Wasser" label actually increases value correctly in most browsers — however the writing-mode/rtl combination is browser-inconsistent and the label layout implies top=air/bottom=water which physically matches but the CSS rendering is unreliable); all physics values (ρ_gold=19.3, ρ_gilded=8.5, V_gold=51.8 cm³, V_gilded=117.6 cm³) are correct and the gilded crown visually displaces more water, Heureka overlay with animated elements is a strong finish.