Floating Label

Create a floating label input. A text input whose label sits inside the field as a placeholder, and floats up to the top border when the input is focused or has a value. Implementation: wrap input and label in a relatively positioned container. The label is absolutely positioned, vertically centered by default. When focused or non-empty, it moves to the top border (top around -8px), scales to 0.82 with transform-origin left center, gains bold weight, and gets a small horizontal padding with the page background color behind it so it 'cuts' the border. Transition everything 200ms with cubic-bezier(0.22, 1, 0.36, 1). While focused, both the label and the input border take the accent color. Details: the label must be a real <label htmlFor> pointing at the input's id (clicking it focuses the field); set pointer-events: none on it so it never blocks the caret; and track 'has value' from state, not CSS-only hacks, so autofill works. Under prefers-reduced-motion, jump between the two positions without animating. 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.