Guide the next action at small moments such as input and errors.
<div class="form"><label>Work email</label><div class="field">mira@studio<span>.com</span></div><div class="bad">Something went wrong.</div><div class="good">Add your domain after @ to continue.</div><div class="status">READY TO CONTINUE</div></div>.form{box-sizing:border-box;width:min(82%,470px);padding:clamp(12px,3vmin,26px);border:1px solid var(--line);background:var(--surface);font-family:sans-serif}.form label{display:block;font:850 clamp(10px,max(2vmin,1vw),16px) sans-serif}.field{margin-top:clamp(6px,1.5vmin,12px);padding:clamp(8px,2vmin,15px);border:2px solid var(--accent);font:750 clamp(13px,3vmin,25px) sans-serif}.field span{animation:type 5s infinite}.bad,.good{margin-top:clamp(7px,1.7vmin,14px);font:700 clamp(10px,max(2vmin,1vw),17px) sans-serif}.bad{color:var(--accent);animation:hide 5s infinite}.good{color:var(--fg);animation:show 5s infinite}.status{margin-top:clamp(8px,2vmin,16px);padding:.7em;background:var(--accent);color:white;text-align:center;font:900 clamp(10px,max(1.7vmin,1vw),14px) sans-serif;animation:show 5s infinite}@keyframes hide{0%,25%{opacity:1}45%,85%{opacity:0}100%{opacity:1}}@keyframes show{0%,25%{opacity:0}45%,85%{opacity:1}100%{opacity:0}}@keyframes type{0%,25%{opacity:0}45%,85%{opacity:1}100%{opacity:0}}@media(min-width:700px){body > *{transform:scale(1.4)}.lines p,.branches div,.cards div{cursor:pointer}}Microcopy lives in labels, hints and error messages inside an interface. Explaining both the failure and a way to recover helps people continue from a blocked step.
The demo replaces a vague error with a specific fix, then returns the field to a valid state. The instruction must match the actual validation rule.
Use it when reviewing forms, empty states, checkout and signup waits.