Motion

Game controller icons with pixel bursts

A grid of colorful controller icons on black: select one and it pops with pixel particles.

Industries: games
Colors: blackredgreenblueyellow
Styles: pixel particlesplayfuldark
Category: 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
Install the skill
Run these commands once in Claude Code. The skill gives the agent know-how for this kind of piece. With other agents, follow the instructions on the skill page.
frontend-design
```
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
2
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
Motion
3

Compare with the original

Put the two side by side. If something is off, tell the agent exactly what: timing, size, color or spacing.

Install the skill

Paste the prompt in your agent

Compare with the original