Motion

OTP code shot in with a slingshot

Pull the slingshot and fling digits into the code boxes; a wrong code makes the whole row shake.

Industries: fintechmobile
Colors: whiteblackgrey
Styles: playfulphysicsminimal
Category: 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
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