REFERENCE
- Gallery page: https://magpui.com/en/i/medication-picker-with-a-curved-dial-9afcbf
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/medication-picker-with-a-curved-dial-9afcbf/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/medication-picker-with-a-curved-dial-9afcbf/clip.mp4
- Original post: https://x.com/Wuraoladesigns/status/2116551748848345362 by @Wuraoladesigns
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.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- medication objects: Soft glossy 3D render of a single medication object (round tablet with score line, asthma inhaler, two-tone capsule), cobalt blue #2F6BEA and white, studio lighting from top left, gentle soft shadow, transparent background, square 1:1
BUILD: A mobile step screen "What type of medication is it?" where the user picks a type by dragging a curved dial. In the center sits one large soft 3D object (round pill, inhaler, capsule, and more) inside a blurred blue glow; the previous and next objects peek in, cropped, at the left and right edges. Under it the type name in bold blue and a one-line gray description. Below that, a wide curved track shaped like an arc with small tick dots and a white thumb with a blue dot; dragging the thumb or swiping the object scrubs through types. A full-width blue Next button at the bottom. It should feel calm, tactile and precise, like turning a physical knob.
DESIGN SYSTEM: Phone frame 390x844, background #F6F7F9. Top bar: back chevron and centered title "Add medication" 14px medium #111. Question 22px semibold #111 centered, two lines, 24px below the bar. Object area about 220px tall; object about 120px, rendered images with soft top-left light, colors #2F6BEA and #FFFFFF; glow a radial gradient rgba(47,107,234,0.25) about 260px blurred 40px. Type name 24px semibold #2F6BEA, description 12px #8A8F98. Dial: arc band 320px wide, 56px tall, fill #ECEEF2, 9 tick dots 4px #B8BDC6, thumb 28x20px white pill with shadow 0 2px 6px rgba(0,0,0,0.12) and a 6px #2F6BEA dot; hint "Swipe to choose" 10px #A0A4AB. Next button 48px tall radius 14px #2F6BEA, white 15px medium text, 16px side margins.
MOTION: Screen enter: object scales 0.8 to 1 and fades in over 400ms cubic-bezier(0.22,1,0.36,1), label fades in 150ms later. Dial drag: thumb follows the arc path, snapping to the nearest tick with a spring (stiffness 300, damping 26). On type change the current object slides out sideways 120px, shrinks to 0.6 and drops to 40% opacity while the next one slides in from the edge to center over 450ms cubic-bezier(0.22,1,0.36,1); the name crossfades with a 6px blur over 250ms. The glow pulses slightly (scale 1 to 1.06) when a type settles. Leaving the step: whole content fades to white over 300ms.
SECTIONS: Top bar; question; object carousel with cropped neighbours; type name and description; curved dial with hint; Next button. States: idle, dragging, snapping, changed, leaving.
IMPLEMENTATION: React with Motion: the carousel as an x-offset driven by a motion value shared with the dial, the thumb positioned along an SVG arc path with getPointAtLength. Swiping the object and dragging the dial stay in sync. Keyboard: dial is a role=slider with aria-valuetext set to the type name, arrow keys step one type. prefers-reduced-motion: instant swap with a crossfade, no blur. Objects are pre-rendered transparent PNG or WebP, under 80KB each.
ADAPT TO THE PROJECT: Reuse the project's fonts, button component and color tokens, mapping the blue to the closest primary token. Do not copy the original renders or brand; use placeholder object images.
SUCCESS CHECK:
- Dragging the thumb along the arc snaps to ticks and moves the object carousel in sync.
- The type name and description change with a short blur crossfade.
- Arrow keys change type on the focused slider and reduced motion removes the slide and blur.
