Crafts

OTP Input

A one-time code field where digits spring into place, backspace walks you back and a paste fills it in one go.

Six plain inputs, one array of digits and one array of refs. Each box is a real input stretched over a slot with its text and caret made transparent, so the browser still handles focus, selection and the numeric keypad while the slot draws what you see.

Typing keeps only the last digit and moves focus to the next ref. Backspace on an empty box clears the one before it and steps back, arrows walk across, and a paste fills from the start and lands focus after the last digit it placed. Focusing a box selects its digit, so typing over it just replaces it.

The slots are engraved rather than raised: the theme's well shadow on the page background, one shade below the card they sit on. Focus lights a slot with a hairline ring and a soft glow and lifts it 2px, so the box you're on is the only one that moves. A digit springs up out of a small blur and the old one leaves the way it came, and once every box is filled they turn green and hop in a quick wave from left to right.