ホバー画像トレイル

使い方

<HoverTrail
  label="INDEX"
  entries={[
    { title: 'Hinoki Bath House', category: 'Branding', year: '2026', href: '/works/1', image: '/images/hinoki.jpg' },
    { title: '夜の珈琲店', category: 'Web Design', year: '2026', href: '/works/2' },
  ]}
/>

• heading を指定すると一覧の見出し（h2）を表示します。

• image を指定すると写真、省略すると palette（背景・図形）の図形アートワークを表示します。
• 画像は縦横比 4:5 で切り抜きます。

動きの仕組み

• mountHoverTrail(root) はマウス操作で動きを減らす設定がオフのときだけ動きます。それ以外は各行の右に小さなサムネイルを表示します。
• 浮遊プレビューは1フレームごとに残りの距離の14%ずつ近づき、横方向の移動量に応じて最大12度傾きます。
• 行を移ると、次の画像が clip-path で下から開いて前の画像に重なり、重なり終えた前の画像は閉じます。
• 一覧から外れるとプレビューは縮みながら消えます。キーボードで行を選んだときはプレビューを出さず、通常のリンクとして動きます。

調整する箇所

• 配色は --trail-bg、--trail-ink、--trail-line で変更できます。
• プレビューの大きさは .trail__float の width、追従は FOLLOW、傾きは LEAN と MAX_LEAN で調整します。

参考にした傾向

Webデザインクリップ に掲載された国内サイトでよく使われている「ホバーエフェクト・画像追従」の表現を参考に、このカタログ用に一から設計・実装しました。特定サイトのコード・画像・文言・配色は使っていません。

利用条件

このカタログ用に書き下ろした実装で、MITライセンスで公開しています。LICENSE、src/Component.astro、src/motion.ts を取得して利用できます。再配布する場合は LICENSE の著作権表示と許諾文を残してください。