Typewriter Search

A search bar with a placeholder that types itself, erases, and moves on to the next phrase.

When someone hits Enter, they're sent to your results page with their query in the URL (for example /search?q=branding). Point it at a CMS page filtered by the query, or any page that reads the URL.

What you can set:

- Your own phrases, typing speed, erase speed and pause

- Blinking caret on or off

- Results URL, query parameter name, open in a new tab

- Background, radius, border, shadow, font, colors

- Search icon and clear icon, size and color

Typing stops as soon as someone clicks in, and the field becomes a normal input. The clear button is a two-bar cross that draws itself and closes on click. Esc clears the field too.

Respects reduced motion: the animation stays still if the visitor has turned it off.

Note: this component sends visitors to a results page, it doesn't search your content on its own. You need a page that displays the results.