import { cn } from "@/lib/utils"; import { useEffect, useRef, useState, useLayoutEffect } from "react"; import gsap from "gsap"; interface MenuItem { num: string; name: string; clipId: string; image: string; } const defaultItems: MenuItem[] = [ { num: "01", name: "Gourmet Burgers", clipId: "clip-original", image: "https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" }, { num: "02", name: "Fresh Desserts", clipId: "clip-hexagons", image: "https://images.unsplash.com/photo-1551024601-bec78aea704b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" }, { num: "03", name: "Artisan Waffles", clipId: "clip-pixels", image: "https://images.unsplash.com/photo-1562376552-0d160a2f238d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" } ]; export const Component = ({ items = defaultItems, className }: { items?: MenuItem[]; className?: string }) => { const [activeIndex, setActiveIndex] = useState(0); const containerRef = useRef(null); const imageRef = useRef(null); const mainGroupRef = useRef(null); const masterTl = useRef(null); const createLoop = (index: number) => { const item = items[index]; const selector = `#${item.clipId} .path`; if (masterTl.current) masterTl.current.kill(); if (imageRef.current) imageRef.current.setAttribute("href", item.image); if (mainGroupRef.current) mainGroupRef.current.setAttribute("clip-path", `url(#${item.clipId})`); gsap.set(selector, { scale: 0, transformOrigin: "50% 50%" }); const tl = gsap.timeline({ repeat: -1, repeatDelay: 1 }); // 1. IN (Expo Out) tl.to(selector, { scale: 1, duration: 0.8, stagger: { amount: 0.4, from: "random" }, ease: "expo.out", }) // 2. IDLE (Sine Breath) .to(selector, { scale: 1.05, duration: 1.5, yoyo: true, repeat: 1, ease: "sine.inOut", stagger: { amount: 0.2, from: "center" } }) // 3. OUT (Expo In) .to(selector, { scale: 0, duration: 0.6, stagger: { amount: 0.3, from: "edges" }, ease: "expo.in", }); masterTl.current = tl; }; useLayoutEffect(() => { const ctx = gsap.context(() => { createLoop(0); }, containerRef); return () => ctx.revert(); }, []); const handleItemHover = (index: number) => { if (index === activeIndex) return; setActiveIndex(index); createLoop(index); }; return (

{/* LEFT SIDE: HIGH CONTRAST MENU */}

handleItemHover(index)} className="group cursor-pointer" >
{/* Numbers: Increased visibility for non-hover state */} {item.num} {/* Main Text: Enhanced visibility logic */}
{item.name.split(' ')[0]}
{item.name.split(' ')[1]}

{/* RIGHT SIDE: SQUARE GRID (Sharp Squares) */}

); };

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build