Skip to main content
skill CX Codex

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add MengTo/Skills --skill gooey-blob-system -a claude-code
Open on GitHub

What 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-code

2Manually: put the files in place

~/.claude/skills/gooey-blob-system/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/gooey-blob-system/

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

Similar skills

Everything for Frontend and UI →

From the same set148

scroll-scrubbed-word-reveal A skill that reveals words in marked-up text as scroll progress advances. Built for headlines, quotes and onboarding copy. CX Codex +1 1,400installs technical-wireframe-info-layout Defines a monochrome design system with exploded wireframe 3D objects, connector lines, and dark diagnostic info layouts. CX Codex +1 1,400installs corner-diagonals A skill for diagonal-cut corners and chamfered edges on buttons, cards and panels. Useful when a UI needs sharp geometry instead of rounded pills. CX Codex +1 1,400installs number-details A skill that adds decorative 01, 02, 03 numbers to process steps, cards and headings. Useful when a section needs visual rhythm without extra copy. CX Codex +1 1,400installs dark-glass-clean-layout This skill defines a dark glass UI system with clean columns, floating data cards, and restrained depth. Use it for workspace and console layouts. CX Codex +1 1,400installs clean-minimal-beige-light-mode Sets a design-system direction: warm beige surfaces, quiet modular grids, a restrained accent. Useful when the interface should read calm and organised. CX Codex +1 1,400installs mesh-gradient-dark-blue-clean A design system skill for dark-blue interfaces with procedural canvas mesh gradients, hero containers, and pill navigation. Built for dark technical layouts. CX Codex +1 1,400installs framed-grid-layout A skill that spells out how to build pages with thin visible section borders, L-shaped corner brackets and strict grid alignment. CX Codex +1 1,400installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor