Blob Morph
ブロブモーフ
どんな動き？
8つの値を持つborder-radiusを使い、輪郭が不規則な「ブロブ」形状がゆらゆらと形を変え続けるアニメーション。液体のような有機的な質感を演出でき、装飾的な背景オブジェクトやヒーローセクションのアクセント図形として人気のあるスタイルのひとつ。
よく使う場所
背景装飾ヒーローセクションアクセント図形カード背景
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Continuously morph an organic blob shape using an 8-value border-radius.Trigger:
Continuous, starts automatically and loops.
Initial state:
border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%
Animation:
border-radius values smoothly interpolate through several irregular blob configurations.
Final state:
Returns to the initial border-radius value, repeating indefinitely.
Timing:
duration: 5s per cycle
easing: ease-in-out
iteration: infinite実装方法の候補
この動きは以下の技術で実装できます。
CSS (border-radius 8-value)GSAP MorphSVGPluginSVG path morphing
別名・関連ワード
Blob AnimationOrganic Shape MorphLiquid Blob