Installation

Usage

import GooeyPagination from "@/components/ruixen/gooey-pagination";
 
export default function App() {
  return <GooeyPagination totalPages={7} />;
}

Props

Features

• Gooey Effect: SVG filter creates liquid blob transitions
• Active Indicator: Large blob appears behind active page dot
• Spring Animations: Smooth scaling and morphing effects
• Arrow Navigation: Previous/next arrows with disabled states
• Dots Layout: Clean dot-based pagination design

How It Works

The gooey effect is achieved using an SVG filter with:

• Gaussian Blur: Blurs the elements to create soft edges
• Color Matrix: Increases contrast to create sharp blob boundaries
• Composite: Combines the original and processed elements

CSS Filter

filter: url(#goo);

The SVG filter definition creates the liquid morphing effect when elements overlap or scale.