One-time Code Entry with SMS Preview

A patient portal's verification step built around six code boxes that behave the way people expect: typing advances, Backspace steps back, a pasted or autofilled code spreads across the boxes, a wrong code says how many tries remain, and three misses lock the boxes until a new code is sent. A phone beside it shows the text message, with a button that simulates the system autofill.

What's inside

01
Code entry
shake on error
02
Text message preview
none

How to use it

From prompt to a live page.

01
Try the page
The preview is the shipped page: one job, one mechanic, every state wired. Scroll, type, click.
02
Pick a palette
Token sets re-tint the page live. The prompt carries the one you chose.
03
Pick your stack
Single HTML, or the route your framework keeps for this job: not-found page, auth route, pricing route.
04
Copy the prompt
It quotes the page block by block with the tokens, the motion script and the rules.
05
Wire it up
Swap the placeholder copy, point the form or the countdown at your backend, keep the structure.