REFERENCE
- Gallery page: https://magpui.com/en/i/glass-orb-becomes-floating-arrow-9d6d1c
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/glass-orb-becomes-floating-arrow-9d6d1c/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/glass-orb-becomes-floating-arrow-9d6d1c/clip.mp4
- Original post: https://x.com/kushsolitary/status/2113254488790495682 by @kushsolitary
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 only a floating dark-glass status widget that emerges above a bottom toolbar. Its round body stretches into a vertical capsule, lifts a glowing upward arrow, returns to a compact orb higher on screen, and disappears. Use a neutral demo surface rather than recreating a desktop.
DESIGN SYSTEM: Use an approximately 64px circular body expanding to a 64 by 180px capsule, with a fully rounded outline. These are implementation targets, not measured source dimensions. Use translucent #141416 at 75% opacity, backdrop blur 18px, a thin #FFFFFF33 rim and a soft black shadow. Center a white 22px arrow with a faint pink #FFD8E8 glow. No text inside the widget.
MOTION: On a demo trigger, reveal the orb from below with opacity 0 to 1 and translateY 32px to 0 over 300ms, cubic-bezier(0.22,1,0.36,1). Stretch height from 64 to 180px while preserving width over 420ms, with the arrow near its top. Lift the body about 140px and compress back to a circle over 500ms, then shrink the arrow and body and fade out over 300ms. Use cubic-bezier(0.65,0,0.35,1) for the stretch and cubic-bezier(0.22,1,0.36,1) for the lift. Suggested timing recreates the visible sequence rather than claiming exact source timing.
SECTIONS: Hidden state; small orb just above the toolbar with a short upward chevron; extended translucent capsule with a glowing arrow near its top; elevated compact orb with a full upward arrow; fading orb; hidden state. Keep the backdrop visible through the lower capsule.
IMPLEMENTATION: Use Motion keyframes with an SVG arrow and a clipped glass shell. Animate transforms and opacity for travel; restrict dimensional animation and blur to this small isolated element. Avoid a WebGL scene. Give the demo trigger a descriptive label, visible keyboard focus, Enter and Space activation, and disable repeat activation during playback. With prefers-reduced-motion show a static arrow chip briefly without travel or stretching.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map the suggested colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original; use placeholders.
SUCCESS CHECK:
- The orb visibly stretches into a narrow glass capsule and returns to a circle while rising.
- The arrow stays crisp and the translucent lower body reveals the backdrop without layout shift.
- Keyboard activation and reduced-motion playback both work without overlapping runs.
