Animazioni

Bottone di vetro 3D per agenti

Un bottone Ask agents reso come vetro spesso e trasparente, che rifrange un arcobaleno sul bordo mentre ruota.

Settori: ai
Colori: whitesilverrainbow
Stili: glassrefractionprismatic
Categoria: 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
Incolla il prompt nel tuo agente
Premi Copia prompt qui sopra, apri il progetto nell'agente e incollalo. Il prompt contiene i link ai fotogrammi originali, così l'agente li guarda prima di costruire.
Claude Code Codex
Usa
React Three Fiber Three.js Spline
2
Confronta con l'originale
Mettili uno accanto all'altro. Se qualcosa non torna, di' all'agente cosa esattamente: tempi, dimensioni, colori o spazi.

Incolla il prompt nel tuo agente

Confronta con l'originale