ShowMotion

Text

Underline Draw (アンダーラインドロー)

別名 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left

ホバーすると、リンクの下に片側または中央から下線が伸びます。

使いどころ

ナビゲーションリンク、インラインリンク

バリエーション

  • left to right
  • centre out
  • two-way in/out
  • gradient background-size
  • Underline From Left
  • Underline From Center
  • Underline From Right

デモのソースを見る

プロンプト

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

[適用する場所]にアンダーラインドロー(Underline Draw)のホバーエフェクトを追加してください。アニメーション下線(animated underline)、ホバー下線アニメーション(hover underline animation)とも呼ばれます。
ポインターがリンクに乗ると、テキストの下に下線が左から右へなめらかに伸び、ポインターが離れると縮んで戻るようにしてください。素早く控えめな動きにしてください。
下線で周囲のレイアウトがずれないようにし、キーボードフォーカス時にも同じ効果を表示してください。

似ているモーション

Underline Reveal (アンダーラインリビール)

別名 Overline Reveal, Reveal

線が下端または上端からスライドして定位置に収まり、要素に下線または上線を引きます。

使いどころ

ナビゲーションリンク、ボタン

Overline Grow (オーバーライングロウ)

ホバーするとテキストの上に線が左・中央・右から伸びます。

使いどころ

ナビゲーションリンク、タブ

Text Highlighter (テキストマーカー)

別名 Highlight Marker, Marker Underline, Hero Highlight

マーカーのような色の帯がフレーズの上に引かれ、強調します。

使いどころ

重要なフレーズの強調

Line Drawing (ラインドローイング)

別名 Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw

破線オフセットをアニメーションさせ、SVGの線がパスに沿って描かれていくように見せます。

使いどころ

アイコン、ロゴ、イラスト

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

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

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

使いどころ

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

Video Text (ビデオテキスト)

別名 Text Video Mask

大きな文字が窓のようになり、その内側で再生中の動画が見えます。

使いどころ

ヒーロータイトル

Wavy Text (ウェービーテキスト)

別名 Text Wave

文字が順番に上下に揺れ、単語の中を波が流れていくように見えます。

使いどころ

遊び心のある見出し、ローディング表示

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