ShowMotion

SVG & Shape

SVG Displacement Distortion (SVGディスプレイスメントディストーション)

別名 feTurbulence Distortion, Displacement Map Effect

SVGフィルターがアニメーションするノイズでテキストや図形を歪ませます。

使いどころ

液体や波紋のホバー効果

バリエーション

  • turbulence wobble
  • displacement map surface

デモのソースを見る

プロンプト

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

[適用する場所]にSVGディスプレイスメントディストーション(SVG Displacement Distortion)のホバー効果を追加してください。ディスプレイスメントマップエフェクト(displacement map effect)とも呼ばれます。
ポインターを乗せている間、テキストや図形が揺れる水越しに見るように波打ってゆらめき、効果はふわっと現れ、ポインターが外れるとくっきりした状態に戻るようにしてください。
静止時に負荷がかからないよう歪みフィルターは効果が有効な間だけ適用し、キーボードフォーカスでも同じ効果を出してください。

似ているモーション

Squiggly Text (スクイグリーテキスト)

別名 Wobbly Text, Turbulence Text

SVGのディスプレイスメントフィルターで、文字の輪郭が手描きのように揺らぎます。

使いどころ

ラフスケッチ風や遊び心のある見出し

Text Distortion (テキストディストーション)

別名 Organic Text Distortion

スクロールやポインターの動きに合わせて、テキストが有機的にゆがみ、波打ちます。

使いどころ

実験的なポートフォリオ

Melting Text (メルティングテキスト)

文字が溶けるように、しずくを垂らしながら下へ伸びていきます。

使いどころ

ホラーや遊び心のあるタイトル

SVG Mask Reveal (SVGマスクリビール)

別名 SVG Mask Effect, Clip-path Reveal, Spotlight Mask

マスクの形がワイプしたりポインターを追ったりして、下にあるコンテンツを見せます。

使いどころ

画像やコンテンツの表示演出

Blob Morph (ブロブモーフ)

別名 Morphing Blob, Animated Blob, Blob / Morphing Loader, Gooey loader, Morph loader

有機的なブロブが輪郭を絶えず変化させ続けます。

使いどころ

背景、アバター、ボタン

Gooey Effect (グーイーエフェクト)

別名 Goo Effect, Liquid Blob Merge, Metaball Effect, Gooey / Liquid Metaball, Metaballs, Liquid blobs

ぼかしとコントラストのフィルターで、近くの形同士が液体のしずくのように溶け合います。

使いどころ

メニュー、カーソル、ページネーション

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