A character counter and progress bar slide in below the input on first focus or keystroke. The counter and bar color shift from neutral → orange → red as the character limit approaches. Both slide away again when the field is empty and blurred.
Goal: Create a "Count" input animation — character counter with animated progress bar.
Visual behavior: Below the input, a row containing a thin progress bar and a "N/MAX" counter slides in on first focus or keystroke. The counter and bar are hidden (opacity 0, translateY -4px) when the field is empty and blurred. As the user types, the bar fills proportionally; both counter and bar color shift: neutral (empty–79%) → orange (80–99%) → red (at limit). All color changes transition smoothly. When the field is cleared and loses focus, the row slides back out.
Technique:
- Track value length and focused state in useState
- Show condition: focused || value.length > 0
- Counter row: opacity + translateY transition (200ms ease) for the slide reveal
- Progress bar: a wrapper div with background: rgba(white, 0.1) and inner div with width = (count/MAX * 100)% — transition: width 150ms ease
- Color logic: count/MAX >= 1 → red; >= 0.8 → orange; else neutral
- Use fontVariantNumeric: tabular-nums so the counter doesn't jump width as digits change
- maxLength={MAX} on the input to enforce the hard limit
Accessibility: Counter div is always in DOM (only visually hidden) so screen readers can announce changes. Under prefers-reduced-motion, skip translateY — use opacity only.
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.