An interactive hero where a gelatinous “portal” chases your cursor and reveals the background image. The effect is built from several circles that lag the pointer with different spring settings and merge via an SVG goo filter.

Behavior

• Pointer tracking — target position is sampled in SVG space; followers spring toward it.
• Layered lag — multiple circles (lead/mid/tail) use different spring tunings for a gooey trail.
• Goo mask — circles merge through an SVG blur + color-matrix filter and are used as a mask to reveal the image.
• Recentering — when the pointer leaves, the portal eases back to center.
• Overlay copy — title/subtitle render above the SVG layer.

Props

• imageSrc — URL of the background image to reveal.
• title — main heading shown over the portal.
• subtitle — optional supporting text.
• className — size/placement (e.g. h-[70vh] w-[70vw]).

Tuning (edit in source)

• Adjust spring values (stiffness, damping, mass) for snappier or softer lag.
• Change circle radii (and optionally add/remove circles) to alter the portal’s shape/weight.