Elastic Gooey Menu

Installation

npx kinetic-ui-cli@latest add elastic-gooey-menu

How It Works

The ElasticGooeyMenu utilizes an advanced technique where a standard HTML <div> is combined with an SVG <path> acting as its leading edge. Using framer-motion, we animate the SVG's d attribute from a deeply curved bezier curve (Q command) into a straight vertical line as the menu slides into view. This creates the optical illusion that the menu is made of stretching rubber.

Usage Guide

1. Import the Component

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

import { ElasticGooeyMenu } from "@/components/creative/elastic-gooey-menu";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ElasticGooeyMenu } from "@/components/creative/elastic-gooey-menu";

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