# Remotionのカーソルとクリックのアニメーションテンプレート

ポインターを追うカーソル、ボタンの押下、クリックして入力、カーソルの部品など、無料のRemotionカーソル・クリックテンプレート4点。Subclipで編集するか、TSXコードを入手できます。

Canonical URL: https://www.subclip.app/ja/motion-graphics-templates/remotion/cursor-click-animations

これらのRemotionテンプレートは、ポインターが動き、ホバーし、クリックする様子を見せます。製品デモをわかりやすくする小さな動作です。どれもフレーム単位でタイミングを合わせたTSXのReactコンポーネントなので、カーソルを自分の画面録画やUIモックアップに合わせられます。

## 各テンプレートの内容

Cursor Trackは柔らかな軌跡を残しながらシーンを横切るポインターを追います。Button Pressはボタンがホバーされて押される様子をズームで見せます。Click Typeは入力欄をクリックしてテキストを1行入力します。Cursorは素の部品で、ポインターがボタンへなめらかに移動し、波紋とともにクリックして次へ進みます。

## コードの使い方

カーソルの経路はフレームと位置のペアのリストなので、タイミングを変えたり、自分のボタンに向けたりできます。アプリの操作説明、オンボーディング動画、機能のローンチに重ねて使うか、TSXを既存のRemotionプロジェクトにコピーしてください。

## 4件のテンプレート

- [Cursor Track](https://www.subclip.app/ja/motion-graphics-templates/remotion/cursor-track) (Remotion, クリック): インターフェイス上のポイントのパスに沿って移動し、到着するたびにパルス状のクリック リングを表示する合成マウス ポインター。
- [Button Press](https://www.subclip.app/ja/motion-graphics-templates/remotion/button-press) (Remotion, クリック): カーソルは青い分割アクション ボタンをクリックし、ホバーすると暗くなり、押し込み、保留状態を経て、描画されたチェックマークで終了します。
- [Click Type](https://www.subclip.app/ja/motion-graphics-templates/remotion/click-type) (Remotion, クリック): ガラス製のプロンプト ボックス。カーソルでフィールドをクリックすると、プレースホルダーが自身を書き込み、続いてプロンプトが入力されるボックスにハード カットが続きます。
- [Cursor](https://www.subclip.app/ja/motion-graphics-templates/remotion/cursor) (Remotion, クリック): 柔らかな影とクリック時の波紋リングを備えた、矢印または手の形のすっきりしたmacOS風カーソルで、製品デモに使えます。