{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "video-masking",
  "type": "registry:block",
  "title": "Video masking",
  "description": "Video masking",
  "files": [
    {
      "path": "components/usages/videomaskingusage.tsx",
      "content": "import VideoMasking from \"@/registry/open-source/video-masking\";\n\nexport default function VideoMaskingUsage() {\n    return (\n        <div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n            <VideoMasking />\n        </div>\n    );\n}",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/videomaskingusage.tsx",
      "content": "import VideoMasking from \"@/registry/open-source/video-masking\";\n\nexport default function VideoMaskingUsage() {\n    return (\n        <div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n            <VideoMasking />\n        </div>\n    );\n}",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/video-masking.tsx",
      "content": "import React from 'react';\n\nexport default function VideoMasking() {\n    return (\n        <div className='flex flex-col gap-2'>\n            <section\n                className='relative'\n                style={{\n                    aspectRatio: '1213/667',\n                    backgroundColor: 'tomato',\n                    maskImage:\n                        \"url(\\\"data:image/svg+xml,%3Csvg width='221' height='122' viewBox='0 0 221 122' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M183 4C183 1.79086 184.791 0 187 0H217C219.209 0 221 1.79086 221 4V14V28V99C221 101.209 219.209 103 217 103H182C179.791 103 178 104.791 178 107V118C178 120.209 176.209 122 174 122H28C25.7909 122 24 120.209 24 118V103V94V46C24 43.7909 22.2091 42 20 42H4C1.79086 42 0 40.2091 0 38V18C0 15.7909 1.79086 14 4 14H24H43H179C181.209 14 183 12.2091 183 10V4Z' fill='%23D9D9D9'/%3E%3C/svg%3E%0A\\\")\",\n                    WebkitMaskImage:\n                        \"url(\\\"data:image/svg+xml,%3Csvg width='221' height='122' viewBox='0 0 221 122' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M183 4C183 1.79086 184.791 0 187 0H217C219.209 0 221 1.79086 221 4V14V28V99C221 101.209 219.209 103 217 103H182C179.791 103 178 104.791 178 107V118C178 120.209 176.209 122 174 122H28C25.7909 122 24 120.209 24 118V103V94V46C24 43.7909 22.2091 42 20 42H4C1.79086 42 0 40.2091 0 38V18C0 15.7909 1.79086 14 4 14H24H43H179C181.209 14 183 12.2091 183 10V4Z' fill='%23D9D9D9'/%3E%3C/svg%3E%0A\\\")\",\n                    maskRepeat: 'no-repeat',\n                    WebkitMaskRepeat: 'no-repeat',\n                    maskSize: 'contain',\n                    WebkitMaskSize: 'contain',\n                }}\n            >\n                <video autoPlay muted loop className='w-full max-h-96 object-cover aspect-square'>\n                    <source\n                        src='/placeholder.mp4'\n                        type='video/mp4'\n                    />\n                </video>\n            </section>\n            <section className='gap-2 dark:bg-black bg-white border rounded-lg p-5'>\n                <figure className='relative  '>\n                    <video\n                        autoPlay\n                        muted\n                        loop\n                        style={{\n                            maskImage: \"url('/splash-center.svg')\",\n                            maskSize: 'contain',\n                            maskRepeat: 'no-repeat',\n                            maskPosition: 'center',\n                        }}\n                        className='w-full relative max-h-136 object-cover  aspect-square '\n                    >\n                        <source\n                            src='https://videos.pexels.com/video-files/7710243/7710243-uhd_2560_1440_30fps.mp4'\n                            type='video/mp4'\n                        />\n                    </video>\n                </figure>\n            </section>\n            <section className='gap-2 dark:bg-black bg-white border rounded-lg p-5'>\n                <figure className=' relative w-full h-full bg-black'>\n                    <svg\n                        viewBox='0 0 285 80'\n                        preserveAspectRatio='xMidYMid slice'\n                        className='w-full absolute top-0 left-0 h-full '\n                    >\n                        <defs>\n                            <mask id='mask' x='0' y='0' width={'100%'} height={'100%'}>\n                                <rect\n                                    x='0'\n                                    y='0'\n                                    width={'100%'}\n                                    height={'100'}\n                                    style={{ fill: 'white', mask: 'url(#mask)' }}\n                                />\n                                <text\n                                    x='50%'\n                                    y='50%'\n                                    fill='red'\n                                    textAnchor='middle'\n                                    className=' italic underline font-bold'\n                                >\n                                    UI-LAYOUT\n                                </text>\n                            </mask>\n                        </defs>\n                        <rect\n                            x='0'\n                            y='0'\n                            width={'100%'}\n                            height={'100'}\n                            style={{ fill: '#000105', mask: 'url(#mask)' }}\n                        />\n                    </svg>\n                    <video autoPlay muted loop className='w-[80%] h-full '>\n                        <source\n                            src='https://videos.pexels.com/video-files/7710243/7710243-uhd_2560_1440_30fps.mp4'\n                            type='video/mp4'\n                        />\n                    </video>\n                </figure>\n            </section>\n\n            <section className='gap-2 dark:bg-black bg-white border rounded-lg p-5'>\n                <figure className='relative   '>\n                    <video\n                        autoPlay\n                        muted\n                        loop\n                        style={{\n                            maskImage: \"url('/hexagon.svg')\",\n                            maskSize: 'contain',\n                            maskRepeat: 'no-repeat',\n                            maskPosition: 'center',\n                        }}\n                        className='w-full relative h-full object-cover  aspect-square '\n                    >\n                        <source\n                            src='https://videos.pexels.com/video-files/7710243/7710243-uhd_2560_1440_30fps.mp4'\n                            type='video/mp4'\n                        />\n                    </video>\n                </figure>\n            </section>\n        </div>\n    );\n}\n",
      "type": "registry:ui"
    }
  ]
}