'use client'; import { useEffect, useRef, useState } from 'react'; import { gsap } from 'gsap'; import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin'; import { cn } from '@/lib/utils'; interface TechItem { id: string; label: string; path: string; } const ACTIVE_COLOR = '#EB5128'; const BASE_COLOR = '#121212'; const TECH_ITEMS: TechItem[] = [ { id: 'cursor', label: 'Cursor', path: 'M92.54 28.3774L51.3099 4.57342C49.9859 3.80886 48.3523 3.80886 47.0283 4.57342L5.80011 28.3774C4.68714 29.02 4 30.2085 4 31.4957V79.4965C4 80.7837 4.68714 81.9722 5.80011 82.6148L47.0303 106.419C48.3542 107.183 49.9879 107.183 51.3118 106.419L92.542 82.6148C93.655 81.9722 94.3421 80.7837 94.3421 79.4965V31.4957C94.3421 30.2085 93.655 29.02 92.542 28.3774H92.54ZM89.9502 33.4196L50.1485 102.358C49.8795 102.822 49.1691 102.633 49.1691 102.095V56.9546C49.1691 56.0526 48.6871 55.2183 47.9052 54.7654L8.81383 32.1963C8.34929 31.9273 8.53898 31.2169 9.07707 31.2169H88.6805C89.8109 31.2169 90.5174 32.4422 89.9522 33.4216H89.9502V33.4196Z' }, { id: 'framer', label: 'Framer', path: 'M74.4858 4V39.2429H39.2429L4 4H74.4858ZM4 39.2429H39.2429L74.4858 74.4858H39.2429V109.729L4 74.4858V39.2429Z' }, { id: 'webflow', label: 'Webflow', path: 'M120.924 4L83.6148 76.9347H48.5712L64.1849 46.7075H63.4844C50.6032 63.429 31.3842 74.4367 4 76.9347V47.1257C4 47.1257 21.5183 46.0911 31.8168 35.2636H4V4.00057H35.2631V29.714L35.9648 29.7112L48.74 4.00057H72.3834V29.5509L73.0852 29.5498L86.3397 4H120.924Z' }, { id: 'paper', label: 'Paper', path: 'M97.29 61.4093H61.4093V18.3523H18.3523V61.4093H61.4093V97.29H4V18.3523H18.3523V4H97.29V61.4093Z' }, { id: 'claude', label: 'Claude', path: 'M25.5374 77.0326L47.1304 64.9161L47.4917 63.8601L47.1304 63.2765H46.0744L42.4616 63.0542L30.1228 62.7207L19.4236 62.276L9.05782 61.7202L6.44554 61.1644L4 57.9408L4.25011 56.3289L6.44554 54.8561L9.58583 55.134L16.5334 55.6064L26.9547 56.3289L34.5136 56.7736L45.7131 57.9408H47.4917L47.7418 57.2182L47.1304 56.7736L46.658 56.3289L35.8754 49.0201L24.2035 41.2944L18.0896 36.848L14.7826 34.597L13.1152 32.485L12.3926 27.8718L15.394 24.5647L19.4236 24.8426L20.4518 25.1206L24.537 28.2608L33.2631 35.0139L44.6571 43.4065L46.3245 44.796L46.9914 44.3236L47.0748 43.9901L46.3245 42.7395L40.1273 31.5401L33.5132 20.1461L30.5674 15.4218L29.7893 12.5872C29.5114 11.42 29.3169 10.4473 29.3169 9.25235L32.7351 4.61138L34.6248 4L39.1824 4.61138L41.0999 6.2788L43.9345 12.7539L48.5199 22.9529L55.6342 36.8202L57.7185 40.9332L58.8301 44.7404L59.2469 45.9076H59.9695V45.2407L60.5531 37.4316L61.6369 27.844L62.6929 15.5051L63.0542 12.0314L64.7772 7.86284L68.1954 5.61183L70.8632 6.89018L73.0586 10.0305L72.753 12.0592L71.4468 20.5352L68.8901 33.8189L67.2227 42.7117H68.1954L69.307 41.6001L73.809 35.6252L81.3679 26.1766L84.7027 22.4249L88.5934 18.2842L91.0945 16.3111H95.8188L99.2926 21.48L97.7363 26.8158L92.8731 32.9852L88.8435 38.2097L83.0631 45.991L79.4504 52.216L79.7839 52.7162L80.6454 52.6328L93.7068 49.8538L100.765 48.5755L109.186 47.1304L112.993 48.909L113.41 50.7153L111.909 54.4114L102.905 56.6346L92.345 58.7467L76.6158 62.4706L76.4213 62.6095L76.6436 62.8874L83.7301 63.5544L86.7592 63.7211H94.1792L107.991 64.7494L111.604 67.1393L113.771 70.0573L113.41 72.2805L107.852 75.1151L100.349 73.3365L82.8408 69.168L76.8381 67.6673H76.0044V68.1676L81.0066 73.0586L90.1774 81.3401L101.655 92.0116L102.238 94.6516L100.765 96.7359L99.2092 96.5136L89.1214 88.9268L85.2307 85.5087L76.4213 78.0887H75.8377V78.8668L77.8663 81.8403L88.5934 97.9587L89.1492 102.905L88.371 104.517L85.592 105.49L82.5351 104.934L76.2545 96.1245L69.7794 86.2034L64.5548 77.3105L63.9157 77.6718L60.831 110.881L59.3859 112.576L56.051 113.855L53.272 111.743L51.7991 108.324L53.272 101.571L55.0506 92.7619L56.4957 85.7588L57.8018 77.0604L58.5799 74.1703L58.5244 73.9757L57.8852 74.0591L51.3267 83.0631L41.35 96.5414L33.4576 104.99L31.5679 105.74L28.2886 104.045L28.5943 101.016L30.4285 98.3199L41.35 84.4248L47.9363 75.8099L52.1882 70.8354L52.1604 70.1129H51.9103L22.8973 88.9546L17.7284 89.6216L15.5051 87.5373L15.783 84.1191L16.8391 83.0075L25.5652 77.0049L25.5374 77.0326Z' } ]; if (typeof window !== 'undefined') { gsap.registerPlugin(MorphSVGPlugin); } export default function FluidTechStack03() { const initialIndex = TECH_ITEMS.length - 1; const [activeIndex, setActiveIndex] = useState(initialIndex); const morphPathRef = useRef(null); const svgRef = useRef(null); const getCenteredOffset = (pathData: string) => { if (!svgRef.current) return { x: 0, y: 0 }; const tempPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); tempPath.setAttribute('d', pathData); svgRef.current.appendChild(tempPath); const bbox = tempPath.getBBox(); svgRef.current.removeChild(tempPath); const viewBox = svgRef.current.viewBox.baseVal; const centerX = viewBox.x + viewBox.width / 2; const centerY = viewBox.y + viewBox.height / 2; const offsetX = centerX - (bbox.x + bbox.width / 2); const offsetY = centerY - (bbox.y + bbox.height / 2); return { x: offsetX, y: offsetY }; }; useEffect(() => { if (!morphPathRef.current) return; const nextPath = TECH_ITEMS[activeIndex]?.path; if (!nextPath) return; const nextOffset = getCenteredOffset(nextPath); gsap.killTweensOf(morphPathRef.current); gsap.to(morphPathRef.current, { duration: 0.7, morphSVG: { shape: nextPath }, immediateRender: false, ease: 'power2.out', x: nextOffset.x, y: nextOffset.y, transformOrigin: '50% 50%' }); }, [activeIndex]); const handleSetActive = (index: number) => { if (index === activeIndex) return; setActiveIndex(index); }; const handleKeyDown = (event: React.KeyboardEvent, index: number) => { if (event.key !== 'Enter' && event.key !== ' ') return; event.preventDefault(); handleSetActive(index); }; return (

{TECH_ITEMS.map((item, index) => { const isActive = index === activeIndex; return ( ); })}

); }

Fluid Tech Stack

Tech

Category