OTP Paste Fill
A pasted block of digits lands in the boxes as a quick left-to-right cascade instead of appearing all at once.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useRef, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · OTP Paste Fill
*
* A pasted or autofilled code lands in the boxes as a quick left-to-right
* cascade: each digit fades in a beat after the one before it, with aAbout this pattern
Six digits arriving in the same frame look like a glitch: the field was empty, and now it is not. Staggering them by a few dozen milliseconds each turns the same event into something the eye can follow — a light passes along the row and the digits settle in behind it, finishing well inside half a second so nobody is waiting on their own clipboard. Typing is deliberately excluded: a single new character appears immediately, because a person entering digits by hand is already generating the rhythm the cascade exists to supply. The platform's own suggestion strip runs the same code path, so an autofill and a clipboard paste behave identically.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Two-factor prompt
The keyboard suggestion that drops a texted code into the field.
Related patterns
- File Drop Zone ActiveThe dashed outline energizes and the target lifts off the page while a file is held over it.
- Quantity AdjustThe count rolls in the direction it moved and the order total takes a brief tint.
- Slider Drag ValueThe handle stays under the finger while held, with a value bubble that rises on grab.