Split Label
No library Intermediate
The label text splits into left and right halves that slide apart on focus, revealing the active input field below in a dramatic reveal.
Your Name
LLM Prompt
Goal: Create a "Split Label" input animation.
Visual behavior: A labeled input field. The label text is divided at its midpoint into a left half and right half. When focused (or has a value), the label animates from center to the top of the field: the position shifts upward, the font size shrinks, and the left half translates a few pixels left while the right half translates right — splitting the label apart while moving it up. Color shifts from muted to accent. All reverses on blur if empty.
Technique:
- Wrapper div with position:relative and top padding to make space for the label
- Label absolutely positioned; transitions top/fontSize/color on active state
- Two inline spans for left/right halves, each with translateX transition
- Input below with border color transition on focus
- CSS transitions on all animated properties: ~250ms cubic-bezier(0.34,1.56,0.64,1)
Accessibility: Under prefers-reduced-motion, label jumps to its active position without sliding.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.