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.
Install
npx skills add https://github.com/mengto/skills --skill gooey-blob-systemSKILL.md
Gooey 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.
Related skills
frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreographyhyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.