{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-synth",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/team-section/team-synth.tsx",
      "content": "'use client'\r\n\r\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\r\nimport React, { useRef } from 'react'\r\n\r\nconst SYNTH_TEAM = [\r\n  {\r\n    id: '1',\r\n    name: 'Amélie Laurent',\r\n    role: 'Founder & CEO',\r\n    image:\r\n      'https://images.unsplash.com/photo-1544168190-79c17527004f?q=80&w=688&auto=format&fit=crop',\r\n  },\r\n  {\r\n    id: '2',\r\n    name: 'Nikolas Gibbons',\r\n    role: 'Engineering Manager',\r\n    image:\r\n      'https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=687&auto=format&fit=crop',\r\n  },\r\n  {\r\n    id: '3',\r\n    name: 'Sienna Hewitt',\r\n    role: 'Product Manager',\r\n    image:\r\n      'https://images.unsplash.com/photo-1765438869321-d60141efd813?q=80&w=687&auto=format&fit=crop',\r\n  },\r\n]\r\n\r\nexport const TeamSynth = () => {\r\n  const timelineRef = useRef<HTMLDivElement>(null)\r\n\r\n  return (\r\n    <section\r\n      className=\"bg-neutral-950 min-h-screen py-24 px-6 text-white relative overflow-hidden\"\r\n      ref={timelineRef}\r\n    >\r\n      <div className=\"absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#292929_1px,transparent_1px),linear-gradient(to_bottom,#292929_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div>\r\n      <div className=\"absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(125%_125%_at_50%_10%,rgba(255,255,255,0)_40%,rgba(102,51,238,1)_100%)]\"></div>\r\n      <div className=\"max-w-6xl mx-auto relative z-10\">\r\n        <div className=\"text-center mb-24\">\r\n          <TimelineAnimation\r\n            timelineRef={timelineRef}\r\n            animationNum={1}\r\n            as=\"h2\"\r\n            className=\"text-7xl font-semibold italic tracking-tighter uppercase text-transparent bg-clip-text bg-linear-to-b from-cyan-400 to-blue-600\"\r\n          >\r\n            The Network\r\n          </TimelineAnimation>\r\n          <div className=\"w-48 h-1 bg-linear-to-r from-neutral-500 to-neutral-300 mx-auto mt-4\"></div>\r\n        </div>\r\n\r\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n          {SYNTH_TEAM.map((member, i) => (\r\n            <TimelineAnimation\r\n              key={i}\r\n              timelineRef={timelineRef}\r\n              animationNum={2 + i}\r\n              className=\"group relative\"\r\n            >\r\n              <div className=\"bg-violet-950 p-1 rounded-lg transition-transform duration-300 group-hover:-translate-y-4 group-hover:rotate-1\">\r\n                <div className=\"aspect-square relative overflow-hidden rounded-md\">\r\n                  <img\r\n                    src={member.image}\r\n                    className=\"w-full h-full object-cover grayscale brightness-75 group-hover:grayscale-0 group-hover:brightness-100 transition-all duration-500\"\r\n                    alt={member.name}\r\n                  />\r\n\r\n                  <div className=\"absolute inset-0 border-10 border-transparent group-hover:border-cyan-400/20 transition-all\"></div>\r\n                  <div className=\"absolute top-4 left-4 w-4 h-4 border-t-2 border-l-2 border-cyan-400 opacity-0 group-hover:opacity-100 transition-opacity\"></div>\r\n                  <div className=\"absolute bottom-4 right-4 w-4 h-4 border-b-2 border-r-2 border-pink-500 opacity-0 group-hover:opacity-100 transition-opacity\"></div>\r\n                </div>\r\n\r\n                <div className=\"p-6\">\r\n                  <h3 className=\"text-2xl font-spaceGrotesk font-black uppercase italic tracking-widest text-cyan-300 mb-1\">\r\n                    {member.name}\r\n                  </h3>\r\n                  <p className=\"text-pink-400 font-mono text-xs\">\r\n                    {member.role}\r\n                  </p>\r\n\r\n                  <div className=\"mt-4 flex gap-1\">\r\n                    {[...Array(5)].map((_, j) => (\r\n                      <div\r\n                        key={j}\r\n                        className=\"h-1 flex-1 bg-cyan-900 group-hover:bg-cyan-400 transition-colors\"\r\n                        style={{ transitionDelay: `${j * 50}ms` }}\r\n                      ></div>\r\n                    ))}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div className=\"absolute inset-0 bg-cyan-400/20 blur-2xl opacity-0 group-hover:opacity-100 transition-opacity -z-10\"></div>\r\n            </TimelineAnimation>\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"
}