ShowMotion

Entrance & Exit

Blur In (ブラーイン)

別名 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal

要素が強くぼやけた状態から徐々にピントが合い、多くの場合スライドやフェードインを伴います。

使いどころ

見出しやヒーローテキストの表示

バリエーション

  • fade only
  • slide from top
  • slide from bottom
  • slide from left
  • slide from right
  • blur-in
  • dissipate/blur-out

デモのソースを見る

プロンプト

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

[適用する場所]にブラーイン(Blur In)の登場アニメーションを追加してください。テキストフォーカスイン(text focus in)、フォーカスイン(focus in)、ブラーテキストリビール(blur text reveal)とも呼ばれます。
コンテンツが強くぼやけて透明な状態から、その場でピントが合っていくようにしてください。柔らかくややゆっくりで、位置は動かしません。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初からくっきり表示してください。

似ているモーション

Fade In / Fade Out (フェードイン/フェードアウト)

別名 Fade

要素がその場で完全な透明から完全な不透明へ変わり、退場時はその逆になります。

使いどころ

モーダル、トースト、ページコンテンツの表示

Puff In / Puff Out (パフイン/パフアウト)

別名 Puff

要素が大きくぼやけた透明な状態から縮んでくっきり見えるようになり、煙がふっと集まるように現れます。退場時はその逆です。

使いどころ

オブジェクトのやわらかな出現

Text Generate (テキストジェネレート)

別名 Text Generate Effect

ページの読み込み時に単語が順番にフェードインし、多くの場合ぼかしが晴れていくことで、生成されているように見えます。

使いどころ

AI風のイントロ文

Blur-Up Placeholder (ブラーアッププレースホルダー)

別名 LQIP, Blur placeholder, Progressive image load

画像の小さなぼかし版が先に場所を埋め、本来の画像が読み込まれるとくっきりします。

使いどころ

ヒーロー画像、ギャラリー

Blur Out (ブラーアウト)

別名 Text Blur Out, Slide Out Blurred, Smoky Text Dissipate

要素がフェードアウトやスライドをしながら、だんだんぼやけていきます。

使いどころ

柔らかな切り替え、テキストの退場

Bounce In (バウンスイン)

別名 Bounce In Down, Bounce In Up

要素が行き過ぎてから落ち着くバウンドで登場します。拡大して現れるか、端から落ちてきます。

使いどころ

通知バッジ、遊び心のあるモーダル

Bounce Out (バウンスアウト)

要素が軽く弾んでから、縮んで消えるか端の外へ飛んでいきます。

使いどころ

遊び心のある閉じる動作

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