gooey-blob-system

Gooey Blob System スキル

使用する場面

• 有機的な流体の形が視覚的に合体・分離し、ひとつの柔らかなシステムとして動くページが必要な場合。

ワークフロー

1. SVG フィルターを使ってエフェクトを作成します。ガウスぼかしの後に、カラーマトリックスでしきい値を適用します。
2. 複数の円やブロブを重ねてアニメーションさせ、自然に近づいたり離れたりするようにします。
3. 境界を柔らかく連続させ、個別の円ではなく流体のように見せます。
4. ブロブシステムを背景のアクセント、ローダー、カーソルフィールド、またはヒーローセクションの雰囲気づくりに使用します。
5. 合体が見える状態を保てるよう、ぼかし、コントラスト、形状の間隔をあわせて調整します。

ガードレール

• 決して合体しない単純なぼかし円で、グーイーな動きを装わないでください。
• 速くて不規則な動きを加えず、滑らかで一体感のある動きを保ちます。
• 動きを抑えた環境向けに、静止版または簡易版のフォールバックを用意します。