{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-clippath",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/team-section/team-clippath.tsx",
      "content": "'use client'\r\nimport React, { useState } from 'react'\r\nimport { motion, AnimatePresence } from 'motion/react'\r\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\r\n\r\nconst items = [\r\n  {\r\n    id: '1',\r\n    url: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=880&auto=format&fit=crop',\r\n\r\n    title: 'Adrian Paul',\r\n    description: 'COO & Co-Founder',\r\n    tags: ['Floral', 'Highlands', 'Wildflowers', 'Colorful', 'Resilience'],\r\n  },\r\n  {\r\n    id: '2',\r\n    url: 'https://images.unsplash.com/photo-1623366302587-b38b1ddaefd9?q=80&w=1025&auto=format&fit=crop',\r\n\r\n    title: 'Flualy Cual',\r\n    description: 'Founder & CEO',\r\n    tags: ['Twilight', 'Peaks', 'Silhouette', 'Evening Sky', 'Peaceful'],\r\n  },\r\n  {\r\n    id: '3',\r\n    url: 'https://images.unsplash.com/photo-1569292316763-0b667e9e960c?q=80&w=687&auto=format&fit=crop',\r\n\r\n    title: 'Naymur Rahman',\r\n    description: 'CTO & Co-Founder',\r\n    tags: ['Rocky', 'Ridges', 'Contrast', 'Adventure', 'Clouds'],\r\n  },\r\n  {\r\n    id: '4',\r\n    url: 'https://images.unsplash.com/flagged/photo-1573603867003-89f5fd7a7576?q=80&w=746&auto=format&fit=crop',\r\n\r\n    title: 'John Doe',\r\n    description: 'Lead Designer',\r\n    tags: ['Creative', 'Vision', 'Design', 'Innovation', 'Artistic'],\r\n  },\r\n]\r\n\r\nexport function TeamClipPath() {\r\n  const timelineRef = React.useRef<HTMLDivElement>(null)\r\n  const [hoveredId, setHoveredId] = useState(null)\r\n\r\n  return (\r\n    <section\r\n      className=\"py-20 bg-neutral-100 min-h-screen relative\"\r\n      ref={timelineRef}\r\n    >\r\n      <div className=\"max-w-7xl mx-auto px-4\">\r\n        <TimelineAnimation\r\n          as=\"h1\"\r\n          animationNum={0}\r\n          timelineRef={timelineRef}\r\n          className=\"text-5xl font-semibold text-neutral-900 mb-4 text-center\"\r\n        >\r\n          Meet Our Team\r\n        </TimelineAnimation>\r\n        <TimelineAnimation\r\n          as=\"p\"\r\n          animationNum={1}\r\n          timelineRef={timelineRef}\r\n          className=\"text-neutral-600 mb-2 text-center\"\r\n        >\r\n          We lead with care — our core value — and a shared passion for\r\n          connecting the world.\r\n        </TimelineAnimation>\r\n        <div className=\"flex gap-6 justify-center items-center h-[420px]\">\r\n          {items.map((item) => {\r\n            const isHovered = hoveredId === item.id\r\n            const isOtherHovered = hoveredId !== null && hoveredId !== item.id\r\n\r\n            return (\r\n              <motion.div\r\n                key={item.id}\r\n                className=\"relative cursor-pointer h-full\"\r\n                style={{ overflow: 'hidden' }}\r\n                // @ts-ignore\r\n                onMouseEnter={() => setHoveredId(item.id)}\r\n                onMouseLeave={() => setHoveredId(null)}\r\n                initial={{\r\n                  width: '300px',\r\n                  clipPath: 'circle(72.3% at 50% 50%)',\r\n                }}\r\n                animate={{\r\n                  width: isHovered\r\n                    ? '600px'\r\n                    : isOtherHovered\r\n                      ? '150px'\r\n                      : '200px',\r\n                  clipPath: isHovered\r\n                    ? 'circle(72.3% at 50% 50%)'\r\n                    : 'circle(50% at 50% 50%)',\r\n                  filter: isOtherHovered ? 'blur(4px)' : 'blur(0px)',\r\n                  opacity: isOtherHovered ? 0.6 : 1,\r\n                }}\r\n                transition={{\r\n                  width: {\r\n                    duration: 0.5,\r\n                    ease: [0.5, 0.85, 0.25, 1.15],\r\n                  },\r\n                  filter: {\r\n                    duration: 0.4,\r\n                    ease: 'easeInOut',\r\n                  },\r\n                  opacity: {\r\n                    duration: 0.4,\r\n                    ease: 'easeInOut',\r\n                  },\r\n                }}\r\n              >\r\n                {/* Image Background */}\r\n                <div className=\"absolute inset-0\">\r\n                  <img\r\n                    src={item.url}\r\n                    alt={item.title}\r\n                    className=\"w-full h-full object-cover\"\r\n                  />\r\n                  <div className=\"absolute inset-0 bg-linear-to-t from-black/70 via-black/20 to-transparent\" />\r\n                </div>\r\n\r\n                {/* Content */}\r\n                <div className=\"absolute inset-0 p-6 flex flex-col justify-end text-white z-10\">\r\n                  <motion.h2\r\n                    className=\"text-2xl font-semibold mb-2 whitespace-nowrap overflow-hidden\"\r\n                    initial={{ opacity: 0, y: 20 }}\r\n                    animate={{\r\n                      opacity: isHovered ? 1 : 0,\r\n                      y: isHovered ? 0 : 20,\r\n                    }}\r\n                    transition={{\r\n                      duration: 0.3,\r\n                      delay: isHovered ? 0.2 : 0,\r\n                      ease: [0.5, 0.85, 0.25, 1.8],\r\n                    }}\r\n                  >\r\n                    {item.title}\r\n                  </motion.h2>\r\n\r\n                  <motion.p\r\n                    className=\"text-lg opacity-90 mb-4 whitespace-nowrap overflow-hidden\"\r\n                    initial={{ opacity: 0, y: 20 }}\r\n                    animate={{\r\n                      opacity: isHovered ? 1 : 0,\r\n                      y: isHovered ? 0 : 20,\r\n                    }}\r\n                    transition={{\r\n                      duration: 0.3,\r\n                      delay: isHovered ? 0.3 : 0,\r\n                      ease: [0.5, 0.85, 0.25, 1.8],\r\n                    }}\r\n                  >\r\n                    {item.description}\r\n                  </motion.p>\r\n\r\n                  <motion.div\r\n                    className=\"flex flex-wrap gap-2\"\r\n                    initial={{ opacity: 0, y: 20 }}\r\n                    animate={{\r\n                      opacity: isHovered ? 1 : 0,\r\n                      y: isHovered ? 0 : 20,\r\n                    }}\r\n                    transition={{\r\n                      duration: 0.3,\r\n                      delay: isHovered ? 0.4 : 0,\r\n                      ease: [0.5, 0.85, 0.25, 1.8],\r\n                    }}\r\n                  >\r\n                    {item.tags.map((tag, idx) => (\r\n                      <span\r\n                        key={idx}\r\n                        className=\"px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-sm\"\r\n                      >\r\n                        {tag}\r\n                      </span>\r\n                    ))}\r\n                  </motion.div>\r\n                </div>\r\n              </motion.div>\r\n            )\r\n          })}\r\n        </div>\r\n      </div>\r\n    </section>\r\n  )\r\n}\r\n",
      "type": "registry:block"
    },
    {
      "path": "./components/ui/timeline-animation.tsx",
      "content": "import type { Variants } from 'motion/react';\nimport { type HTMLMotionProps, motion, useInView } from 'motion/react';\nimport type React from 'react';\n\ntype TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {\n  children?: React.ReactNode;\n  animationNum: number;\n  className?: string;\n  timelineRef: React.RefObject<HTMLElement | null>;\n  as?: T;\n  customVariants?: Variants;\n  once?: boolean;\n} & HTMLMotionProps<T>;\n\nexport const TimelineAnimation = <T extends keyof HTMLElementTagNameMap = 'div'>({\n  children,\n  animationNum,\n  timelineRef,\n  className,\n  as,\n  customVariants,\n  once = true,\n  ...props\n}: TimelineContentProps<T>) => {\n  const defaultSequenceVariants = {\n    visible: (i: number) => ({\n      filter: 'blur(0px)',\n      y: 0,\n      opacity: 1,\n      transition: {\n        delay: i * 0.5,\n        duration: 0.5,\n      },\n    }),\n    hidden: {\n      filter: 'blur(20px)',\n      y: 0,\n      opacity: 0,\n    },\n  };\n\n  const sequenceVariants = customVariants || defaultSequenceVariants;\n\n  const isInView = useInView(timelineRef, {\n    once,\n  });\n\n  const MotionComponent = motion[as || 'div'] as React.ElementType;\n\n  return (\n    <MotionComponent\n      initial='hidden'\n      animate={isInView ? 'visible' : 'hidden'}\n      custom={animationNum}\n      variants={sequenceVariants}\n      className={className}\n      {...props}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}