Enter the code we sent toama.mensah@northwind.app

Things to try

Type six digits. The last one lands, and the cells fold into a dark "Verifying" pill with a spinner.
See an error. Enter 482910. The field shakes once, then reshapes into a red “Try again” pill. Choose another code to return to the cells.
Watch it pass. The pill turns green, the spinner becomes a check and "Verifying" becomes "Verified". The same envelope morphs into one with a tick. A wrong code morphs it into a removed envelope first.
Paste a code, or let your phone fill it in. One real input sits under the cells, so typing, pasting and one-time-code autofill all work.
Use another code (it was "Resend code" a moment ago) to start again.

Install

npx shadcn@latest add https://your-docs-site/r/otp-input.json

The install command adds these for you. If you copy the code by hand, install them yourself.

npm install @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motion

Motion lays out the field as it contracts into a status pill, and gives the state word a short enter/exit transition.
The envelope is one icon the whole way, so it morphs between the open, removed and validated marks. The status icons and copy are ordinary React elements; the colour transition and error shake are plain CSS.
The colour is plain CSS: the pill's background eases from ink to red or green. The error shake uses only translate, runs once, and is removed for reduced motion.

In an app the result would come from your server; here 482915 passes and other six-digit codes fail. The address is made up.