How to use

// layout.tsx or component parent just need to use the div outside the element
import { SkiperGooeyFilterProvider } from "@/components/v1/skiper64";

const Layout = ({ children }) => {
  return (
    <div>
      <SkiperGooeyFilterProvider />
      {children}
    </div>
  );
};

// whatever element has this filter set will have the gooey effect
const MyComponent = () => {
  return (
    <ul
      className="flex flex-col justify-end rounded-2xl"
      style={{
        filter: "url(#SkiperGooeyFilter)",
      }}
    >
      <li className="bg-foreground size-12 rounded-full"></li>
      <li className="bg-foreground size-12 rounded-full"></li>
    </ul>
  );
};

Observe

• Now all the list elments will have the gooey effect when they intersect
• Don't apply a backgorund color to the ul other wise it will not work
• use the same id on the filter as mentioned in the SkiperGooeyFilterProvider