--- title: "How to add a search bar typing with Claude (tested prompt and script)" description: "A white search bar pops in above the product, types out \"is this serum worth it\" with a blinking blue cursor, then a dropdown of three search suggestions slides open beneath it. Install one skill and ask Claude Code, or run the Python script we tested yourself." url: https://www.recharm.com/effects/search-bar-typing --- # How to add a search bar typing with Claude A white search bar pops in above the product, types out "is this serum worth it" with a blinking blue cursor, then a dropdown of three search suggestions slides open beneath it. Made by the script on this page, from our own test clip. ## Get this effect 1. ### Switch to Code in your [Claude Desktop App](https://claude.com/download) 2. ### Install the skill (once) ``` Install the Recharm video effects skill: download https://recharm-growth-staging.s3.us-east-2.amazonaws.com/website/downloads/recharm-video-effects.zip and unzip it into ~/.claude/skills ``` 3. ### Ask for the effect ``` Add a search bar typing to input.mp4 Query: is this serum worth it Results: ["reddit", "for dark spots", "before and after"] ``` ## Several videos, several effects, one ask Put your clips in the folder, mention them with @, and ask for everything at once. Claude runs one tested script after another on each clip, then joins them. Add a search bar typing to **@clip1.mp4**, put a sale badge on **@clip2.mp4**, give **@clip3.mp4** a VHS look, then join all three with crossfades. ## Settings you can change Ask Claude to change any of these, or edit them at the top of the script. | Setting | Default | What it does | | ------------ | -------------------------------------------------- | ---------------------------------------------- | | `QUERY` | `is this serum worth it` | The question typed into the bar. | | `RESULTS` | `["reddit", "for dark spots", "before and after"]` | Endings added to the query in each result row. | | `START` | `0.3` | Second the search bar pops in. | | `TYPE_AT` | `0.7` | Second the typing starts. | | `CPS` | `12` | Characters typed per second. | | `RESULTS_AT` | `3.0` | Second the results drop down. | | `Y` | `0.16` | Bar center, as a share of the frame height. | ## Without the skill Don’t want to install the skill? Paste this prompt into Claude Code and Claude writes the script itself. ``` Add a search bar typing hook to input.mp4. At 0.3 seconds a pure white (255, 255, 255) pill-shaped search bar pops in with a slight overshoot over 0.35 seconds: 88% of the frame width wide, 13% of the frame width tall, centered horizontally with its center 16% down the frame, with a soft dark drop shadow and a gray (110, 114, 120) magnifying-glass icon at its left end. From 0.7 seconds the text "is this serum worth it" types into it at 12 characters per second in dark gray (32, 33, 36) regular Arial at 4.8% of the frame width, left-aligned just after the icon, with a blue (26, 115, 232) blinking cursor after the last letter. At 3.0 seconds the cursor goes and a white rounded card (corner radius 4% of the frame width, same width as the bar) fades in and slides down into place over 0.25 seconds just below the bar, holding three suggestion rows, each with a small magnifying-glass icon: "is this serum worth it" in gray followed by "reddit", "for dark spots" and "before and after" in bold dark gray. Both stay to the end. Use Python with Pillow to draw it and ffmpeg to put it on the video (don't rely on ffmpeg's drawtext filter), keep the audio, and save it as output.mp4. ``` ## Run it without Claude This is the exact script we tested. Save it as `search-bar-typing.py` and run: ``` python3 search-bar-typing.py input.mp4 output.mp4 ``` ``` #!/usr/bin/env python3 """Search bar typing: a white search bar types out a question letter by letter, then a list of results drops down. Usage: python3 search-bar-typing.py input.mp4 output.mp4 Needs ffmpeg and Pillow (pip install pillow). """ import json import math import subprocess import sys from pathlib import Path from PIL import Image, ImageDraw, ImageFilter, ImageFont QUERY = "is this serum worth it" RESULTS = ["reddit", "for dark spots", "before and after"] # each result row is the query plus one of these START = 0.3 # second the search bar pops in TYPE_AT = 0.7 # second the typing starts CPS = 12 # characters typed per second RESULTS_AT = 3.0 # second the results drop down WIDTH = 0.88 # bar width as a share of the frame width BAR_H = 0.13 # bar height as a share of the frame width Y = 0.16 # bar center, as a share of the frame height TEXT_SIZE = 0.048 # text height as a share of the frame width INK = (32, 33, 36) # typed text GREY = (110, 114, 120) # icons and the query part of each result CARET = (26, 115, 232) # blinking cursor FONTS = ["/System/Library/Fonts/Supplemental/Arial.ttf", # macOS "/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf", # Linux "C:/Windows/Fonts/arial.ttf"] # Windows BOLD_FONTS = ["/System/Library/Fonts/Supplemental/Arial Bold.ttf", # macOS "/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf", # Linux "C:/Windows/Fonts/arialbd.ttf"] # Windows FONT_FILE = next((f for f in FONTS if Path(f).exists()), None) or sys.exit("No font found: add one to FONTS") BOLD_FILE = next((f for f in BOLD_FONTS if Path(f).exists()), None) or sys.exit("No bold font found: add one to BOLD_FONTS") def magnifier(draw, x, y, r, width): """A search icon: a ring with a handle, centered on (x, y).""" draw.ellipse([x - r, y - r - 2, x + r * 0.6, y + r * 0.6 - 2], outline=GREY, width=width) draw.line([x + r * 0.45, y + r * 0.45 - 2, x + r * 1.1, y + r * 1.1 - 2], fill=GREY, width=width + 1) def card(cw, ch, radius): """A white rounded card with a soft drop shadow, on a transparent canvas with room for the shadow.""" pad = round(w * 0.04) img = Image.new("RGBA", (cw + 2 * pad, ch + 2 * pad)) shadow = Image.new("RGBA", img.size) ImageDraw.Draw(shadow).rounded_rectangle([pad, pad + 6, pad + cw, pad + ch + 6], radius=radius, fill=(0, 0, 0, 110)) img.alpha_composite(shadow.filter(ImageFilter.GaussianBlur(pad / 3))) ImageDraw.Draw(img).rounded_rectangle([pad, pad, pad + cw, pad + ch], radius=radius, fill="white") return img, pad def search_bar(): img, pad = card(bar_w, bar_h, bar_h // 2) magnifier(ImageDraw.Draw(img), pad + bar_h * 0.5, pad + bar_h / 2, bar_h * 0.17, max(2, w // 180)) return img, pad def results_list(): row = round(bar_h * 0.95) img, pad = card(bar_w, row * len(RESULTS) + round(bar_h * 0.2), round(w * 0.04)) draw = ImageDraw.Draw(img) for i, extra in enumerate(RESULTS): cy = pad + bar_h * 0.1 + row * (i + 0.5) magnifier(draw, pad + bar_h * 0.5, cy, bar_h * 0.13, max(2, w // 220)) x = pad + bar_h * 0.9 draw.text((x, cy), QUERY + " ", font=small, anchor="lm", fill=GREY) draw.text((x + small.getlength(QUERY + " "), cy), extra, font=small_bold, anchor="lm", fill=INK) return img, pad def fade(img, k): img = img.copy() img.putalpha(img.getchannel("A").point(lambda a: round(a * k))) return img def ease_out_back(p): """0 -> 1 with a small overshoot past 1 before settling, which reads as a 'pop'.""" p = min(max(p, 0), 1) return 1 + 2.70158 * (p - 1) ** 3 + 1.70158 * (p - 1) ** 2 def overlay(t): img = Image.new("RGBA", (w, h)) if t < START: return img bar = bar_img.copy() draw = ImageDraw.Draw(bar) typed = QUERY[:max(0, int((t - TYPE_AT) * CPS))] x, cy = bar_pad + bar_h * 0.9, bar_pad + bar_h / 2 draw.text((x, cy), typed, font=font, anchor="lm", fill=INK) if t < RESULTS_AT and int(t * 2.5) % 2 == 0: # blinking cursor until the search runs cx = x + font.getlength(typed) + 3 draw.rectangle([cx, cy - font.size * 0.6, cx + max(2, w // 270), cy + font.size * 0.6], fill=CARET) scale = ease_out_back((t - START) / 0.35) if scale < 1: bar = fade(bar.resize((max(1, round(bar.width * scale)), max(1, round(bar.height * scale))), Image.LANCZOS), min(1, (t - START) / 0.2)) top = round(h * Y - bar_img.height / 2) if t >= RESULTS_AT: p = min(1, (t - RESULTS_AT) / 0.25) drop = round((1 - p) * -w * 0.04) img.alpha_composite(fade(results_img, p), (round((w - results_img.width) / 2), top + bar_img.height - bar_pad + round(w * 0.015) - results_pad + drop)) img.alpha_composite(bar, (round((w - bar.width) / 2), round(h * Y - bar.height / 2))) return img def probe(path): info = json.loads(subprocess.check_output(["ffprobe", "-v", "error", "-select_streams", "v:0", "-show_entries", "stream=width,height,r_frame_rate:format=duration", "-of", "json", path])) s = info["streams"][0] num, den = s["r_frame_rate"].split("/") return s["width"], s["height"], s["r_frame_rate"], float(num) / float(den), float(info["format"]["duration"]) def render(src, out): """Draw overlay(t) on every frame of src and save to out, keeping the audio.""" ff = subprocess.Popen(["ffmpeg", "-y", "-v", "error", "-i", src, "-f", "rawvideo", "-pix_fmt", "rgba", "-s", f"{w}x{h}", "-r", rate, "-i", "-", "-filter_complex", "[0:v][1:v]overlay=shortest=1,format=yuv420p[v]", "-map", "[v]", "-map", "0:a?", "-c:v", "libx264", "-crf", "18", "-c:a", "copy", out], stdin=subprocess.PIPE) for i in range(math.ceil(duration * fps)): ff.stdin.write(overlay(i / fps).tobytes()) ff.stdin.close() if ff.wait(): sys.exit("ffmpeg failed") src, out = sys.argv[1:3] w, h, rate, fps, duration = probe(src) bar_w, bar_h = round(w * WIDTH), round(w * BAR_H) font = ImageFont.truetype(FONT_FILE, round(w * TEXT_SIZE)) small = ImageFont.truetype(FONT_FILE, round(w * TEXT_SIZE * 0.82)) small_bold = ImageFont.truetype(BOLD_FILE, round(w * TEXT_SIZE * 0.82)) bar_img, bar_pad = search_bar() results_img, results_pad = results_list() render(src, out) ``` ## More hook openers - [Blur-to-focus reveal **Blur-to-focus reveal**](https://www.recharm.com/effects/blur-to-focus-reveal) - [Breaking news banner **Breaking news banner**](https://www.recharm.com/effects/breaking-news-banner) - [Camera shake **Camera shake**](https://www.recharm.com/effects/camera-shake) - [Color reveal **Color reveal**](https://www.recharm.com/effects/color-reveal) - [Countdown intro **Countdown intro**](https://www.recharm.com/effects/countdown-intro) ## Find 3x _winning ads_ Recharm cuts your ad footage into tagged, searchable clips: hooks, testimonials, product shots. Find the shots that win, add the effect with Claude, and ship 3x more ad edits. [Start 14-day free trial](https://www.recharm.com/get-started)