Skip to content
Get packs

Gooey Blob System

Makes the agent build merging, fluid blob animations using SVG filters for web pages

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When this skill is installed, the agent knows a specific web visual technique: drawing several soft circles with SVG filters (a blur followed by a color threshold) so they visibly melt together, then separate as they move apart. Without it, an agent might fake the effect with plain blurred circles that never actually merge. The skill also tells the agent to keep motion smooth and to provide a simpler static version for users who prefer reduced motion.

Great for

  • Web designers who want an organic, liquid-looking background or hero section
  • Front-end developers adding a loader, cursor effect, or decorative animation to a site
  • Anyone who wants a code-based alternative to exporting animated graphics

Skip it if

  • Projects that need a precise, literal brand logo or strict geometric layout, since the effect is intentionally soft and organic
  • Heavy production pages where many animated filters could slow down low-end devices, as the skill does not specify performance limits

Try asking

  • “Create a gooey blob loader for my landing page that merges and separates smoothly”
  • “Add a background of fluid blobs behind the hero section using SVG filters”
  • “Build a cursor-following blob field that stretches toward the mouse”
  • “Make a static fallback version of the blob animation for users with reduced motion settings”
Step-by-step guide: how to use Gooey Blob SystemInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    gooey-blob-system.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

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

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Describe where the blobs will appear (background, loader, cursor) so the agent picks sensible sizes and spacing.
  • Ask for the blur and contrast values to be exposed as adjustable settings so you can tune how strongly the shapes merge.
  • Review the demo/index.html file in a browser to preview the look before adopting it in a project.

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • demo/source.json
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.