REFERENCE
- Gallery page: https://magpui.com/en/i/liquid-water-drop-ui-controls-e11588
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/liquid-water-drop-ui-controls-e11588/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/liquid-water-drop-ui-controls-e11588/clip.mp4
- Original post: https://x.com/kshvbgde/status/2117695976081326366 by @kshvbgde
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: A set of liquid UI controls that look and behave like drops of water on a white surface: a row of three round icon buttons (bubble buttons), a pill select with a chevron, and a horizontal slider. Every surface is a glossy, slightly translucent blue droplet with a bright highlight, a darker rim and a soft blurred halo. Interactions are wet: clicking a bubble makes it splash and wobble, opening the select pours the options out of the pill as stacked droplets connected by thin liquid necks, the slider is a thin stream of water ending in a big drop that carries the value, and the whole kit can switch water theme (Aqua, Glacier, Lagoon, Abyss). It should feel playful, squishy and physical, with optional water sounds.
DESIGN SYSTEM: Centered on a white #FFFFFF stage, vertical stack with about 24px gaps. Bubble buttons: 3 circles 56px, gap 20px, icons drawn as thick dark navy strokes #1B2F6B (a flat ellipse, an asterisk, two linked rings), each with a small double highlight (two tiny white rounded rectangles) at the top. Select: pill 180x36px, radius 18px, label 14px bold grotesk sans #1B2F6B on the left, chevron right. Slider: track 260x6px, radius 3px; thumb is a 44px drop at the end of the filled stream with the value (e.g. 100) in 14px bold dark navy. Droplet material for every surface: radial gradient from #BFE6FF in the center to #5AB4F2 at the edge, inner top highlight rgba(255,255,255,0.85), darker inner rim #3A8FD8, outer halo 0 8px 24px rgba(90,170,240,0.35) plus a 6px soft blur ring, slight grain. Themes: Aqua (sky blue #6EC3FF), Glacier (pale ice blue #CDEBFF), Lagoon (turquoise #2FD3E0), Abyss (deep blue #2C4FD6 with navy text #0B1A4A).
MOTION: Bubble press: scale 1 to 0.9 on pointer down (90ms ease-out), release springs to 1.08 then 1 (spring stiffness 400, damping 14), and 6-10 small droplets burst out radially 20-50px, falling with gravity and fading over 500ms; icon jitters 2px. Hover on a bubble: a tiny droplet beads up toward the cursor and the bubble bulges 3px in that direction (260ms cubic-bezier(0.34, 1.56, 0.64, 1)). Select open: the pill stretches down and drips; options appear one by one as droplets 140x30px, stagger 70ms, each falling from the one above with a liquid neck (metaball bridge) that thins and holds, 380ms cubic-bezier(0.22, 1, 0.36, 1); the chevron flips 180deg in 200ms. Hovered option swells 1.05 and gets a brighter highlight. Choosing an option: the stack pulls back up into the pill (reverse, stagger 40ms) and the whole kit cross-fades to the chosen theme color over 400ms. Slider: dragging moves the drop along the stream; the stream wobbles with a small travelling sine wave (amplitude 2-3px) that settles in 600ms after release; dragging fast flings a few droplets off the track; at 0 the drop shrinks to 18px and the label hides, growing back as the value rises. Value text counts in real time.
SECTIONS: Parts: three bubble icon buttons, select (closed pill, open droplet stack with 3-4 options), slider (stream track, drop thumb with value). States: idle (gentle 3s breathing wobble on each drop, 1-2% scale), hover (bulge toward the pointer), pressed (squash), splash (burst droplets), select open, option hover, theme changing, slider dragging, disabled (desaturated, no wobble), reduced motion.
IMPLEMENTATION: React with Motion for springs and state, plus an SVG gooey filter (feGaussianBlur stdDeviation 8 + feColorMatrix alpha 18 -7) on a group that contains the droplets so the necks between the select options and the splash particles merge like liquid; draw the glossy highlights in a separate layer above the filter so they stay crisp. Alternatively render the drops as metaballs in a small WebGL fragment shader for real refraction. Optional short water sounds on press, open and drag, muted by default with a toggle. Real semantic controls under the visuals: button elements, a listbox select with arrow-key navigation and Enter to choose, and an input type range for the slider, with visible focus rings drawn as a brighter halo. prefers-reduced-motion: no splash or wobble, simple 150ms fades and scale. Keep particles under 30 at once and animate only transform and opacity outside the goo group.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map the blues to the closest existing color tokens and keep the theme names configurable. Never copy logos, brand names or icons from the original; use simple placeholder icons.
SUCCESS CHECK:
- Clicking a bubble squashes it, springs it back and throws a few droplets that fall and fade.
- Opening the select pours out the options as droplets joined by liquid necks, and choosing one re-tints the whole kit.
- The slider is fully keyboard operable, its drop shows the live value and the stream wobbles and settles after dragging.
