✓ 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 maps to crown high in air, but HTML label "In der Luft" is at top and "Im Wasser" at bottom yet the crown math subtracts progress making it move downward — actually the crown moves DOWN as slider increases, but the slider thumb moves UP on a vertical range in browsers as value increases, meaning top=water/bottom=air is the user experience, which is inverted); mass/volume/density values are static (not live), only displacement updates dynamically; no fall animation (crown teleports linearly).
Slider direction is inverted (value=0 maps to crown high in air, but HTML label "In der Luft" is at top and "Im Wasser" at bottom yet the crown math subtracts progress making it move downward — actually the crown moves DOWN as slider increases, but the slider thumb moves UP on a vertical range in browsers as value increases, meaning top=water/bottom=air is the user experience, which is inverted); mass/volume/density values are static (not live), only displacement updates dynamically; no fall animation (crown teleports linearly).