✓ 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 (CSS rotate(180deg) flips it so dragging up = increasing value = crowns descend, but the label says "slide down" — the physical handle motion is upward to submerge), and crown positions are driven from `bottom` percentage but `crownGold.y` starts at 50 and increases downward, creating a positional logic mismatch that results in crowns appearing to rise as the slider increases rather than fall visually.
Slider direction is inverted (CSS rotate(180deg) flips it so dragging up = increasing value = crowns descend, but the label says "slide down" — the physical handle motion is upward to submerge), and crown positions are driven from `bottom` percentage but `crownGold.y` starts at 50 and increases downward, creating a positional logic mismatch that results in crowns appearing to rise as the slider increases rather than fall visually.