{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-01",
  "title": "Scroll 01",
  "description": "Sticky media that changes as you scroll through text content.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/blocks/scroll/scroll-01/scroll-01.tsx",
      "content": "'use client'\n\nimport {\n  motion,\n  useScroll,\n  useTransform,\n  useMotionValueEvent,\n} from 'motion/react'\nimport { useRef, useState, Dispatch, SetStateAction } from 'react'\n\ntype Scroll01Item = {\n  title: string\n  description: string\n  media: string\n}\n\nexport interface Scroll01Props {\n  items: Scroll01Item[]\n}\n\nfunction ScrollItem({\n  item,\n  index,\n  setActive,\n}: {\n  item: Scroll01Item\n  index: number\n  setActive: Dispatch<SetStateAction<number>>\n}) {\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  const { scrollYProgress } = useScroll({\n    target: ref,\n    offset: ['start 90%', 'end 15%'],\n  })\n\n  const y = useTransform(scrollYProgress, [0, 1], [20, -20])\n\n  const opacityValues = index === 0 ? [1, 0.7, 1, 0] : [0, 0.7, 1, 0]\n  const opacity = useTransform(scrollYProgress, [0, 0.3, 0.7, 1], opacityValues)\n\n  const isActive = useTransform(scrollYProgress, (v) => v > 0.4 && v < 0.6)\n\n  useMotionValueEvent(isActive, 'change', (v) => {\n    if (v) {\n      setActive((prev) => (prev === index ? prev : index))\n    }\n  })\n\n  return (\n    <motion.article\n      ref={ref}\n      style={{ opacity, y }}\n      className=\"flex flex-col items-center\"\n    >\n      <div className=\"text-center\">\n        <h3 className=\"mb-2 text-2xl font-semibold\">{item.title}</h3>\n        <p className=\"text-muted-foreground\">{item.description}</p>\n      </div>\n    </motion.article>\n  )\n}\n\nexport function Scroll01({ items }: Readonly<Scroll01Props>) {\n  const [activeIndex, setActiveIndex] = useState<number>(0)\n\n  return (\n    <>\n      <div className=\"space-y-10 md:hidden\">\n        {items.map((item, index) => (\n          <article\n            key={`${item.title}-${index}`}\n            className=\"flex flex-col items-start space-y-4\"\n          >\n            <div className=\"space-y-2\">\n              <h3 className=\"text-2xl font-semibold\">{item.title}</h3>\n              <p className=\"text-muted-foreground\">{item.description}</p>\n            </div>\n            <img\n              src={item.media}\n              alt={item.title}\n              className=\"h-72 w-full rounded-2xl object-cover\"\n            />\n          </article>\n        ))}\n      </div>\n\n      <div className=\"hidden gap-10 md:grid md:grid-cols-2\">\n        <div className=\"sticky top-20 max-h-[70vh] overflow-hidden rounded-2xl\">\n          {items.map((item, index) => (\n            <motion.img\n              key={`${item.title}-${index}`}\n              src={item.media}\n              alt={item.title}\n              className=\"absolute inset-0 aspect-4/3 h-full w-full object-cover\"\n              initial={{ opacity: index === 0 ? 1 : 0 }}\n              animate={{\n                opacity: activeIndex === index ? 1 : 0,\n                willChange: 'opacity',\n              }}\n              transition={{\n                duration: 0.15,\n                ease: 'linear',\n              }}\n            />\n          ))}\n        </div>\n\n        <div className=\"py-[35vh]\">\n          <div className=\"space-y-[30vh]\">\n            {items.map((item, index) => (\n              <ScrollItem\n                key={`${item.title}-${index}`}\n                item={item}\n                index={index}\n                setActive={setActiveIndex}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/scroll/scroll-01/scroll-01.tsx"
    },
    {
      "path": "registry/blocks/scroll/scroll-01/scroll-01-example.tsx",
      "content": "import {\n  Scroll01,\n  type Scroll01Props,\n} from './scroll-01'\n\nexport const values = {\n  items: [\n    {\n      title: 'Build faster',\n      description: 'Create interfaces quickly using reusable blocks.',\n      media:\n        'https://images.unsplash.com/photo-1486092642310-0c4e84309adb?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    },\n    {\n      title: 'Customize easily',\n      description: 'Adapt everything to your design system.',\n      media:\n        'https://images.unsplash.com/photo-1479707406242-e8929e87e734?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    },\n    {\n      title: 'Stay consistent',\n      description: 'Keep layouts balanced with a clear visual rhythm.',\n      media:\n        'https://images.unsplash.com/photo-1628880689946-f4a0533ac5fc?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    },\n    {\n      title: 'Guide attention',\n      description: 'Highlight the right content without adding noise.',\n      media:\n        'https://images.unsplash.com/photo-1571495653425-621ba3cb7ac1?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    },\n    {\n      title: 'Scale calmly',\n      description: 'Expand your pages with patterns that stay elegant.',\n      media:\n        'https://images.unsplash.com/photo-1561990306-7462bfe923b6?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    },\n  ],\n} satisfies Scroll01Props\n\nexport function Scroll01Example() {\n  return (\n    <div>\n      <div className=\"h-10\" />\n      <Scroll01 items={values.items} />\n      <div className=\"h-30\" />\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/scroll/scroll-01/scroll-01-example.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 600
  },
  "type": "registry:block"
}