Gooey Footer

Installation

Architecture

This component relies on a classic UI engineering trick to avoid shipping complex 2D fluid simulation libraries.

1. Hidden SVG Filter: It embeds a hidden <svg> with a <filter> that chains feGaussianBlur and feColorMatrix.
2. The Matrix Math: The color matrix (values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7") aggressively increases the contrast of the alpha channel.
3. The Illusion: When two div elements (like the center blob and a social icon) get close to each other, their blurred edges overlap. The high-contrast color matrix snaps those overlapping blurry alpha channels into solid colors, creating the illusion of surface tension and liquid tearing!

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { GooeyFooter } from "@/components/creative/gooey-footer";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { GooeyFooter } from "@/components/creative/gooey-footer";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <GooeyFooter
        links{/* value */}
        socials{/* value */}
        color="example"
      />
    </div>
  );
}