Gooey Blob System — Agent Skill by Meng To

From the author

Create a gooey blob system using SVG filters where multiple shapes merge into a single fluid form. Use overlapping circles combined with a Gaussian blur and color matrix filter to produce a continuous, organic mass. The forms should visually fuse and separate based on proximity. Focus on filter-driven merging (blur + threshold effect), soft organic boundaries with no hard edges, multiple independent shapes behaving as one system, and smooth continuous motion that feels fluid and cohesive.

— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The Gooey Blob System provides a method for generating organic, fluid-like visual effects on the web. By leveraging SVG filters—specifically combining Gaussian blur with a color matrix threshold—it allows multiple independent shapes to visually fuse and separate as they move. This technique creates a cohesive, soft-edged mass that behaves as a single system, suitable for decorative UI elements, loaders, or background atmospheres.

What it does

Implements SVG filters to create a threshold effect for merging shapes
Combines Gaussian blur and color matrix filters to produce organic boundaries
Enables multiple independent shapes to behave as a single fluid system
Supports the creation of soft, continuous motion effects
Provides a framework for integrating fluid blobs into web interfaces

When to use it

When you need organic, fluid shapes that merge and separate based on proximity
For creating unique background accents or hero atmosphere elements
When designing custom loaders or cursor-following interactions
When you want to avoid hard edges in motion-based UI components

Advantages

Achieves a fluid, organic aesthetic using standard web technologies
Allows for dynamic interaction where shapes fuse and separate naturally
Provides a consistent visual system for multiple moving elements
Enables fine-tuning of the merging effect through blur and contrast adjustments

Usage examples

“Create a background for my hero section using the gooey blob system.”: The agent generates the necessary SVG filter code and CSS animations to create a set of overlapping circles that merge into a single fluid mass as they move across the background.
“Design a loading animation where three circles merge into one.”: The agent provides the SVG structure and animation keyframes to ensure the circles maintain soft, continuous boundaries while transitioning between separate and fused states.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/mengto/gooey-blob-system/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip gooey-blob-system.zip -d .agents/skills

Documentation by Meng To

Gooey Blob System Skill

Use When

A page needs organic fluid shapes that visually merge, separate, and move as one soft system.

Workflow

Build the effect with SVG filters: Gaussian blur followed by a color matrix threshold.
Animate multiple overlapping circles or blobs so they approach and separate naturally.
Keep boundaries soft and continuous; the visual should feel fluid rather than like separate circles.
Use the blob system as a background accent, loader, cursor field, or hero atmosphere.
Tune blur, contrast, and shape spacing together so merging remains visible.

Guardrails

Do not fake gooey behavior with plain blurred circles that never merge.
Do not add fast jittery motion; keep it smooth and cohesive.
Provide a static or simplified fallback for low-motion contexts.

Files

ATTRIBUTION.mdAdded by AutoGineer856 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md1.3 KiB
demo/PROMPT.md3.3 KiB
demo/assets/page-01-0d868fef-f560-45ca-ab35-5dad4fc29059-3840w.webp276.2 KiB
demo/assets/page-02-3186f9ea-5f5a-49f7-8fcf-568ad52f515e-3840w.webp585.3 KiB
demo/assets/page-03-2f563338-39fa-47ea-9761-658d4f3f84db-1600w.jpg292.0 KiB
demo/assets/page-04-65695f80-23f9-46ee-8487-cbb6c93cc48b-3840w.webp523.8 KiB
demo/assets/source-preview.jpg79.4 KiB
demo/index.html29.4 KiB
demo/preview.jpg59.7 KiB
demo/source.json3.6 KiB

demo/source.json

