How I Made the Typewriter Effect for the Search Section
Adding a little “extra” to a blog often makes it feel more alive. For my search page, I decided to implement a typewriter effect that cycles through my post titles as placeholder text in the search input. It’s a small detail, but it gives users a hint of what they can search for while adding a dynamic feel. Here’s how I built it. The Goal Fetch all blog post titles from the search index. Randomly select a title and “type” it out in the search bar’s placeholder. Include a blinking cursor (|). Delete the text after a short pause and start again with a new title. Stop the effect if the user starts typing manually. Step 1: Getting the Data Since I’m using the PaperMod theme with Hugo, my search index is already generated as a JSON file (index.json). I hooked into the existing search script (fastsearch.js) where the search index is loaded. ...