AutoGineer
Generated banner for Gooey Blob System
Generated logo for Gooey Blob System

Gooey Blob System

Meng ToCommunityCreated by Meng To

  • Skill
  • Tool integration
  • Design and creative
  • MIT
  • Medium risk
Download ZIP

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

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/mengto/gooey-blob-system/download

  2. 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

  1. Build the effect with SVG filters: Gaussian blur followed by a color matrix threshold.

  2. Animate multiple overlapping circles or blobs so they approach and separate naturally.

  3. Keep boundaries soft and continuous; the visual should feel fluid rather than like separate circles.

  4. Use the blob system as a background accent, loader, cursor field, or hero atmosphere.

  5. 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

LICENSE

MIT License

Copyright (c) 2026 Meng To

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

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.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/gooey-blob-system · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To or Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download gooey-blob-system.zip