{
  "version": 1,
  "provider": "Neuform",
  "synced_at": "2026-07-18T06:40:51.569Z",
  "skill": {
    "id": "gooey-blob-system",
    "label": "Gooey Blob System",
    "usage_count": 36,
    "url": "https://neuform.ai/skill/gooey-blob-system"
  },
  "ranking": {
    "position": 1,
    "order": [
      "view_count desc",
      "community_favorite_count desc",
      "relation_created_at desc"
    ],
    "visible_design_count": 1
  },
  "design": {
    "id": "60acc30b-501e-4cec-b815-645cf10804d2",
    "slug": "modern-talent-platform",
    "title": "Modern Talent Platform",
    "url": "https://neuform.ai/pages/modern-talent-platform/index.html",
    "view_count": 170,
    "favorite_count": 10,
    "remix_count": 2
  },
  "html": {
    "original_sha256": "c40c369e5b130e9d0050cf150a14015325f8592ccc076cd41d0c31950c5f6de0",
    "bundled_sha256": "ba9d237706178cc9b8853cecf65b7c6be78a0b473b10aa422e54061191ce3f5a",
    "runtime_dependencies": [],
    "hardened_sha256": "ad9bfe5929be4db66649eb27ee17f3f956461066253ca8d659925695dbac976f",
    "sandboxed_sha256": "e3e7f73f42b35cad267ec86b3ac7ce153518d2cae57479d149e2c5aca7ecb0d2",
    "security_profile": "sandboxed-srcdoc-v1"
  },
  "assets": {
    "preview": "assets/source-preview.jpg",
    "bundled": [
      {
        "bytes": 282854,
        "file": "assets/page-01-0d868fef-f560-45ca-ab35-5dad4fc29059-3840w.webp",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/0d868fef-f560-45ca-ab35-5dad4fc29059_3840w.webp"
      },
      {
        "bytes": 599390,
        "file": "assets/page-02-3186f9ea-5f5a-49f7-8fcf-568ad52f515e-3840w.webp",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3186f9ea-5f5a-49f7-8fcf-568ad52f515e_3840w.webp"
      },
      {
        "bytes": 298959,
        "file": "assets/page-03-2f563338-39fa-47ea-9761-658d4f3f84db-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2f563338-39fa-47ea-9761-658d4f3f84db_1600w.jpg"
      },
      {
        "bytes": 536390,
        "file": "assets/page-04-65695f80-23f9-46ee-8487-cbb6c93cc48b-3840w.webp",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/65695f80-23f9-46ee-8487-cbb6c93cc48b_3840w.webp"
      },
      {
        "bytes": 407279,
        "file": "../../../../assets/runtime/runtime-ccc8894b3418-runtime.js",
        "original_url": "https://cdn.tailwindcss.com/",
        "kind": "runtime-script",
        "sha256": "176e894661aa9cdc9a5cba6c720044cbbf7b8bd80d1c9a142a7c24b1b6c50d15"
      },
      {
        "bytes": 42667,
        "file": "../../../../assets/runtime/runtime-689ca8dda44c-scrolltrigger-min.js",
        "original_url": "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js",
        "kind": "runtime-script",
        "sha256": "65f6c13748b0c8d8f9eabd0373a130ac293b3f16bf34aaa946d953980372b932"
      },
      {
        "bytes": 71520,
        "file": "../../../../assets/runtime/runtime-027051effa47-gsap-min.js",
        "original_url": "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js",
        "kind": "runtime-script",
        "sha256": "efc85c7eb141819717cda0033484a84b1c890d13b02e355a2fec79d424b20e7a"
      },
      {
        "bytes": 22003,
        "file": "../../../../assets/runtime/runtime-163ebd087cfc-iconify-icon-min.js",
        "original_url": "https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js",
        "kind": "runtime-script",
        "sha256": "851bed7af266f96a0be3edf9918daab48d8da4ce17c46040511bae450caf3dd6"
      }
    ],
    "skipped": []
  }
}

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

What our scanner noticed· Medium risk

Large base64-encoded blobs

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Frontend Design
AnthropicOfficial
A framework for creating distinctive, intentional UI designs that avoid common templated aesthetics.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository188.6k
Theme Factory
AnthropicOfficial
A toolkit for applying professional color and font themes to documents, presentations, and web artifacts.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository188.6k
Brand Guidelines
AnthropicOfficial
Applies Anthropic's official brand colors and typography to digital artifacts.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository188.6k
Impeccable
Paul Bakaus· Community
A comprehensive design system and UI refinement tool for auditing, polishing, and evolving digital interfaces.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0Low riskHas scriptsGitHub stars of the source repository105.3k
Diagram Design
Cathryn Lavery· Community
Generate branded, editorial-style technical diagrams as self-contained HTML, SVG, or PNG files.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITLow riskHas scriptsGitHub stars of the source repository65.6k
UI UX Designer
Seth Hobson· Community
An expert UI/UX designer focused on systematic, accessible, and research-backed interface creation.
Design and creativeClaude Code
MITGitHub stars of the source repository42.3k