Flowfiles ← All tools

Animated Search Bar Generator

Typing Google-style search bar · Transparent GIF · HD WebM · PNG frames — 100% local, no upload, no watermark

Make a search bar that types your text letter by letter and loops, then export it as a transparent GIF ready to drop on top of your TikTok, Reels or YouTube Shorts. Set the width, typing speed, pause and theme, then download — everything is rendered in your browser, nothing is uploaded.

⚙ Advanced options
cursor & mic

How to overlay the search bar on a TikTok video

Type your text — usually a website, an @username or a short call-to-action — then keep the background transparent and click Export GIF. Open your editor (CapCut, InShot, Premiere, Canva), add your footage on the main track, then add the GIF as an overlay layer on top. Because the GIF background is transparent, only the bar and the typing text appear over your video. Resize and position it where you want, and it loops for the whole clip.

Need the bar perfectly crisp at full vertical resolution? Set Export quality to 3× and pick the HD WebM export instead — WebM keeps text edges razor-sharp with a tiny file size, ideal for a solid-background bar. Use the PNG frames (ZIP) export if your editor prefers an image sequence with true alpha.

Features

Frequently asked questions

How do I make an animated search bar for a TikTok video?

Type your text, set the width and typing speed, keep the background transparent, then click Export GIF. You get a looping transparent GIF you can drop on top of your video in CapCut, InShot or any editor.

Is the background really transparent?

Yes. The GIF export keeps a fully transparent background, so only the search bar shows over your footage. Switch the Background option to Solid color if you prefer a white or colored box behind the bar.

GIF or WebM — which should I use?

Use the transparent GIF for a clean cut-out overlay that works in every editor and on every platform. Use the HD WebM for maximum sharpness and a smaller file size when a solid background is fine. Both loop automatically.

Why does the GIF look slightly less sharp than the preview?

GIF is limited to 256 colors per frame, so anti-aliased text edges are quantized. Raise the GIF colors slider and the Export quality to 2× or 3× for a cleaner result, or use the WebM/PNG exports which are not color-limited.

Does my text get uploaded anywhere?

No. The whole animation is drawn and encoded in your browser with Canvas and JavaScript. Nothing is sent to a server and there is no watermark.

Can I change the typing speed and the pause before it loops?

Yes. Typing speed is in milliseconds per letter and the pause before the loop is in seconds. You can also switch between Restart and Backspace loop modes in the advanced options.

Related pages