{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonials-with-verticalmarquee",
  "type": "registry:block",
  "title": "Testimonials with Vertical Marquee",
  "description": "Vertical scrolling testimonial columns with alternating directions and smooth infinite animations.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [
    "@scrollxui/avatar",
    "@scrollxui/card",
    "@scrollxui/kinetic-testimonials"
  ],
  "dependencies": ["motion"],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/testimonials/testimonials-with-verticalmarquee.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\nimport KineticTestimonial from '@/components/ui/kinetic-testimonials';\n\nconst testimonials = [\n  {\n    name: 'Maren Holst',\n    handle: 'Design Lead · Cramer',\n    review:\n      'LayerStack transformed the way we present content. The depth and motion feel intentional, not like an afterthought bolted onto a flat layout.',\n    avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&q=80&auto=format',\n  },\n  {\n    name: 'Jonas Albrecht',\n    handle: 'Head of Product · Kinear',\n    review:\n      'We rebuilt our landing page in a weekend. Performance stayed sharp, the layouts snapped perfectly — and our conversion rate went up 34%.',\n    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&q=80&auto=format',\n  },\n  {\n    name: 'Sade Okonkwo',\n    handle: 'Creative Director · Xercel',\n    review:\n      \"The stacking mechanic is genius. It mirrors how our users think about hierarchy — layer by layer, never overwhelming, always clear.\",\n    avatar: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=80&q=80&auto=format',\n  },\n  {\n    name: 'Erik Sundqvist',\n    handle: 'Staff Engineer · Wotion',\n    review:\n      \"I've tried every scroll-jacking library. This is the first one where my engineers didn't push back. Clean API, zero layout drama.\",\n    avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&q=80&auto=format',\n  },\n  {\n    name: 'Aisha Patel',\n    handle: 'Product Designer · Ripe',\n    review:\n      'The component library is exceptional. Every detail feels considered, and the developer experience is smooth from start to finish.',\n    avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=80&q=80&auto=format',\n  },\n  {\n    name: 'Liam Chen',\n    handle: 'CTO · SitHub',\n    review:\n      \"The performance optimizations are impressive. Even with complex layouts and animations, everything runs buttery smooth across devices.\",\n    avatar: 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=80&q=80&auto=format',\n  }\n];\n\nexport default function TestimonialsVerticalMarquee() {\n  const titleWords = 'Loved by thousands of happy creators'.split(' ');\n\n  return (\n    <section className='relative w-full bg-background'>\n      <div className='relative z-10 flex flex-col items-center w-full'>\n        <div className='flex flex-col items-center gap-4 text-center py-12 md:py-16'>\n          <h2 className='text-4xl md:text-6xl font-bold text-foreground tracking-tight'>\n            {titleWords.map((word, index) => (\n              <motion.span\n                key={`title-${word}-${index}`}\n                initial={{ opacity: 0, filter: 'blur(6px)', y: 12 }}\n                whileInView={{ opacity: 1, filter: 'blur(0px)', y: 0 }}\n                viewport={{ once: true }}\n                transition={{\n                  duration: 0.4,\n                  delay: index * 0.08,\n                  ease: 'easeInOut',\n                }}\n                className='mr-2 inline-block'\n              >\n                {word}\n              </motion.span>\n            ))}\n          </h2>\n\n          <motion.p\n            initial={{ opacity: 0 }}\n            whileInView={{ opacity: 1 }}\n            viewport={{ once: true }}\n            transition={{ duration: 0.5, delay: 0.5 }}\n            className='text-base md:text-lg text-muted-foreground max-w-2xl px-4'\n          >\n            Hear from our community of builders, designers, and creators who\n            trust us to power their vision\n          </motion.p>\n        </div>\n\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.6, delay: 0.65 }}\n          className='w-full'\n        >\n          <KineticTestimonial\n            testimonials={testimonials}\n            title=''\n            subtitle=''\n            desktopColumns={5}\n            tabletColumns={3}\n            mobileColumns={2}\n            speed={1}\n          />\n        </motion.div>\n      </div>\n    </section>\n  );\n}"
    }
  ]
}