# Search Reveal: 検索バーアニメーション

補助線の円が広がって検索バーになり、テキストが入力されたあと、抽象的なグラフィックパネルが現れます。 動画テンプレート。Claude用コードをコピーするか、Subclipで編集できます。

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

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-remocn-search-reveal.mp4?v=38640e261d

細い補助線の円が広がって検索バーに収まり、テキストが入力され、その背後にカラフルなグラフィックパネルが開きます。

- フレームワーク: Remotion
- カテゴリ: UI
- 再生時間: 4秒
- アスペクト比: 16:9 横向き
- コード: コードを取得（無料ログイン）：https://www.subclip.app/ja/motion-graphics-templates/remotion/search-reveal

淡いライラック色の背景に、デザイナーが図形を作図するように細いグレーの補助円が広がるところから始まります。円は角の丸い白い検索フィールドに収まり、テキストが一文字ずつ自動で入力され、フィールドの背後にライムグリーンの図形をあしらった紫のパネルが開きます。全体は4秒未満です。

入力するテキスト、フィールドの幅、フォントサイズ、入力速度を設定し、パネルと補助円の表示を切り替え、テキスト、フィールド、円、パネル、アクセント、背景のすべての色を変更できます。製品名やブランド名のリビール、検索機能のデモ、AIツールのイントロに使えます。

## 活用例

- ブランド名のリビール
- 検索機能のデモ
- AIツールのイントロ
- アプリローンチのオープニング

## 変更できる項目

- `speed`: 再生速度 (数値)
- `text`: 入力するテキスト (テキスト)
- `fieldWidth`: フィールドの幅 (数値)
- `fontSize`: フォントサイズ (数値)
- `framesPerCharacter`: 入力速度（1文字あたりのフレーム数） (数値)
- `showPanel`: グラフィックパネルを表示 (オン / オフ)
- `showGuides`: 補助円を表示 (オン / オフ)
- `color`: 文字の色 (色)
- `fieldColor`: フィールドの色 (色)
- `ringColor`: 補助円の色 (色)
- `panelColor`: パネルの色 (色)
- `accentColor`: アクセントカラー (色)
- `backgroundColor`: 背景色 (色)
- `reducedMotion`: モーションを減らす (オン / オフ)
- `stageBackground`: 現場の背景 (テキスト)

## このテンプレートの使用方法

1. Mac または Windows 用の Subclip をダウンロードします。このページのすべてのテンプレートはプリインストールされています。
2. [テンプレート]パネルを開き、[Search Reveal]を選択してタイムラインにドロップします。
3. レイヤー設定のテキスト、色、タイミングを変更するか、AI エージェントに編集を依頼します。
4. ビデオをエクスポートするか、コードをダウンロードして独自のプロジェクトでテンプレートを使用します。

remocnのSearch Revealをベースに作成: https://remocn.dev