{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blur-vignette-video",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/blurvignette/blurvignettevideo.tsx",
      "content": "import { BlurVignette, BlurVignetteArticle } from '@/components/ui/blur-vignette';\nimport { cn } from '@/lib/utils';\nimport Image from 'next/image';\nimport React from 'react';\n\nfunction Blurvignettevideo() {\n  return (\n    <>\n      <BlurVignette\n        radius='24px'\n        inset='10px'\n        transitionLength='100px'\n        blur='15px'\n        classname='h-96 w-full overflow-hidden'\n      >\n        <video\n          autoPlay={true}\n          muted\n          loop\n          content='true'\n          className='w-full  h-full object-cover  transition-all hover:scale-110'\n        >\n          <source\n            src='https://cdn.pixabay.com/video/2023/10/19/185726-876210695_large.mp4'\n            type='video/mp4'\n          />\n        </video>\n        <BlurVignetteArticle />\n      </BlurVignette>\n    </>\n  );\n}\n\nexport default Blurvignettevideo;\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/blur-vignette.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport type React from 'react';\nimport { createContext, useContext } from 'react';\n\ninterface BlurVignetteContextProps {\n  radius?: string;\n  inset?: string;\n  transitionLength?: string;\n  blur?: string;\n}\n\nconst BlurVignetteContext = createContext<BlurVignetteContextProps>({\n  radius: '24px',\n  inset: '20px',\n  transitionLength: '44px',\n  blur: '6px',\n});\n\nexport const useBlurVignetteContext = () => useContext(BlurVignetteContext);\n\ninterface BlurVignetteProps {\n  classname?: string;\n  children: React.ReactNode;\n  radius?: string;\n  inset?: string;\n  transitionLength?: string;\n  blur?: string;\n  blurclassname?: string;\n}\n\nexport const BlurVignette: React.FC<BlurVignetteProps> = ({\n  classname,\n  children,\n  radius = '24px',\n  inset = '20px',\n  transitionLength = '44px',\n  blur = '6px',\n}) => {\n  return (\n    <BlurVignetteContext.Provider value={{ radius, inset, transitionLength, blur }}>\n      <div\n        className={cn('relative aspect-square overflow-hidden', classname)}\n        style={{ borderRadius: radius }}\n      >\n        {children}\n      </div>\n    </BlurVignetteContext.Provider>\n  );\n};\ninterface BlurVignetteArticleProps {\n  children?: React.ReactNode;\n  classname?: string;\n}\n\nexport const BlurVignetteArticle: React.FC<BlurVignetteArticleProps> = ({\n  children,\n  classname,\n}) => {\n  const { radius, inset, transitionLength, blur } = useBlurVignetteContext();\n\n  return (\n    <div\n      className={cn('blur-vignette bottom-0 left-0 w-full h-full z-1', classname)}\n      style={\n        {\n          '--radius': radius,\n          '--inset': inset,\n          '--transition-length': transitionLength,\n          '--blur': blur,\n        } as React.CSSProperties\n      }\n    >\n      {children}\n    </div>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}