逃げる文字

使い方

src/Component.astro と src/motion.ts を同じフォルダーに配置して読み込みます。文字は lines に行ごとの配列で渡し、行ごとの大きさは sizes に CSS の値で指定できます。

<PointerAvoid
  lines={['さわると', '逃げる文字。']}
  sizes={['clamp(22px, 4vw, 40px)', 'clamp(40px, 9vw, 96px)']}
  radius={150}
  force={80}
  hint="マウスを動かす・指でタップすると、近くの文字が逃げます"
/>

• radius は文字が反応する距離（px）、force はポインターの真上での最大の押し出し量（px）です。
• hint は動きが有効なときだけ表示される短い案内です。
• as で見出しのタグ（h1 / h2 / p）を変えられます。

動きの仕組み

• motion.ts の mountPointerAvoid(root) が [data-pointer-avoid] ごとに動きを付け、後片付け用の関数を返します。同じページに複数置いても、それぞれ独立して動きます。
• 文字の中心位置は実際の表示から測ります。画面幅の変化（ResizeObserver）とWebフォントの読み込み完了で測り直し、ポインターの位置は毎回ルート要素の現在位置から求めるため、スクロールしてもずれません。
• 押し出しの強さは「半径からの近さ × force」で、離す・外れると減衰するばねで元の位置へ戻ります（剛性1000・減衰15・質量0.5）。横方向に押された分だけ、文字が少し傾きます。
• ポインターが文字の中心にちょうど重なったときは、向きが決まらないため真上へ押し出します。
• イベントはすべてpassiveで、preventDefault は使いません。タッチ操作では、触れている間だけ文字が逃げ、画面のスクロールはそのまま使えます。
• 読み上げ用には分割前の文章を1つだけ持ち、一文字ずつの表示は読み上げ対象から外しています。
• JavaScriptが使えない環境や prefers-reduced-motion: reduce のときは何も動かさず、静止した文字のまま表示します。設定を途中で変えた場合も切り替わります。
• pagehide でループとイベントをすべて止め、戻る／進むのキャッシュから復元されたときは付け直します。
• 奥行き（3D）の表現はありません。動きは平面上の移動と小さな回転だけです。

調整する箇所

• 配色はコンポーネント内の --pointer-avoid-bg、--pointer-avoid-ink、文字の光は --pointer-avoid-glow で変更できます。
• 既定の文字サイズは --pointer-avoid-size、文字の間隔は --pointer-avoid-gap、高さは外側から --pointer-avoid-height（既定は 100svh）で指定できます。
• ばねの硬さや戻り方は motion.ts の STIFFNESS、DAMPING、MASS、傾きの量は ROTATE_PER_PX で調整します。

元にした実装

• 元のリポジトリ: GOUKI-Main/mysite（コミット 8f3843bda249b85f8d8330f9dc7f0fce3eb950f6）
• 元のファイル: app/components/ui/avoid-mouse-text.tsx（React と Motion を使用）、app/components/sections/hero.tsx
• このカタログでは React と Motion を使わず、Astro と小さなばねの計算に置き換えています。元の実装は文字の位置を固定の幅（60px）で計算していましたが、ここでは実際の表示位置を測っています。

利用条件

元のリポジトリにはライセンスの記載がなく、ライセンスは未設定です。再配布の条件が決まっていないため、現在はソースを配布せず、見た目と動きの参考として掲載しています。