Liquid
No library Beginner
A sky-blue liquid rises from the bottom of the box using translateY on a fill layer inside overflow:hidden. A faint curved surface ripple rides the top of the liquid. The check springs in after the fill completes.
A sky-blue liquid rises from the bottom of the box using translateY on a fill layer inside overflow:hidden. A faint curved surface ripple rides the top of the liquid. The check springs in after the fill completes.
Goal: Create a "Liquid" checkbox where the fill rises from the bottom like a liquid.
Visual behavior: A 28×28px box with overflow:hidden. Inside, an absolutely-positioned fill span (sky-blue gradient) starts at translateY(100%) and animates to translateY(0%) on check — rising from the bottom up in 380ms. A second thin elliptical span (the liquid surface ripple) tracks the same translateY animation, simulating the curved water surface. The check appears after the fill arrives (260ms delay), springing in. On uncheck, fill drops back down.
Technique: React useState. Box uses overflow:hidden + position:relative. Fill and ripple span use translateY transitions with matched durations. No keyframes, no library dependencies.
Accessibility: Hidden native <input type="checkbox">. Transitions skipped under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.