反転カーソル

使い方

<BlendCursor
  heading="Selected Works"
  works={[{ title: 'Morning Ritual', meta: 'BRANDING / 2026', href: '/works/1', palette: ['#e7d5b9', '#d9472b', '#1d3b34'] }]}
  viewLabel="VIEW"
/>

• 作品カードの画像は palette（背景・図形A・図形B）から図形で描きます。実際の写真に差し替える場合は .blend-cursor__art の中身を <img> にしてください。
• 自作の要素に data-cursor="ラベル" を付けると、その上でカーソルがラベル付きの円に広がります。

動きの仕組み

• mountBlendCursor(root) は (hover: hover) and (pointer: fine) かつ動きを減らす設定がオフのときだけ動きます。タッチ端末や JavaScript なしでは通常のカーソルとホバー表示のままです。
• 点はポインターに直接追従し、輪は1フレームごとに残りの距離の16%ずつ近づきます。大きさも別にゆっくり変えるため、状態が切り替わってもカクつきません。
• 輪の線は拡大率で割り戻して、どの大きさでもおよそ1pxの太さに保ちます。
• mix-blend-mode: difference で、明るい背景では黒く、暗い背景では白く見えます。
• カーソルの層は aria-hidden で、リンクのフォーカス表示はそのまま残します。

調整する箇所

• 状態ごとの大きさは motion.ts の SCALE、追従の速さは FOLLOW、拡大の速さは GROW で調整します。
• 背景や文字色は --blend-cursor-bg、--blend-cursor-ink で変更できます。

参考にした傾向

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

利用条件

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