REFERENCE
- Gallery page: https://magpui.com/en/i/glass-orb-morphing-into-a-search-bar-457a2f
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/glass-orb-morphing-into-a-search-bar-457a2f/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/glass-orb-morphing-into-a-search-bar-457a2f/clip.mp4
- Original post: https://x.com/avstorm/status/2102098222747398166 by @avstorm
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 floating assistant control: a dark liquid-glass capsule with a moving iridescent light inside, over a wallpaper. Activating it morphs the capsule smoothly into a wide search field; dismissing morphs it back.
DESIGN SYSTEM
- Capsule 140x60, radius full, background rgba(20,20,24,.55) with backdrop blur 20px and 1px white 20% border.
- Inner light: blurred gradient of #A78BFA, #60A5FA, #F472B6 moving along the long axis.
MOTION
- Morph: width 140 to 560px and height 60 to 52px with spring (stiffness 220, damping 24); inner light stretches and fades as the input text appears.
- Idle: light drifts back and forth, 3s ease-in-out.
- Dismiss: reverse, input text fades first.
SECTIONS
- Capsule.
- Search field state with placeholder and icon.
IMPLEMENTATION
- Framer Motion layout animation on one element; CSS backdrop-filter; the light as an animated gradient inside.
- 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
- Morph uses one element (no swapping), so it feels continuous.
- Focus lands in the input after the morph.
- Escape returns to the orb.
