Flowfiles ← Animated Search Bar

Typing Text Animation for TikTok

The search-bar effect that types your link letter by letter — free, transparent, no watermark

The typing search bar is one of the most recognisable hooks on TikTok: a clean Google-style box appears at the top of the screen and a cursor types out a word, a name or a URL one letter at a time. It tells the viewer exactly what to search for without a single word of voice-over. This page explains how to make that effect yourself in under a minute and drop it onto any clip.

Open the generator, type your text, and export a transparent GIF — nothing is uploaded.

Open the Animated Search Bar →

Why the typing search bar works so well

The effect works because it mimics something every viewer does dozens of times a day: typing into a search box. When your audience sees a word being typed out, the natural reflex is to copy it. Creators use it to push a brand name, a website, an app, a discount code, or simply their own handle so people can find them again. Because the animation is short and silent, it survives muted autoplay, captions and re-uploads — the three things that kill most on-screen text.

Make it in four steps

  1. Type your text in the box — your @handle, website or a short phrase.
  2. Set the typing speed (around 100 ms per letter feels natural) and the pause before it loops.
  3. Keep the background transparent so only the bar shows over your video.
  4. Click Export GIF and add the file as an overlay in your editor.

Drop it into CapCut or InShot

In CapCut, add your video to the timeline, tap Overlay → Add overlay, and import the GIF. Move it to the top third of the frame, scale it to taste, and stretch its duration to cover the part of the clip where you want it visible. InShot, Canva, Premiere and DaVinci Resolve all follow the same logic: video on the bottom layer, transparent GIF on top. Since the GIF loops on its own, you never have to line up the animation manually.

Sizing for a 9:16 screen

TikTok plays at 1080×1920. A search bar around 680–900 px wide reads well across the top of that frame without crowding the captions at the bottom. If you want the bar pin-sharp at full resolution, set the export quality to 2× or 3×. For a solid white bar you can also export an HD WebM, which keeps the text edges crisp at a fraction of the file size. Need to resize the underlying clip to 9:16 first? Use the TikTok video converter to crop any video to vertical before you add the overlay.

Frequently asked questions

How do I add typing text to a TikTok?

Export the animation as a transparent GIF, then add it as an overlay layer above your clip in CapCut or InShot. The typing plays on top of your footage and loops automatically.

Is it free and watermark-free?

Yes. The generator is completely free, runs entirely in your browser, and adds no watermark to the exported GIF or WebM.

What text should I type?

Most creators type their website, their @handle, or a short hook like a product name. Keep it under about 25 characters so it stays readable on a phone screen.

Related pages