gooey-blob-system — Claude Code skill: what it does, how to install
Creates gooey blob animations with SVG filters that merge shapes on proximity. Useful for background accents, loaders, or interactive hero areas.
npx skills add MengTo/Skills --skill gooey-blob-system -a claude-codeWhat gooey-blob-system does
The skill instructs the agent to create fluid gooey graphics where moving shapes merge on proximity. Instead of relying on CSS hacks, it builds an SVG filter chain using Gaussian blur followed by a color matrix threshold. The resulting shapes visually fuse and split smoothly. It targets interface elements like background hero accents, loaders, or cursor-reactive fields.
The workflow requires tuning blur, contrast, and element spacing simultaneously so the shapes actually fuse. Faking the behavior with detached blurred circles is explicitly prohibited. The instructions also demand a static or simplified fallback for low-motion contexts, so you will need to account for non-animated states.
What it helps with
- merge moving SVG shapes using Gaussian blur and color matrix filters
- build an organic loader with fluidly fusing circles
- generate smooth hero background accents without jitter
- provide a simplified fallback for low-motion contexts
Example prompts for the agent
- Create a gooey blob hero background using SVG blur and color matrix filters
- Build a loader with fusing circles and provide a simplified fallback for low motion
How to install gooey-blob-system
1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill gooey-blob-system -a claude-code2Manually: put the files in place
~/.claude/skills/gooey-blob-system/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/gooey-blob-system/
1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill gooey-blob-system -a codex2Manually: put the files in place
.agents/skills/gooey-blob-system/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill gooey-blob-system -a cursor2Manually: put the files in place
.cursor/skills/gooey-blob-system/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install MengTo/Skills gooey-blob-system2Manually: put the files in place
.github/skills/gooey-blob-system/SKILL.md1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill gooey-blob-system -a gemini-cli2Platform CLI
gemini skills install https://github.com/MengTo/Skills --path agent-skills/web-design/gooey-blob-systemManually: put the files in place
.devin/skills/gooey-blob-system/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add MengTo/Skills --skill gooey-blob-system -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about gooey-blob-system
How to install gooey-blob-system in Claude Code?
Run npx skills add MengTo/Skills --skill gooey-blob-system -a claude-code. Alternatively, place the file directly at ~/.claude/skills/gooey-blob-system/SKILL.md.
What does the gooey-blob-system skill do?
It directs the AI agent to build fluid interfaces where shapes fuse and separate on proximity. The effect relies on an SVG Gaussian blur paired with a color matrix threshold.
What guardrails does gooey-blob-system enforce?
It forbids faking gooey effects with plain blurred shapes that do not merge, and bans jittery motions. In low-motion contexts, it requires generating a static or simplified fallback.
Source text
SKILL.md · MIT
--- name: gooey-blob-system description: "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 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.
© MengTo · MIT · MengTo/Skills