Animated Search Bar Generator
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.
↻ Replay
Typed text — your URL, @handle or phrase
Width: 680 px
Typing speed: 110 ms
Pause before loop: 1.5 s
Theme
Background
⚙ Advanced options
Placeholder (when empty)
Font
Font size: 22 px
Corners
Caret / accent color
cursor & mic
Cursor style
Cursor blink: 530 ms
Text alignment
Loop mode
Magnifier icon Microphone icon Drop shadow
Frame rate: 20 fps
Export quality (scale)
GIF colors: 64
WebM loops recorded: 2 loops
Export GIF (transparent) Export WebM (HD) ↓ PNG (final frame) ↓ PNG frames (ZIP)
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
- Letter-by-letter typing animation
- Transparent GIF export (alpha)
- HD WebM export (VP9/VP8)
- Final-frame PNG export
- PNG frame sequence as ZIP
- Adjustable width in pixels
- Typing speed in ms per letter
- Pause before the loop
- Dark and light themes
- Transparent or solid background
- Magnifier and microphone icons
- Bar, block or underscore cursor
- Custom caret / accent color
- Restart or backspace loop
- 5 font families, pill or soft corners
- 1×/2×/3× export scale
- Adjustable frame rate & GIF colors
- 100% local — no upload, no watermark
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
Typing text animation for TikTok Google search bar animation Transparent GIF text animation Search bar overlay for video Add a typing effect to video Typewriter text generator TikTok Video Converter