Agent Skills

gooey-blob-system

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.

Install

npx skills add https://github.com/mengto/skills --skill gooey-blob-system
SKILL.md

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.

Search skills and MCP servers

Fuzzy search across 23,137 skills and servers