Animazioni

Numero della carta da mostrare e copiare

Il numero della carta mascherato si rivela cifra dopo cifra quando tocchi l'occhio, poi si copia con una conferma soddisfacente.

Settori: fintech
Colori: whiteblackindigo
Stili: minimalcleanmicrointeraction
Categoria: inputfintech

Vedi originale

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
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