磁力ボタン

使い方

<Magnetic
  heading="次のプロジェクトを、一緒に。"
  actions={[
    { label: 'お問い合わせ', href: '/contact', variant: 'pill' },
    { label: '会社案内をダウンロード', href: '/download', variant: 'ghost' },
    { label: '次へ', href: '/next', variant: 'round', ariaLabel: '次のページへ' },
  ]}
  field={90}
/>

• variant は pill（塗り）、ghost（線）、round（矢印だけの円）です。round には必ず ariaLabel を付けてください。
• field はボタンの外側で反応し始める距離（px）です。

動きの仕組み

• ボタンの外周 field px 以内にポインターが入ると、本体はポインターとの差の32%、文字は50%の位置を目標にします。
• どちらも減衰の弱いばね（剛性170・減衰14）で追うため、離れたときに少しだけ行き過ぎてから止まります。
• ボタンの位置はページ座標で測るため、スクロールしてもずれません。画面幅の変化で測り直します。
• 塗りが広がる起点（--flood-x / --flood-y）はタッチや動きを減らす設定でも設定します。磁力の動きはマウスで動きを減らす設定がオフのときだけです。

調整する箇所

• 配色は --magnetic-bg、--magnetic-ink、--magnetic-flood で変更できます。
• 引き寄せの強さは PULL と LABEL_PULL、戻り方は STIFFNESS と DAMPING で調整します。

参考にした傾向

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

利用条件

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