Organic Blob Morph Hero (Without the Generic Blob Look)

What this builds

A full-viewport hero section with one or more large, slowly morphing organic shapes that feel biological, geological, or fluid rather than like default CodePen blob demos. The shapes are SVG paths deformed by layered simplex noise, composited with blur-based gooey merging, and tinted with gradient fills.

• Shapes deform continuously via 3D simplex noise (time as the third dimension), not random keyframes
• Multiple blobs merge when they overlap using an SVG feGaussianBlur + feColorMatrix threshold (the gooey/metaball trick)
• Gradient fills shift slowly, decoupled from the shape morph, adding a second layer of movement
• Pointer proximity subtly repels or attracts the nearest blob control points
• The shapes are SVG, not canvas, so they scale to any resolution and can have CSS filters applied cheaply
• prefers-reduced-motion freezes the morph at a single aesthetically chosen state

When to use / when not to

• Use for brand-forward hero sections where organic, biological, or fluid motion communicates identity.
• Use when the site aesthetic is warm, rounded, natural, or art-directed (wellness, creative, fintech).
• Do NOT use when the brand is sharp, geometric, or technical. See hero-minimal-swiss-type for restraint-first design.
• Do NOT use for background decoration that could be a CSS gradient. If the blob does not morph or interact, a border-radius: 40% div with a radial gradient is simpler and cheaper.
• For the morph math without the hero structure, see primitives svg-path-morphing.