Ripple Type
No library Intermediate
Each keystroke triggers a brief border-color ripple pulse on the input via a CSS keyframe that spikes to accent then settles back. The input visually feels each character typed.
Each keystroke triggers a brief border-color ripple pulse on the input via a CSS keyframe that spikes to accent then settles back. The input visually feels each character typed.
Goal: Create a "Ripple Type" input that pulses on each keystroke.
Visual behavior: A standard text input. Each time the user types a character, the input's border and box-shadow briefly spike to a bright accent color (with a glow ring) then settle back to the focused state — a tactile "thud" per keypress. The pulse is a quick CSS keyframe (0%: normal → 30%: bright accent+glow → 100%: settled accent).
Technique:
- CSS @keyframes animates border-color and box-shadow
- A React state counter (rippleKey) increments on each onChange event
- The counter is used as the input element's key prop to remount and restart the animation per keystroke
- Keep the animation short (~400ms) so it completes well before the next keystroke
Accessibility: Animation is disabled under prefers-reduced-motion via CSS media query on the keyframe class. The border color still shifts on focus.
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.