OTP Input

Create an animated OTP (one-time code) input. A row of 4-6 square inputs, one digit each, in a monospace font. Typing a digit fills the box and automatically moves focus to the next; Backspace on an empty box moves focus back and clears the previous digit. Accept digits only (strip everything else), and support pasting the whole code: distribute the pasted digits across the boxes. Visual states: empty box has a hairline border; a filled box's border turns the accent color (200ms); when all digits are filled, all borders turn success green and the boxes do a small celebratory wave: each box hops up 6px and back, 350ms ease-out, staggered 60ms left to right. Below the boxes, a status line ('Enter the 4-digit code' / 'Code verified') with reserved height. Details: inputMode='numeric' for mobile keyboards, an aria-label per box ('Digit 1'...), and select-on-focus so typing over a filled box replaces it. Under prefers-reduced-motion, skip the wave. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.