{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-slider",
  "type": "registry:ui",
  "dependencies": [],
  "files": [
    {
      "path": "components/ui/logo-slider.tsx",
      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\n/* =============================================================================\r\n   LogoSlider Component\r\n   \r\n   A smooth, infinite marquee/slider component for displaying logos.\r\n   Uses Tailwind CSS where possible, raw CSS only for animations/masks.\r\n============================================================================= */\r\n\r\nexport interface LogoSliderProps {\r\n    /** Array of React nodes (logos, icons, images) to display */\r\n    logos: React.ReactNode[];\r\n    /** Animation speed - higher = slower (default: 60) */\r\n    speed?: number;\r\n    /** Scroll direction. Default: \"left\" */\r\n    direction?: \"left\" | \"right\";\r\n    /** Whether to show blur overlays on edges. Default: true */\r\n    showBlur?: boolean;\r\n    /** Number of blur layers for progressive effect. Default: 8 */\r\n    blurLayers?: number;\r\n    /** Blur intensity multiplier. Default: 1 */\r\n    blurIntensity?: number;\r\n    /** Additional CSS classes */\r\n    className?: string;\r\n    /** Whether to pause animation on hover. Default: false */\r\n    pauseOnHover?: boolean;\r\n}\r\n\r\n/**\r\n * LogoSlider Component\r\n *\r\n * A beautiful infinite marquee for showcasing logos, partners, or any content.\r\n * Uses per-item CSS animations for optimal performance.\r\n */\r\n\r\n\r\nexport const LogoSlider = ({\r\n    logos,\r\n    speed = 60,\r\n    direction = \"left\",\r\n    showBlur = true,\r\n    blurLayers = 8,\r\n    blurIntensity = 1,\r\n    className,\r\n    pauseOnHover = false,\r\n}: LogoSliderProps) => {\r\n    return (\r\n        <div\r\n            className={cn(\r\n                \"logo-slider w-full overflow-hidden\",\r\n                className\r\n            )}\r\n            style={\r\n                {\r\n                    \"--speed\": speed,\r\n                    \"--count\": logos.length,\r\n                    \"--blurs\": blurLayers,\r\n                    \"--blur\": blurIntensity,\r\n                } as React.CSSProperties\r\n            }\r\n        >\r\n            <div\r\n                className={cn(\r\n                    \"logo-slider__container\",\r\n                    \"relative w-full min-h-[80px] grid\"\r\n                )}\r\n                data-direction={direction}\r\n                data-pause-on-hover={pauseOnHover}\r\n            >\r\n                {/* Progressive Blur Overlay - Left */}\r\n                {showBlur && (\r\n                    <div className=\"logo-slider__blur logo-slider__blur--left absolute top-0 bottom-0 left-0 w-1/4 z-10 pointer-events-none rotate-180\">\r\n                        {Array.from({ length: blurLayers }).map((_, i) => (\r\n                            <div\r\n                                key={`blur-left-${i}`}\r\n                                className=\"absolute inset-0\"\r\n                                style={{ \"--blur-index\": i } as React.CSSProperties}\r\n                            />\r\n                        ))}\r\n                    </div>\r\n                )}\r\n\r\n                {/* Progressive Blur Overlay - Right */}\r\n                {showBlur && (\r\n                    <div className=\"logo-slider__blur logo-slider__blur--right absolute top-0 bottom-0 right-0 w-1/4 z-10 pointer-events-none\">\r\n                        {Array.from({ length: blurLayers }).map((_, i) => (\r\n                            <div\r\n                                key={`blur-right-${i}`}\r\n                                className=\"absolute inset-0\"\r\n                                style={{ \"--blur-index\": i } as React.CSSProperties}\r\n                            />\r\n                        ))}\r\n                    </div>\r\n                )}\r\n\r\n                {/* Logo Track */}\r\n                <ul className=\"logo-slider__track flex items-center h-full w-fit m-0 p-0 list-none\">\r\n                    {logos.map((logo, index) => (\r\n                        <li\r\n                            key={index}\r\n                            className=\"logo-slider__item h-4/5 w-[120px] sm:w-[140px] lg:w-[160px] aspect-video grid place-items-center shrink-0\"\r\n                            style={{ \"--item-index\": index } as React.CSSProperties}\r\n                        >\r\n                            <div className=\"w-full h-full flex items-center justify-center [&>svg]:h-[65%] [&>svg]:w-auto [&>svg]:fill-zinc-800 dark:[&>svg]:fill-zinc-200 [&>img]:h-[65%] [&>img]:w-auto [&>img]:object-contain [&>img]:grayscale [&>img]:brightness-50 dark:[&>img]:brightness-125\">\r\n                                {logo}\r\n                            </div>\r\n                        </li>\r\n                    ))}\r\n                </ul>\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n\r\nLogoSlider.displayName = \"LogoSlider\";\r\n\r\nexport default LogoSlider;\r\n",
      "type": "registry:ui",
      "target": "components/ui/logo-slider.tsx"
    }
  ]
}