{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-cloud-3",
  "type": "registry:block",
  "title": "Logo Cloud 3",
  "description": "Infinite logo slider with progressive blur edges.",
  "registryDependencies": [
    "https://motion-primitives.com/c/infinite-slider.json",
    "https://motion-primitives.com/c/progressive-blur.json"
  ],
  "files": [
    {
      "path": "app/preview/logo-cloud/three/page.tsx",
      "content": "import { InfiniteSlider } from '@/components/motion-primitives/infinite-slider'\nimport { ProgressiveBlur } from '@/components/motion-primitives/progressive-blur'\n\nexport default function LogoCloud() {\n    return (\n        <section className=\"bg-background overflow-hidden py-16\">\n            <div className=\"group relative m-auto max-w-7xl px-6\">\n                <div className=\"flex flex-col items-center md:flex-row\">\n                    <div className=\"md:max-w-44 md:border-r md:pr-6\">\n                        <p className=\"text-end text-sm\">Powering the best teams</p>\n                    </div>\n                    <div className=\"relative py-6 md:w-[calc(100%-11rem)]\">\n                        <InfiniteSlider\n                            speedOnHover={20}\n                            speed={40}\n                            gap={112}>\n                            <div className=\"flex\">\n                                <img\n                                    className=\"mx-auto h-5 w-fit dark:invert\"\n                                    src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/nvidia.svg\"\n                                    alt=\"Nvidia Logo\"\n                                    height=\"20\"\n                                    width=\"auto\"\n                                />\n                            </div>\n\n                            <div className=\"flex\">\n                                <img\n                                    className=\"mx-auto h-4 w-fit dark:invert\"\n                                    src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/stripe.svg\"\n                                    alt=\"Stripe Logo\"\n                                    height=\"16\"\n                                    width=\"auto\"\n                                />\n                            </div>\n                            <div className=\"flex\">\n                                <img\n                                    className=\"mx-auto h-4 w-fit dark:invert\"\n                                    src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/github.svg\"\n                                    alt=\"GitHub Logo\"\n                                    height=\"16\"\n                                    width=\"auto\"\n                                />\n                            </div>\n                            <div className=\"flex\">\n                                <img\n                                    className=\"mx-auto h-5 w-fit dark:invert\"\n                                    src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/nike.svg\"\n                                    alt=\"Nike Logo\"\n                                    height=\"20\"\n                                    width=\"auto\"\n                                />\n                            </div>\n                            <div className=\"flex\">\n                                <img\n                                    className=\"mx-auto h-5 w-fit dark:invert\"\n                                    src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/lemonsqueezy.svg\"\n                                    alt=\"Lemon Squeezy Logo\"\n                                    height=\"20\"\n                                    width=\"auto\"\n                                />\n                            </div>\n                            <div className=\"flex\">\n                                <img\n                                    className=\"mx-auto h-4 w-fit dark:invert\"\n                                    src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/laravel.svg\"\n                                    alt=\"Laravel Logo\"\n                                    height=\"16\"\n                                    width=\"auto\"\n                                />\n                            </div>\n                            <div className=\"flex\">\n                                <img\n                                    className=\"mx-auto h-7 w-fit dark:invert\"\n                                    src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/supabase.svg\"\n                                    alt=\"Supabase Logo\"\n                                    height=\"28\"\n                                    width=\"auto\"\n                                />\n                            </div>\n\n                            <div className=\"flex\">\n                                <img\n                                    className=\"mx-auto h-6 w-fit dark:invert\"\n                                    src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/anthropic.svg\"\n                                    alt=\"Anthropic Logo\"\n                                    height=\"24\"\n                                    width=\"auto\"\n                                />\n                            </div>\n                        </InfiniteSlider>\n\n                        <div className=\"bg-linear-to-r from-background absolute inset-y-0 left-0 w-20\"></div>\n                        <div className=\"bg-linear-to-l from-background absolute inset-y-0 right-0 w-20\"></div>\n                        <ProgressiveBlur\n                            className=\"pointer-events-none absolute left-0 top-0 h-full w-20\"\n                            direction=\"left\"\n                            blurIntensity={1}\n                        />\n                        <ProgressiveBlur\n                            className=\"pointer-events-none absolute right-0 top-0 h-full w-20\"\n                            direction=\"right\"\n                            blurIntensity={1}\n                        />\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/logo-cloud.tsx"
    }
  ]
}