Liquid Fill
No library Advanced
An animated liquid wave rises from the bottom of the input via clip-path polygon updated by requestAnimationFrame on focus. The wave oscillates continuously while focused.
LLM Prompt
Goal: Create a "Liquid Fill" input with an animated wave rising from the bottom on focus.
Visual behavior: The input has a semi-transparent background. On focus, a liquid wave rises from the bottom using a clip-path polygon that is updated every animation frame via requestAnimationFrame. The wave has a sinusoidal top edge (computed from Math.sin) that oscillates continuously while focused. The fill rises to ~65% of the input height and stays there oscillating. On blur, the wave sinks back down. The fill is a translucent accent gradient.
Technique:
- Wrapper div with position:relative
- Fill layer: position:absolute, inset:1px, border-radius, gradient background, clip-path updated via state
- clip-path polygon: bottom two corners (100% 100%, 0% 100%), then up to fillY%, then along the top with sinusoidal y values computed per x point (20 points), then close
- phase ref increments each frame by ~0.06 for wave speed
- fillRef lerps toward targetFill (65% focused, 100% blurred) each frame
- input sits above (position:relative, background:transparent)
- Under prefers-reduced-motion: static clip-path polygon, no RAF
Accessibility: Static fill state under prefers-reduced-motion. Border color provides focus indicator.
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.