skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gooey-blob-system

Create fluid merging blob animations using SVG Gaussian blur and color matrix filters.

5.7k|685|Updated Feb 3, 2026
Search Tags:#GSAP#svg filters#Web design#Landing Page#blob animation#gaussian blur#gooey effect
One-click install
npx skills add https://github.com/MengTo/Skills --skill gooey-blob-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gooey-blob-system
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/gooey-blob-system
Command: npx skills add https://github.com/MengTo/Skills --skill gooey-blob-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building organic, fluid background effects where shapes visually merge and separate is difficult with plain CSS, since blurred circles alone never truly fuse. This Skill provides a proven SVG filter technique (Gaussian blur plus color matrix threshold) that makes multiple shapes behave as one continuous liquid mass.

Core Features & Use Cases

  • Filter-Driven Merging: Combines feGaussianBlur with feColorMatrix thresholding so overlapping shapes fuse and separate based on proximity, with no hard edges.
  • Cohesive Multi-Shape Motion: Animates several independent blobs with smooth, continuous movement so the system reads as one organic form rather than separate circles.
  • Use Case: Add a gooey animated background to a landing page hero, pricing section, loader, or cursor field, as demonstrated in the included Modern Talent Platform demo built with Tailwind CSS and GSAP.

Quick Start

Use the gooey-blob-system skill to build a responsive HTML page with an animated gooey blob background behind the hero section.

Frequently Asked Questions about gooey-blob-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a gooey blob effect with SVG filters?▼

Apply an SVG filter combining feGaussianBlur with feColorMatrix to a container of overlapping shapes. The blur softens the shapes and the color matrix thresholds the alpha channel, causing nearby shapes to visually fuse into one continuous mass.

How to animate gooey blobs so they merge and separate smoothly?▼

Animate multiple overlapping circles with slow, continuous motion using GSAP or CSS animations with sine easing. Tune blur radius, contrast values, and shape spacing together so the merging effect stays visible as blobs approach and separate.

Why do my blurred circles not merge into a gooey effect?▼

Plain CSS blur only softens edges without fusing shapes. The gooey effect requires the SVG color matrix step that sharply thresholds the blurred alpha channel, which is what makes nearby shapes visually connect.

Can gooey blob backgrounds work with reduced motion preferences?▼

Yes, provide a static or simplified fallback for low-motion contexts. The skill's guardrails require avoiding fast jittery motion and offering a stable alternative when users enable reduced motion settings.

What are good use cases for a gooey blob system in web design?▼

Gooey blob systems work well as background accents, loaders, cursor fields, or hero atmosphere on landing pages. They add organic fluid character to pricing sections, product heroes, and brand-focused pages.

Related Skills

Explore More Design & Creative Skills→
IwatsukaYuraIwatsukaYura

frontend-design

Define and enforce a cohesive visual system for frontend interfaces.

Community
Advanced
Legal-and-GeneralLegal-and-General
23

canopy-hero

Guides engineers to implement Canopy Hero sections with breadcrumbs and responsive layouts in Angular projects.

Official
Intermediate
gajjalaashok75-UIgajjalaashok75-UI
2

motion-choreography

Build coordinated GSAP motion sequences with timelines, scroll triggers, and spring easing.

Community
Advanced
tanepipertanepiper
27

particles-gpu

Render large particle counts via GPU instancing and custom shaders in Three.js.

Community
Advanced