ShowMotion

SVG & Shape

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

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

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

使いどころ

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

バリエーション

  • gooey menu
  • gooey cursor
  • gooey chart transitions

デモのソースを見る

プロンプト

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

[適用する場所]にグーイーエフェクト(Gooey Effect)を追加してください。グーエフェクト(goo effect)、メタボール(metaballs)とも呼ばれます。
ポインターを乗せると小さなしずくが本体から液体のように伸びてから離れ、ポインターが外れると流れるように戻って滑らかに溶け合うようにしてください。
ぼかしとコントラストのフィルターはページ全体ではなく小さな形のグループだけにかけ、キーボードフォーカスやタップでも同じ効果を出してください。

似ているモーション

Blob Morph (ブロブモーフ)

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

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

使いどころ

背景、アバター、ボタン

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

別名 Text Morph

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

使いどころ

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

Icon Morph (アイコンモーフ)

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

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

使いどころ

メニューの開閉ボタン

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

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

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

使いどころ

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

Motion Path (モーションパス)

別名 Animate Along Path, Offset Path Animation

要素が独自の曲線パスに沿って移動し、パスに合わせて向きを変えることもできます。

使いどころ

ルート上を進む飛行機や点、装飾的な移動要素

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