Motion

3D glass agent button

An Ask agents button rendered as thick transparent glass, refracting a rainbow across its edge as it rotates.

Industries: ai
Colors: whitesilverrainbow
Styles: glassrefractionprismatic
Category: button3d

REFERENCE
- Gallery page: https://magpui.com/en/i/3d-glass-agent-button-621fd6
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/3d-glass-agent-button-621fd6/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/3d-glass-agent-button-621fd6/clip.mp4
- Original post: https://x.com/HeyLabii/status/2098020522596708428 by @HeyLabii
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 hero-size pill button made of thick clear glass with a gradient sparkle icon and the label Ask agents, slowly rotating so light refracts into rainbow caustics on its rim.

DESIGN SYSTEM
- Light grey studio background #E6E8EC; glass pill 360x96 with 48px radius; label 34px white with soft shadow; icon gradient blue to orange.

MOTION
- Idle rotation: rotateY ±10deg over 6s ease-in-out.
- Hover: lifts 6px and rim highlight intensifies.
- Press: scale 0.97 for 120ms.

SECTIONS
- Glass pill mesh.
- Label and icon inside.

IMPLEMENTATION
- R3F MeshTransmissionMaterial (thickness 1.2, chromaticAberration 0.06) with an HDR environment; or a pre-rendered loop for a static site.
- 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
- Rainbow appears only on edges, not the face.
- Label stays readable at all angles.
- A plain CSS button fallback exists.

1
Paste the prompt in your agent
Hit Copy prompt above, open your project in the agent and paste it. The prompt links the original frames, so the agent can look at them before building.
Claude Code Codex
Uses
React Three Fiber Three.js Spline
2
Compare with the original
Put the two side by side. If something is off, tell the agent exactly what: timing, size, color or spacing.

Paste the prompt in your agent

Compare with the original