SMS Code Autofill
A one-time code that arrives as a notification and pours itself into the boxes, digit by digit, with nobody typing.
Build a one-time-code field that fills itself from an arriving SMS. Structure: a six-box OTP row, with room above it for a notification banner, and a status line below. The whole component is the absence of typing, which means the banner has to be visible for the absence to register: 1. The banner springs DOWN from off-screen (y -30, stiffness ~300, damping ~26) - a dark pill with the sender name and the code. Fade it in instead and it reads as part of the page rather than as something that arrived. 2. The digits land one at a time, about 90ms apart. Each springs in from scale 0.4 and y -6 at stiffness ~640, so it falls into its box rather than materializing in it. Filling all six at once looks like a paste and teaches nothing. 3. As the last digit lands, the banner exits upward. A notification that lingers after its job is done is exactly the thing users swipe away. 4. The boxes then switch to a verified state - green borders - with a check beside the status line. Box borders track the state: hairline when empty, accent when filled, green when verified, each over 0.3s. The status line reads "waiting for the code" / "filling from the message..." / "verified, no typing" and is aria-live="polite". That sentence is what a screen reader gets, so it has to carry the story on its own. Under prefers-reduced-motion, render the code complete and verified with no sliding and no drops. Colors as tokens: paper boxes, ink for the banner, one accent for filled boxes, semantic green for verified. Use a placeholder sender name. 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.