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

demo/PROMPT.md

Gooey Blob System Demo Prompts

Minimal prompt

Use $gooey-blob-system to create a responsive standalone HTML design with the same visual confidence, hierarchy, and interaction finish as the included Neuform reference.

Recreate the demo

Use $gooey-blob-system to recreate the design quality and behavior of Modern Talent Platform as a complete responsive HTML document. Treat the included demo/index.html as the visual and interaction reference, not as a loose mood board.

Product brief

  • Page concept: Modern Talent Platform.

  • Purpose: Modern Talent Pricing Section is designed for comparing plans and supporting conversion decisions. Key features include plan comparison blocks and conversion-oriented actions. It is suitable for subscription pricing pages and plan comparison experiences.

  • Content anchors: Hire Elite Development Teams You Assumed Were Unavailable – Now Ready To Deploy Instantly!.

  • Useful subject tags: pricing, section, animated, cta, billing.

Skill direction

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

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

Fidelity target

  • Match the reference's composition, information density, type scale, spacing rhythm, surface treatment, color relationships, and motion restraint.

  • Preserve the strongest interaction and animated background behavior instead of replacing it with generic fades or decorative movement.

  • Keep the first screen art-directed, then carry the same design logic through every supporting section.

  • Make the result responsive from mobile to desktop, keyboard accessible, and stable when reduced motion is enabled.

  • Deliver a full index.html. Put page-owned images, video, models, and textures in demo/assets/. External runtime libraries may stay as pinned CDN dependencies when the source relies on them.

Reference snapshot

Remix prompt

Use $gooey-blob-system and the included Neuform demo as the quality bar, but replace the brand, subject, copy, palette, and content. Preserve the underlying layout logic, signature visual treatment, interaction choreography, responsive behavior, and performance constraints so the remix still clearly demonstrates the skill.

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