'use client'; import React, { useState, useRef, useEffect, useMemo } from 'react'; import { gsap } from 'gsap'; import { CustomEase } from 'gsap/CustomEase'; // --- GSAP SETUP & ANIMATION CONFIG --- // This block should only run once in the entire application. let isGsapInitialized = false; const initializeGsap = () => { if (isGsapInitialized) return; gsap.registerPlugin(CustomEase); CustomEase.create("circleEase", "0.68, -0.55, 0.265, 1.55"); isGsapInitialized = true; }; // --- RENDERERS FOR EACH ANIMATION TYPE --- const animationRenderers: Record = { "dots-grid": () => (

{Array.from({ length: 9 }).map((_, i) => (

))}

), "text-morph": () => (

MENU CLOSE

), "plus-morph": () => (

), "circle-pulse": () => (

{Array.from({ length: 8 }).map((_, i) => (

))}

), "cube-spin": () => (

), "stacked-circles": () => (

{Array.from({ length: 5 }).map((_, i) => (

))}

), "rotating-circles": () => (

{Array.from({ length: 6 }).map((_, i) => (

))}

), "isometric-cube": () => (

), "expanding-circles": () => (

{Array.from({ length: 12 }).map((_, i) => (

))} {Array.from({ length: 12 }).map((_, i) => (

))} {Array.from({ length: 6 }).map((_, i) => (

))}

), }; const animationConfigs = { // All GSAP animation configs from original JS are here... // I'll define one for brevity, the full code will have all of them. "dots-grid": { init: (el: HTMLElement) => gsap.set(el.querySelectorAll(".dot"), { scale: 1, opacity: 1, x: 0, y: 0 }), activate: (el: HTMLElement) => { const dots = el.querySelectorAll(".dot"); gsap.to(dots[0], { x: 30, y: 30, scale: 1.2, ease: "circleEase", duration: 0.6 }); gsap.to(dots[1], { opacity: 0, scale: 5, ease: "circleEase", duration: 0.6 }); gsap.to(dots[2], { x: -30, y: 30, scale: 1.2, ease: "circleEase", duration: 0.6 }); gsap.to(dots[3], { opacity: 0, scale: 5, ease: "circleEase", duration: 0.6 }); gsap.to(dots[4], { scale: 1.2, ease: "circleEase", duration: 0.6 }); gsap.to(dots[5], { opacity: 0, scale: 5, ease: "circleEase", duration: 0.3 }); gsap.to(dots[6], { x: 30, y: -30, scale: 1.2, ease: "circleEase", duration: 0.6 }); gsap.to(dots[7], { opacity: 0, scale: 5, ease: "circleEase", duration: 0.6 }); gsap.to(dots[8], { x: -30, y: -30, scale: 1.2, ease: "circleEase", duration: 0.6 }); }, deactivate: (el: HTMLElement) => gsap.to(el.querySelectorAll(".dot"), { x: 0, y: 0, scale: 1, opacity: 1, ease: "circleEase", duration: 0.6 }), }, "text-morph": { init: (el: HTMLElement) => { gsap.set(el.querySelector(".menu"), { y: 0 }); gsap.set(el.querySelector(".close"), { y: 20 }); gsap.set(el.querySelector(".circle"), { x: 0, scaleX: 1, borderRadius: "50%" }); }, activate: (el: HTMLElement) => { gsap.to(el.querySelector(".menu"), { y: -20, ease: "power2.inOut", duration: 0.5 }); gsap.to(el.querySelector(".close"), { y: 0, ease: "power2.inOut", duration: 0.5 }); const tl = gsap.timeline(); tl.to(el.querySelector(".circle"), { x: -20, scaleX: 2.5, borderRadius: "4px", ease: "power1.out", duration: 0.2 }) .to(el.querySelector(".circle"), { x: 0, scaleX: 1, borderRadius: "50%", ease: "power1.in", duration: 0.2 }, ">=0"); }, deactivate: (el: HTMLElement) => { gsap.to(el.querySelector(".menu"), { y: 0, ease: "power2.inOut", duration: 0.5 }); gsap.to(el.querySelector(".close"), { y: 20, ease: "power2.inOut", duration: 0.5 }); const tl = gsap.timeline(); tl.to(el.querySelector(".circle"), { x: -20, scaleX: 2.5, borderRadius: "4px", ease: "power1.out", duration: 0.2 }) .to(el.querySelector(".circle"), { x: 0, scaleX: 1, borderRadius: "50%", ease: "power1.in", duration: 0.2 }, ">=0"); }, }, "plus-morph": { init: (el: HTMLElement) => { gsap.set(el, { rotation: 0 }); }, activate: (el: HTMLElement) => { gsap.to(el, { rotation: 405, ease: "power1.inOut", duration: 0.7 }); }, deactivate: (el: HTMLElement) => { gsap.to(el, { rotation: 0, ease: "power1.inOut", duration: 0.7 }); }, }, "circle-pulse": { init: (el: HTMLElement) => { gsap.set(el.querySelector(".circle"), { scale: 1 }); gsap.set(el.querySelector(".ring"), { scale: 0.5, opacity: 0 }); gsap.set(el.querySelector(".wave"), { scale: 0.5, opacity: 0 }); gsap.set(el.querySelectorAll(".particle"), { x: 0, y: 0, scale: 1, opacity: 1 }); }, activate: (el: HTMLElement) => { gsap.to(el.querySelector(".circle"), { scale: 0.7, ease: "power2.out", duration: 0.4 }); gsap.to(el.querySelector(".ring"), { scale: 1.5, opacity: 0.8, ease: "power2.out", duration: 0.5 }); gsap.to(el.querySelector(".wave"), { scale: 2.5, opacity: 0.4, ease: "power1.out", duration: 0.8 }); const particles = el.querySelectorAll(".particle"); particles.forEach((particle, i) => { const angle = (i / particles.length) * Math.PI * 2; gsap.to(particle, { x: Math.cos(angle) * 24, y: Math.sin(angle) * 24, ease: "power2.out", duration: 0.5, delay: i * 0.05 }); }); }, deactivate: (el: HTMLElement) => { gsap.to(el.querySelector(".circle"), { scale: 1, ease: "power2.out", duration: 0.4 }); gsap.to(el.querySelector(".ring"), { scale: 0.5, opacity: 0, ease: "power2.in", duration: 0.4 }); gsap.to(el.querySelector(".wave"), { scale: 0.5, opacity: 0, ease: "power2.in", duration: 0.4 }); gsap.to(el.querySelectorAll(".particle"), { x: 0, y: 0, ease: "power2.in", duration: 0.4 }); }, }, "cube-spin": { init: (el: HTMLElement) => gsap.set(el.querySelector(".cube"), { rotationY: 0 }), activate: (el: HTMLElement) => gsap.to(el.querySelector(".cube"), { rotationY: -450, ease: "circleEase", duration: 1.2 }), deactivate: (el: HTMLElement) => gsap.to(el.querySelector(".cube"), { rotationY: 0, ease: "circleEase", duration: 1.2 }), }, "stacked-circles": { init: (el: HTMLElement) => { const circles = el.querySelectorAll(".circle"); const positions = [0, 5, 10, 15, 20]; circles.forEach((circle, i) => gsap.set(circle, { x: `calc(-50% + ${positions[i]}px)`, y: '-50%' })); }, activate: (el: HTMLElement) => { const circles = el.querySelectorAll(".circle"); const positions = [-40, -20, 0, 20, 40]; circles.forEach((circle, i) => gsap.to(circle, { x: `calc(-50% + ${positions[i]}px)`, ease: "circleEase", duration: 0.6 })); }, deactivate: (el: HTMLElement) => { const circles = el.querySelectorAll(".circle"); const positions = [0, 5, 10, 15, 20]; circles.forEach((circle, i) => gsap.to(circle, { x: `calc(-50% + ${positions[i]}px)`, ease: "circleEase", duration: 0.6 })); }, }, "rotating-circles": { init: (el: HTMLElement) => { const circles = el.querySelectorAll(".circle"); circles.forEach((circle, index) => { gsap.set(circle, { x: (index - 2.5) * 8, y: 0, scale:1, opacity: 1 - index * 0.1, zIndex: 6 - index, transform: 'translate(-50%, -50%)' }); }); }, activate: (el: HTMLElement) => { const circles = el.querySelectorAll(".circle"); gsap.to(circles, { duration: 0.6, rotation: (i) => i * (360/6), transformOrigin: "0px 15px", ease: "circleEase", stagger: 0.05 }); }, deactivate: (el: HTMLElement) => { const circles = el.querySelectorAll(".circle"); gsap.to(circles, { duration: 0.6, rotation: 0, ease: "circleEase", stagger: { amount: 0.3, from: "end" } }); }, }, "isometric-cube": { init: (el: HTMLElement) => gsap.set(el.querySelector(".cube"), { rotateX: 35.264, rotateY: 45, rotateZ: 0 }), activate: (el: HTMLElement) => gsap.to(el.querySelector(".cube"), { rotateY: 45 + 180, duration: 0.8, ease: "power2.inOut" }), deactivate: (el: HTMLElement) => gsap.to(el.querySelector(".cube"), { rotateY: 45, duration: 0.8, ease: "power2.inOut" }), }, "expanding-circles": { init: (el: HTMLElement) => { const mainCircles = el.querySelectorAll('.circle:not(.extra):not(.micro)'); gsap.set(el, { rotation: 0 }); gsap.set(el.querySelectorAll('.circle'), { scale: 0, opacity: 0, xPercent: -50, yPercent: -50 }); mainCircles.forEach((circle, i) => { const angle = (i * 60) * (Math.PI / 180); gsap.set(circle, { x: Math.cos(angle) * 15, y: Math.sin(angle) * 15, scale: 1, opacity: 1, }); }); }, activate: (el: HTMLElement) => { const allCircles = el.querySelectorAll('.circle'); gsap.timeline() .to(el, { rotation: 360, duration: 1.2, ease: "power1.inOut" }) .to(allCircles, { scale: 1, opacity: 1, stagger: 0.02, duration: 0.3, ease: 'power2.out', transformOrigin: 'center center' }, 0.1); }, deactivate: (el: HTMLElement) => { const mainCircles = el.querySelectorAll('.circle:not(.extra):not(.micro)'); const otherCircles = el.querySelectorAll('.circle.extra, .circle.micro'); gsap.timeline() .to(el, { rotation: 0, duration: 1.2, ease: "power1.inOut" }) .to(otherCircles, { scale: 0, opacity: 0, duration: 0.3, ease: 'power2.in' }, 0) .to(mainCircles, { scale: 1, opacity: 1, duration: 0.3 }, 0.1); }, } }; // --- CORNER DECORATION COMPONENT --- const Corner = ({ position, rotation }: { position: string; rotation: string }) => (

); // --- MAIN COMPONENT --- interface MenuAnimationProps { title: string; animationId: keyof typeof animationConfigs; } export const MenuAnimation: React.FC = ({ title, animationId }) => { const [isActive, setIsActive] = useState(false); const containerRef = useRef(null); const animationRef = useRef(null); const config = useMemo(() => animationConfigs[animationId], [animationId]); const AnimationComponent = useMemo(() => animationRenderers[animationId], [animationId]); useEffect(() => { initializeGsap(); }, []); useEffect(() => { if (animationRef.current && config?.init) { config.init(animationRef.current); } }, [config]); const handleClick = () => { if (!animationRef.current || !config) return; if (isActive) { config.deactivate?.(animationRef.current); } else { config.activate?.(animationRef.current); } setIsActive(!isActive); }; if (!AnimationComponent) { return

Error: Animation "{animationId}" not found.

; } return (

{title}

); };

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

Menu Animations

Created by

Installation

How to use

Dependencies