About gooey-blob-system
A design skill for creating soft, organic shapes that merge and separate as a fluid visual system. It provides SVG-based implementation guidance, motion constraints, and a fallback for reduced-motion contexts.
Key features
- 01SVG blur and threshold technique
- 02Merging animated blobs
- 03Smooth cohesive movement
- 04Background, loader, and cursor uses
- 05Static or simplified fallback
Use cases
- 01Adding organic motion to a hero area
- 02Creating a fluid loading indicator
- 03Building a soft animated cursor field
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/gooey-blob-systemin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
demo/index.htmlPROMPT.mdsource.jsonDetails
From the project READMEGooey Blob System Skill
Use When
- A page needs organic fluid shapes that visually merge, separate, and move as one soft system.
Workflow
- Build the effect with SVG filters: Gaussian blur followed by a color matrix threshold.
- Animate multiple overlapping circles or blobs so they approach and separate naturally.
- Keep boundaries soft and continuous; the visual should feel fluid rather than like separate circles.
- Use the blob system as a background accent, loader, cursor field, or hero atmosphere.
- 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.
Comments
Markdown supported