✓ 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=air, max=100/bottom=water is CSS-correct via writing-mode+direction rtl, but the visual label "Luft" is at top and "Wasser" at bottom — need to verify: with writing-mode:vertical-lr and direction:rtl, the max value appears at top, so slider top = value 100 = water, which is inverted); physics values are accurate (gold 19.3 g/cm³, fake 10.5 g/cm³, same 1000g mass), displaced volume updates live, Heureka overlay fires at slider end with star animation, but no animated fall — crowns move linearly with the slider rather than a discrete drop event.
Slider direction is inverted (min=0/top=air, max=100/bottom=water is CSS-correct via writing-mode+direction rtl, but the visual label "Luft" is at top and "Wasser" at bottom — need to verify: with writing-mode:vertical-lr and direction:rtl, the max value appears at top, so slider top = value 100 = water, which is inverted); physics values are accurate (gold 19.3 g/cm³, fake 10.5 g/cm³, same 1000g mass), displaced volume updates live, Heureka overlay fires at slider end with star animation, but no animated fall — crowns move linearly with the slider rather than a discrete drop event.