Image Trail
イメージトレイル
どんな動き？
マウスを動かした軌跡に沿って、小さな画像タイルが次々と出現してはフェードアウトしていくインタラクション。カーソルの通り道がまるで絵筆で描いたように画像で埋まっていくため、驚きのある印象的な体験を演出できる。GSAPでマウス座標を追跡しながらタイルの生成・消去を制御して実装され、実験的なポートフォリオサイトのギャラリー演出として使われる。
よく使う場所
ポートフォリオギャラリーアートサイトヒーローセクション
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Spawn small image tiles along the cursor's movement path, each fading in then out shortly after appearing.Trigger:
mousemove across the trail area (hover).
Initial state:
No tiles visible.
Animation:
As the cursor moves, tiles spawn in sequence at the cursor's recent positions, each quickly scaling and fading in, holding briefly, then fading back out and being removed.
Final state:
All spawned tiles have faded out; the area returns to empty once the cursor stops moving.
Timing:
duration: ~0.4–0.5s fade-in-hold-fade-out per tile, staggered every ~80–120ms of cursor movement.実装方法の候補
この動きは以下の技術で実装できます。
GSAPJavaScript
別名・関連ワード
Cursor Image TrailMouse Trail GalleryTrailing Images