SVG Shape-Morph Hero (Scroll to Brand Mark)

What this builds

A full-viewport hero section where a large SVG shape (abstract blob, circle, geometric form) smoothly morphs into the brand logomark as the user scrolls through a pinned region. The morph is scrubbed by scroll position: scrolling down progresses the morph, scrolling up reverses it. Once the morph completes, the hero unpins and the page continues.

• Abstract SVG starting shape that smoothly morphs into a specific brand mark
• Scroll-scrubbed morph driven by GSAP ScrollTrigger pinning
• Proper point normalization via Flubber so arbitrary path pairs morph cleanly
• Content overlay (headline, subline) that fades/translates in coordination with the morph
• prefers-reduced-motion fallback that shows the final brand mark immediately
• Mobile-safe with touch scroll support

When to use / when not to

• Use when the brand has a distinctive logomark (icon, monogram, or symbol) that can be represented as an SVG path.
• Use when the hero should tell a visual story: "we start from something organic and resolve into precision."
• Do NOT use for text logos or logotypes (wordmarks); SVG path morphing between letterforms and shapes produces ugly intermediate states. Use gsap-splittext-kinetic-type for text-based reveals instead.
• Do NOT use when the hero background should be an animated gradient; see hero-gradient-mesh-aurora.
• Do NOT use when there is no scroll room (single-screen apps, modals). The effect requires scroll distance.
• For the underlying morph math in isolation, see primitive svg-path-morphing. This toolkit builds the complete scroll-driven hero around it.