REFERENCE
- Gallery page: https://magpui.com/en/i/sliders-you-can-fling-1dee2c
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/sliders-you-can-fling-1dee2c/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/sliders-you-can-fling-1dee2c/clip.mp4
- Original post: https://x.com/ggsimm/status/2099497518627184949 by @ggsimm
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 panel of settings sliders (Exposure, Bloom, Field of view, Samples). Dragging a thumb vertically away from the track stretches an elastic tether; releasing launches the thumb along an arc and it springs back onto the track at the new value.
DESIGN SYSTEM
- Panel #1C1C1F, labels 12px #9CA3AF, values right-aligned monospace.
- Track 2px #3F3F46, fill white, thumb 10px white, arc dashed 1px #6366F1.
MOTION
- Off-track drag: tether stretches with rubber-band resistance (distance * 0.55).
- Release: thumb follows a projectile arc using release velocity, then snaps to the track, spring (stiffness 260, damping 18).
- The dashed arc trail fades over 500ms.
SECTIONS
- Four slider rows with values.
IMPLEMENTATION
- Framer Motion drag with dragElastic; native input range kept for keyboard and screen readers.
- prefers-reduced-motion: skip the animation and show the end state.
ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.
SUCCESS CHECK
- Value only changes where the thumb lands.
- Normal horizontal drag still works precisely.
- Arrow keys work.
