A leading icon rotates and shifts on focus with a spring overshoot, while the border glows and a box-shadow ring appears. The icon color transitions from muted to accent, giving the field a lively focused state.
Goal: Create an "Icon Shift" input animation.
Visual behavior: The input has a leading icon (e.g. a search magnifier SVG). At rest, the icon is muted (low opacity/gray). On focus: the icon rotates 15° and translates slightly left (translateX(-2px)), its color transitions to the accent color, and a box-shadow glow ring appears around the input. The icon motion uses a spring cubic-bezier that overshoots, giving it a lively snapping feel. On blur everything reverses.
Technique:
- Render the wrapper as display: flex; align-items: center with a left icon div and the <input>
- Icon wrapper: transform on focus: translate(-2px) rotate(15deg); at rest: translate(0) rotate(0)
- transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1) — spring overshoot
- Icon SVG stroke color transitions via CSS transition: stroke 200ms ease (or change via a prop/class)
- Input border-color + box-shadow transition on focus (200ms ease)
- No padding adjustment needed; flex layout handles spacing naturally
Accessibility: Under prefers-reduced-motion, skip rotate and translate on the icon; only color and border-color transitions remain.
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.