Typeout
No library Intermediate
A custom placeholder types itself out character-by-character on mount at 60ms per character. When focused, it instantly clears so the user can type freely.
A custom placeholder types itself out character-by-character on mount at 60ms per character. When focused, it instantly clears so the user can type freely.
Goal: Create a "Typeout" input placeholder animation.
Visual behavior: An input field with no native placeholder. A custom span overlay acts as the placeholder and types its text character-by-character on mount using a JS interval at 60ms per character. A blinking cursor appears during typing. When the field is focused, the custom placeholder instantly disappears so the user can type. On blur (with empty value), the typing animation restarts from the beginning.
Technique:
- Wrapper div with position:relative
- Real input with no placeholder and transparent/no native placeholder styling
- Absolutely positioned span overlay for the custom typed placeholder
- useEffect with setInterval manages the typing; cleanup on unmount
- Restart by resetting a string state and an index ref to 0
- On focus: hide the overlay; on blur with empty value: restart
Accessibility: Under prefers-reduced-motion, show the full placeholder text immediately without typing animation.
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.