Magnetic Label
Framer Light Advanced framer-motion
The label springs from center-left into the top-left corner of the input on focus using Framer Motion layout animation. Springs back on blur if the field is empty.
The label springs from center-left into the top-left corner of the input on focus using Framer Motion layout animation. Springs back on blur if the field is empty.
Goal: Create a "Magnetic Label" input animation using Framer Motion.
Visual behavior: A labeled input field. The label sits in the center-left of the input at rest (like a placeholder). When focused or when the field has a value, the label springs to the top-left corner above the input using Framer Motion layout animation: smaller font, accent color, elevated position. On blur with empty value, it springs back to center.
Technique:
- Framer Motion motion.label (or motion.span) with layout transition
- Animate position via absolute positioning changes (top, fontSize, color) tracked by isActive = focused || value.length > 0
- Spring transition: { type: 'spring', stiffness: 400, damping: 30 }
- Controlled input with value/onChange to detect empty state
- Border color transitions on the native input
Accessibility: Framer Motion respects prefers-reduced-motion. The input label is always visible, so screen readers always have context.
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.