REFERENCE
- Gallery page: https://magpui.com/en/i/volume-slider-with-elastic-droplet-320c19
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/volume-slider-with-elastic-droplet-320c19/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/volume-slider-with-elastic-droplet-320c19/clip.mp4
- Original post: https://x.com/gabriell_lab/status/2115116244412088442 by @gabriell_lab
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: Build a single elastic volume slider with an orange droplet thumb and a flexible track. Keep the rest of the interface out of scope.
DESIGN SYSTEM: Use a white surface, a roughly 280px track, gray #DEDEDE inactive stroke and orange #F39A18 active stroke, both 5px with round caps. Small gray speaker icons flank the track. Add faint tick dots below. The resting thumb is a pale rounded pill about 34x24px with an orange outline; the grabbed thumb grows to a 42x58px orange droplet with a centered white 13px numeric value. Use a neutral sans-serif.
MOTION: On pointer down, expand the thumb over 180ms with cubic-bezier(0.2,0.8,0.2,1). While dragging, update value and bend both SVG track segments toward the thumb position each frame. Allow bounded vertical displacement around 45px. On release, return the track to horizontal and thumb to its pill over 420ms with cubic-bezier(0.22,1.2,0.36,1). These timings are reconstruction targets.
SECTIONS: Muted icon, active curved stroke, inactive curved stroke, draggable thumb, numeric pressed state, tick dots and volume icon. Value range 0–100; idle, focused, pressed and dragging states.
IMPLEMENTATION: Use SVG cubic curves and Motion values for smooth pointer-driven geometry, with pointer capture. Provide a semantic range input and Arrow/Home/End keys, accessible value announcements and visible focus. Reduced motion keeps the track straight and value visible without overshoot. Avoid layout reads per frame and animate only one SVG.
ADAPT TO THE PROJECT: Reuse existing tokens, components and fonts; map these colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations; use placeholders.
SUCCESS CHECK:
- Dragging updates volume continuously from 0 to 100.
- The two track segments meet the droplet without gaps and settle after release.
- Keyboard input and reduced-motion mode remain fully functional.
