Contact Form

Build a complete contact form with animated states: name, email, message. Fields: each field is a bordered box (1.5px border, medium radius) with its label INSIDE it. At rest the label sits where a placeholder would. On focus or when the field has a value, the label moves to the top-left edge and shrinks to about 9px (180ms). Pad the input top so text sits under the floated label. The message field is a textarea about 58px tall with resize disabled. Focus turns the border and label to the accent and adds a 3px soft accent ring. Validation rules: name is required; email is required and must look like an address; message needs at least 10 characters ("A little more, please"). When to show errors: - Judge a field on blur, not while the person is typing. An empty field they tabbed through stays quiet until submit. - Once a field shows an error, re-check it on every change so the error disappears the moment it is fixed. - On submit, check everything, show all errors, and move focus to the first broken field. Error look: border and label turn destructive red, and a small message with an alert icon and a word ("Required", "Check the address") appears at the top-right edge of the field, sliding down 3px and fading in over 160ms. Put it inside the field's frame so it never pushes the layout. Sending: the submit button stays in place, becomes disabled, and shows a turning spinner plus "Sending…" for as long as the request takes. Use aria-busy on the form. Success: the form fades out (200ms, rising 8px) and a success panel fades up 10px (320ms) into the SAME fixed-height area, so nothing below moves. It has a success-colored circle with a check that pops in on a spring 80ms later, "Message sent", a line like "Thanks Sam. We will reply to sam@acme.co within a day." using the values they typed, and a "Send another" text button that resets the form. Give the panel role="status", tabindex -1, and move focus to it if the person was working inside the form. Accessibility: real label elements with htmlFor, correct type and autocomplete (name, email), aria-invalid and aria-describedby on broken fields, role="alert" on error messages. Status is never color alone: every error has an icon and a word. Under prefers-reduced-motion, all of these transitions are instant and the spinner stops turning. Colors as tokens: surface for fields, hairline borders at rest, accent for focus, destructive for errors, success only for the sent panel, primary with on-primary for the submit button. 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.