Animazioni

Codice OTP sparato con una fionda

Tendi la fionda e lanci le cifre nelle caselle del codice; se il codice è sbagliato tutta la riga trema.

Settori: fintechmobile
Colori: whiteblackgrey
Stili: playfulphysicsminimal
Categoria: otpmicrointeraction

REFERENCE
- Gallery page: https://magpui.com/en/i/otp-code-shot-in-with-a-slingshot-0153e4
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/otp-code-shot-in-with-a-slingshot-0153e4/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/otp-code-shot-in-with-a-slingshot-0153e4/clip.mp4
- Original post: https://x.com/kail_designs/status/2100675157115404344 by @kail_designs
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 one-time-code screen with six boxes at the top and a slingshot at the bottom with floating digits around it. Dragging a digit into the band and releasing launches it along an arc into the next empty box.

DESIGN SYSTEM
- Background white, boxes 36px with 1px #E5E5E5, active box #F59E0B border.
- Digits 14px grey scattered on a baseline; slingshot as a simple black Y.

MOTION
- Pull: band stretches toward the pointer, max 120px.
- Release: digit follows a parabolic arc to the target box, 500ms, then lands with a squash (scaleY 0.8, 80ms).
- Wrong code: boxes shake translateX ±6px x3 over 300ms and turn red #EF4444, then clear.

SECTIONS
- Code boxes.
- Slingshot and digit pool.

IMPLEMENTATION
- Keep a real hidden input (inputmode numeric, autocomplete one-time-code) so typing and SMS autofill work; the slingshot is decoration on top.
- 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
- Autofill still fills all six boxes.
- Every launched digit lands in the next empty box.
- Shake is readable and returns focus to the first box.

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