# Search Typing: Search Bar Animation

An oversized search field glides forward, types your query across its width, pans to finish the line, then pulls back. Edit this video template in Subclip.

Canonical URL: https://www.subclip.app/motion-graphics-templates/remotion/search-typing

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-snapcn-search-typing.mp4?v=9737c498d0

A wide search field, larger than the frame, that moves forward, types a query with natural pauses, pans to follow the text, then recedes.

- Framework: Remotion
- Category: AI Chat Input
- Duration: 7 s
- Aspect ratio: 16:9 landscape
- Code: Get the code (free sign-in): https://www.subclip.app/motion-graphics-templates/remotion/search-typing

The scene opens on a rounded search field wider than the shot, with about two thirds of it visible on a light background. The field then moves closer to the camera and the query types across its left half with small human pauses between words and after punctuation. When the text reaches the edge, the view pans to the right half to finish the line, holds for a moment, and pulls back. It runs about seven seconds.

You can write the query and set typing speed, humanized rhythm, word and punctuation pauses and start delay. Separate controls time the move forward, the pan, the hold and the pull back, plus how far the field comes forward and how much stays in frame. Caret style, blink rate, surface, icon, font weight, mode and font are all adjustable. Use it for AI search and command palette demos.

## Use it for

- AI search product demos
- Command palette walkthroughs
- Question hooks at the start of a video

## What you can change

- `speed`: Playback speed (Number)
- `text`: Search text (Text)
- `charsPerSecond`: Typing speed (Number)
- `humanize`: Natural typing rhythm (Number)
- `wordPause`: Pause between words (Number)
- `punctuationPause`: Pause after punctuation (Number)
- `startDelay`: Start delay (Number)
- `dollyDuration`: Move forward duration (Number)
- `panDuration`: Pan duration (Number)
- `holdAfter`: Hold after typing (Number)
- `recedeDuration`: Pull back duration (Number)
- `dolly`: Move forward amount (Number)
- `fieldHeight`: Field height (Number)
- `frontVisible`: Visible field portion (Number)
- `edgeInset`: Edge inset (Number)
- `caretBlinksPerSecond`: Caret blink rate (Number)
- `caret`: Caret style (On or off)
- `surface`: Field surface (Text)
- `mode`: Light or dark mode (Text)
- `icon`: Search icon (Text)
- `fontWeight`: Font weight (Number)
- `seed`: Random variation (Text)
- `fontFamily`: Font (Text)
- `stageBackground`: Background around the scene (Color)

## How to use this template

1. Download Subclip for Mac or Windows. Every template on this page comes pre-installed.
2. Open the Templates panel, pick Search Typing and drop it on your timeline.
3. Change the text, colors and timing in the layer settings, or ask the AI agent to edit it for you.
4. Export your video, or download the code to use the template in your own project.

Built on Search Typing from snapcn: https://snapcn.dev