Animazioni

Icone joypad con esplosioni di pixel

Una griglia di icone joypad colorate sul nero: ne scegli una e scoppia in particelle di pixel.

Settori: games
Colori: blackredgreenblueyellow
Stili: pixel particlesplayfuldark
Categoria: iconsselection

REFERENCE
- Gallery page: https://magpui.com/en/i/game-controller-icons-with-pixel-bursts-2c6611
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/game-controller-icons-with-pixel-bursts-2c6611/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/game-controller-icons-with-pixel-bursts-2c6611/clip.mp4
- Original post: https://x.com/jumeh/status/2095823458638971339 by @jumeh
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 selection grid of nine controller icons in different colors on a dark grid. Selecting one scales it up with a pixel particle burst in its color; the previous selection settles back.

DESIGN SYSTEM
- Background #0A0A0A with a faint 24px grid; icons 44px glossy with white highlight.
- Particles 3px squares in the icon color.

MOTION
- Select: icon scale 1 to 1.25 with spring (stiffness 500, damping 14), 16 particles burst outward 30-60px and fade, 500ms.
- Hover: icon tilts ±6deg.
- Deselect: scale back, 200ms.

SECTIONS
- Grid of icon buttons.

IMPLEMENTATION
- Framer Motion; particles as absolutely positioned divs removed after the animation; radio group semantics.
- 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
- Only one icon is selected at a time.
- Particles never block clicks.
- Arrow keys move the selection.

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