Text

Variable Font Weight Animation (バリアブルフォントウェイトアニメーション)

別名 Font Weight Shift, Breathe Variable Font Animation, Font Transition on Hover

可変フォントの軸を使って、文字がなめらかに太く・細くなります(幅や傾きが変わることもあります)。

インタラクティブな見出し

  • weight on hover
  • per-letter wave
  • width axis
  • scroll-linked axis

デモのソースを見る

プロンプト

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。

[適用する場所]にバリアブルフォントウェイトアニメーション(Variable Font Weight Animation)のホバーエフェクトを追加してください。フォントウェイトシフト(font weight shift)とも呼ばれます。
ポインターがテキストに乗っている間、文字が左から右へなめらかな波のように順番に太くなり、ポインターが離れると細く戻るようにしてください。
太さが飛ばずになめらかに変わるよう可変フォントを使い、見出しが広がっても周りのコンテンツを押しのけないようにし、キーボードフォーカス時にも同じ効果を表示してください。

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。