OTP Code Entry
Six boxes: the waiting box lifts, digits settle in, and a wrong code answers with one short nudge.
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 { useEffect, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · OTP Code Entry
*
* Six code boxes: the box waiting for input lifts, each digit settles
* into place as it is typed, and a wrong code answers with one shortAbout this pattern
Verification codes are typed under mild stress — the message just arrived, the code expires in a minute — so the field has to say where you are and whether it worked without a word. The box awaiting input lifts a couple of pixels and takes the accent color, each digit drops the last few pixels into place as it lands, and a rejected code shifts the whole row once and decays. The refusal is deliberately small: a repeated left-right oscillation reads as a cartoon, and on an error state it reads as panic. The result is also written out, so reduced-motion users and screen readers get the same answer.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Two-factor prompt
A refused entry gets one restrained shake, then the field is ready again.
Related patterns
- Login Error RecoverA refused sign-in expands its reason under the field, wipes only the password, and hands the caret back.
- Social Login ButtonsThe separator rules draw outward from their label, then the provider buttons rise in one after the next.
- Two Factor Method SwitchChoosing another second factor slides the selection ring, crossfades the instructions and re-arms the field.