Motion

Card number reveal and copy

A masked card number reveals digit by digit when you tap the eye, then copies with a satisfying confirmation.

Industries: fintech
Colors: whiteblackindigo
Styles: minimalcleanmicrointeraction
Category: inputfintech

REFERENCE
- Gallery page: https://magpui.com/en/i/card-number-reveal-and-copy-6a39c7
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/card-number-reveal-and-copy-6a39c7/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/card-number-reveal-and-copy-6a39c7/clip.mp4
- Original post: https://x.com/nitishkmrk/status/2100473828035932433 by @nitishkmrk
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 card number field shown masked (4485 xxxx xxxx 7516) with an eye button. Tapping the eye reveals hidden digits one by one; a second action copies the full number and shows a check.

DESIGN SYSTEM
- Field white, 1px #E5E5E5, 12px radius, 18px semibold digits with tabular numbers.
- Eye button 28px, indigo #4F46E5 on #EEF2FF.

MOTION
- Reveal: each masked digit flips (rotateX 90 to 0) with 30ms stagger.
- Hide: reverse stagger.
- Copy: icon morphs to check, 180ms, and back after 1.5s.

SECTIONS
- Masked field.
- Eye toggle.
- Copy button.

IMPLEMENTATION
- Tabular-nums so width never changes; aria-pressed on the eye; announce Copied.
- 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
- Width stays constant in both states.
- Revealed number is never left visible after leaving the page.
- Copy works without revealing first.

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