REFERENCE
- Gallery page: https://magpui.com/en/i/controls-with-shared-moving-surfaces-b11aed
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/controls-with-shared-moving-surfaces-b11aed/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/controls-with-shared-moving-surfaces-b11aed/clip.mp4
- Original post: https://x.com/keviduk/status/2115445879725256843 by @keviduk
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 compact family of controls that share one rounded track and white movable surface: toggle, numeric stepper, segmented choice and discrete slider. Preserve visual continuity instead of replacing unrelated widgets.
DESIGN SYSTEM: White background #fafafa, muted gray track #d9dcdd, dark text #272827 and bright green #13cc39. Use a neutral sans serif at 14px. Base dimensions around 100 by 28px, radius 4px and 2px inset; toggle around 68 by 40px. White thumb with a subtle gray shadow. Keep optional dimension annotations outside the usable control.
MOTION: On selection animate thumb translation and width over 280ms with cubic-bezier(0.22,1,0.36,1); green fill follows the selected value. When changing control type, interpolate the shared track dimensions and thumb bounds over 400ms with the same easing; fade changing labels over 120ms. Use these as implementation targets, not measured timings.
SECTIONS: Toggle with green checked state and white thumb; stepper with minus, centered count and plus; three segments for time periods with active white surface; discrete slider with green progress and white thumb, plus a value label above it. Support idle, focus, pressed, disabled and selected states.
IMPLEMENTATION: Use React and Motion shared layout transitions to retain track and thumb identity. Keep real button, switch and slider semantics; arrows adjust values and visible focus outlines remain outside the track. Use at least 44px transparent hit areas. Reduced motion changes state instantly. Animate only the active widget; no continuous animation.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts. Map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations; use placeholders.
SUCCESS CHECK:
- All four controls share track, inset and thumb styling.
- Selection and type changes maintain spatial continuity without label jumps.
- Keyboard operation and reduced-motion states work without animation.
