Animazioni

Ruota di azioni neumorfica

Un bottone più morbido apre a cerchio cinque azioni tonde e poi le richiude: un menu radiale che sembra fisico.

Settori: productivity
Colori: light greywhiteblack
Stili: neumorphicsoft uiradial
Categoria: menufab

REFERENCE
- Gallery page: https://magpui.com/en/i/neumorphic-radial-action-wheel-cb828e
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/neumorphic-radial-action-wheel-cb828e/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/neumorphic-radial-action-wheel-cb828e/clip.mp4
- Original post: https://x.com/withAnimationUI/status/2110643020890849625 by @withAnimationUI
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 action button with a plus icon. Clicking it rotates the plus into an X and fans out six circular action buttons evenly around it; clicking again collapses them.

DESIGN SYSTEM
- Background #EDEDED. Buttons 56px circles #F5F5F5 with neumorphic shadows: -6px -6px 12px #FFFFFF and 6px 6px 14px rgba(0,0,0,.12).
- Icons 22px solid black.

MOTION
- Open: plus rotates 45deg (200ms); actions move from center to radius 96px at 60deg steps, spring (stiffness 420, damping 22), 35ms stagger clockwise.
- Close: reverse with 25ms stagger counter-clockwise, ease-in 180ms.
- Hover an action: pressed look (inset shadows) and scale 0.96.

SECTIONS
- Center toggle.
- Six actions with labels for screen readers.

IMPLEMENTATION
- Framer Motion variants with staggerChildren; menu semantics (aria-expanded, Escape closes, focus moves to the first action).
- 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
- Actions never overlap at any radius.
- Escape and outside click close it.
- Shadows look soft on both light and dark tokens.

1
Installa la skill
Lancia questi comandi una volta in Claude Code. La skill dà all'agente il mestiere per questo tipo di pezzo. Con altri agenti, segui le istruzioni nella pagina della skill.
frontend-design
```
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
2
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
Motion
3

Confronta con l'originale

Mettili uno accanto all'altro. Se qualcosa non torna, di' all'agente cosa esattamente: tempi, dimensioni, colori o spazi.

Installa la skill

Incolla il prompt nel tuo agente

Confronta con l'originale