Newsletter Inline

Build an inline newsletter signup section. Structure: a short bold heading ("Get new components weekly"), then a pill-shaped input row: the email field on the left (monospace placeholder) and a round accent submit button with an arrow on the right, nested inside the pill. Under it, a one-line muted reassurance ("no spam, one email a week"). Submit: the whole input pill morphs into the success state in place - the form fades up and out (opacity 0, y -10, scale 0.96, 0.3s) while a full-width green-bordered pill fades in on a spring (scale from 0.85, stiffness ~380, damping ~22) reading "You're in" with a check that spins into place (rotate from -90deg, scale from 0, delayed ~0.1s). The reassurance line swaps to "check your inbox". No layout shift: both states live in the same fixed-height slot. Details: the arrow button scales 1.08 on hover, 0.9 on press. Keep the success state clickable to reset if this is a demo. Accessibility: proper input with a label (visually hidden is fine), the status line is aria-live="polite", and under prefers-reduced-motion states swap instantly. Colors as tokens: paper, ink, muted, one accent, semantic green for success only. 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.