ShowMotion

SVG & Shape

Shape Morph (シェイプモーフ)

別名 Path Morphing, SVG Morph, MorphSVG, Shape Tweening

あるベクター図形が別の図形へ滑らかに変形します。

使いどころ

アイコンの状態切り替え、ヒーローグラフィック

バリエーション

  • path d interpolation
  • mismatched point morph
  • multi-shape morph

デモのソースを見る

プロンプト

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

[適用する場所]にシェイプモーフ(Shape Morph)を追加してください。パスモーフィング(path morphing)、SVGモーフ(SVG morph)とも呼ばれます。
五角形がくびれて星になるように、ある図形が別の図形へ滑らかに変わり、各点が均一で落ち着いたペースで所定の位置へ移動するようにしてください。
ちらつきのないきれいな変形になるよう両方の図形の点の数と対応をそろえ、ループではなく状態が変わるたびに一度だけ再生してください。

似ているモーション

Blob Morph (ブロブモーフ)

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

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

使いどころ

背景、アバター、ボタン

Icon Morph (アイコンモーフ)

別名 Hamburger to X, Menu Icon Morph, Line-to-Close Icon

ハンバーガーメニューなどのアイコンが、バーの回転と移動によって別のアイコン(X)に変わります。

使いどころ

メニューの開閉ボタン

Morphing Text (モーフィングテキスト)

別名 Text Morph

ひとつの単語がぼやけながら、同じ位置で次の単語へ溶け込むように変わります。

使いどころ

ヒーローエリアのキャッチコピー

Round Corners (ラウンドコーナー)

ホバーすると要素の角がなめらかに丸くなります。

使いどころ

ボタン、画像

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

別名 feTurbulence Distortion, Displacement Map Effect

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

使いどころ

液体や波紋のホバー効果

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

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

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

使いどころ

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

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