) } export MaksedDivDemo `,__src__:"registry/default/example/masked-div-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" MaskedDiv "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "../ui/masked-div"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" MaksedDivDemo"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"items-between m-auto mt-40 flex max-w-5xl flex-wrap justify-between gap-5"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"MaskedDiv maskType"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"type-1"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={0.45}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"my-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"video"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"cursor-pointer transition-all duration-300 hover:scale-105"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" autoPlay"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" loop"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" muted"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"source"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"https://videos.pexels.com/video-files/7710243/7710243-uhd_2560_1440_30fps.mp4"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"video/mp4"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"MaskedDiv maskType"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"type-1"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={0.45}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"rotate-180 "'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"video"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"cursor-pointer transition-all duration-300 hover:scale-105"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" autoPlay"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" loop"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" muted"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"source"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"https://videos.pexels.com/video-files/18069803/18069803-uhd_1440_2560_24fps.mp4"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"video/mp4"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"MaskedDiv maskType"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"type-3"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"my-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"video"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"cursor-pointer transition-all duration-300 hover:scale-105"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" autoPlay"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" loop"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" muted"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"source"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"https://videos.pexels.com/video-files/18069166/18069166-uhd_2560_1440_24fps.mp4"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"video/mp4"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"MaskedDiv maskType"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"type-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"my-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"video"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"cursor-pointer transition-all duration-300 hover:scale-105"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" autoPlay"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" loop"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" muted"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"source"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"https://videos.pexels.com/video-files/18069701/18069701-uhd_2560_1440_24fps.mp4"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"video/mp4"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"MaskedDiv maskType"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"type-2"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"my-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"video"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"cursor-pointer transition-all duration-300 hover:scale-105"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" autoPlay"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" loop"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" muted"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"source"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"https://videos.pexels.com/video-files/18069232/18069232-uhd_2560_1440_24fps.mp4"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"video/mp4"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" MaksedDivDemo"})]})]})})})}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsx)(l.p,{children:"Install the required dependencies."}),` `,(0,e.jsxs)(a,{defaultValue:"cli",children:[(0,e.jsxs)(c,{children:[(0,e.jsx)(i,{value:"cli",children:"CLI"}),(0,e.jsx)(i,{value:"manual",children:"Manual"})]}),(0,e.jsx)(t,{value:"cli",children:(0,e.jsx)(d,{children:(0,e.jsxs)(r,{children:[(0,e.jsx)(l.p,{children:"Paste the below command in your terminal"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:` npx shadcn@latest add "http://skiper-ui.com/registry/masked-div.json" `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" npx"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" shadcn@latest"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "http://skiper-ui.com/registry/masked-div.json"'})]})})})})]})})}),(0,e.jsx)(t,{value:"manual",children:(0,e.jsxs)(d,{children:[(0,e.jsxs)(r,{children:[(0,e.jsx)(l.p,{children:"Install the required dependencies."}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:` npm i framer-motion clsx tailwind-merge `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" npm"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" i"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" framer-motion"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" clsx"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" tailwind-merge"})]})})})})]}),(0,e.jsxs)(r,{children:[(0,e.jsx)(l.p,{children:"Add util file"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,children:(0,e.jsxs)(l.code,{"data-language":"bash","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ClassValue,"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" clsx"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "clsx"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" twMerge"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "tailwind-merge"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" function cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:".."}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:".inputs:"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ClassValue[]"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8",fontWeight:"bold"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" twMerge"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"clsx(inputs"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})]}),(0,e.jsxs)(r,{children:["Copy the source code to ",(0,e.jsx)(l.code,{children:"components/ui/masked-div.tsx"})," "]}),(0,e.jsx)(p,{name:"masked-div",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import React, { useEffect, useRef } from "react" type MaskType = "type-1" | "type-2" | "type-3" | "type-4" interface SvgPath { path: string height: number width: number } interface MaskedDivProps { children: React.ReactElement maskType?: MaskType className?: string backgroundColor?: string size?: number } const svgPaths: Record = { "type-1": { path: "M0.928955 40.9769C0.928955 18.9149 18.7917 1.01844 40.8536 0.976903L289.97 0.507853C308.413 0.473128 323.521 15.1483 324.022 33.5845L324.886 65.4007C325.955 104.745 358.022 136.159 397.38 136.417L432.98 136.65C447.818 136.748 459.797 148.799 459.803 163.637L459.982 550.982C459.992 573.08 442.08 591 419.982 591H40.9289C18.8376 591 0.928955 573.091 0.928955 551V40.9769Z", height: 591, width: 460, }, "type-2": { path: "M0.811768 77.2118C0.811768 60.4225 14.4222 46.8121 31.2115 46.8121H180.95C192.496 46.8121 201.855 37.4527 201.855 25.9073V25.9073C201.855 11.9565 213.164 0.647217 227.115 0.647217H529.273C548.014 0.647217 563.206 15.8395 563.206 34.5802V34.5802C563.206 50.0897 575.779 62.6626 591.289 62.6626H820.388C837.177 62.6626 850.787 76.273 850.787 93.0623V350.953C850.787 367.742 837.177 381.353 820.388 381.353H366.165C349.852 381.353 336.627 368.128 336.627 351.814V351.814C336.627 335.501 323.402 322.276 307.089 322.276H31.2114C14.4222 322.276 0.811768 308.666 0.811768 291.876V77.2118Z", height: 381, width: 850, }, "type-3": { path: "M0.811768 76.9148C0.811768 34.8184 34.9377 0.692566 77.0341 0.692566L238.314 0.692566C265.199 0.692566 291.315 9.66257 312.525 26.1818L330.454 40.145C351.665 56.6641 377.781 65.6342 404.666 65.6342H436.959H474.046C502.946 65.6342 530.612 53.9184 550.723 33.1634V33.1634C570.834 12.4083 598.5 0.692566 627.4 0.692566H774.565C816.661 0.692566 850.787 34.8185 850.787 76.9149V412.695C850.787 454.791 816.661 488.917 774.565 488.917H425.799H213.306H177.573C138.629 488.917 107.059 457.347 107.059 418.403V400.373C107.059 370.822 83.1034 346.867 53.553 346.867V346.867C24.4248 346.867 0.811768 323.254 0.811768 294.126V244.805V76.9148Z", height: 489, width: 850, }, "type-4": { path: "M0.811768 34.5451C0.811768 15.7441 16.053 0.502808 34.8541 0.502808H816.745C835.546 0.502808 850.787 15.7441 850.787 34.5452V242.977C850.787 261.778 835.546 277.019 816.745 277.019H638.293H550.537C527.035 277.019 504.789 266.407 490.001 248.141L486.211 243.46C453.263 202.765 390.688 204.378 359.881 246.717V246.717C346.027 265.756 323.901 277.019 300.355 277.019H213.306H34.8541C16.0531 277.019 0.811768 261.778 0.811768 242.977V34.5451Z", height: 278, width: 851, }, } const MaskedDiv: React.FC = ({ children, maskType = "type-1", className = "", backgroundColor = "transparent", size = 1, }) => { const videoRef = useRef(null) useEffect(() => { const handleVisibilityChange = () => { const videoElement = videoRef.current if (!videoElement) return if (document.hidden) { videoElement.pause() } else { // Only play if the video should be playing const playPromise = videoElement.play() if (playPromise !== undefined) { playPromise.catch(() => { // Auto-play was prevented, handle this case silently }) } } } document.addEventListener("visibilitychange", handleVisibilityChange) // Intersection Observer for viewport visibility const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { const videoElement = entry.target as HTMLVideoElement if (entry.isIntersecting) { const playPromise = videoElement.play() if (playPromise !== undefined) { playPromise.catch(() => { // Handle auto-play prevention silently }) } } else { videoElement.pause() } }) }, { threshold: 0.1, // Start playing when 10% of the video is visible } ) if (videoRef.current) { observer.observe(videoRef.current) } return () => { document.removeEventListener("visibilitychange", handleVisibilityChange) if (videoRef.current) { // eslint-disable-next-line react-hooks/exhaustive-deps observer.unobserve(videoRef.current) } } }, []) const selectedMask = svgPaths[maskType] const svgString = \`data:image/svg+xml,%3Csvg width='\${selectedMask.width}' height='\${selectedMask.height}' viewBox='0 0 \${selectedMask.width} \${selectedMask.height}' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='\${selectedMask.path}' fill='%23D9D9D9'/%3E%3C/svg%3E%0A\` const containerStyle: React.CSSProperties = { aspectRatio: \`\${selectedMask.width}/\${selectedMask.height}\`, backgroundColor, maskImage: \`url("\${svgString}")\`, WebkitMaskImage: \`url("\${svgString}")\`, maskRepeat: "no-repeat", WebkitMaskRepeat: "no-repeat", maskSize: "contain", WebkitMaskSize: "contain", width: \`\${size * 100}%\`, maxWidth: "100%", margin: "0 auto", } return (

{React.cloneElement(children, { className: \`w-full h-full object-cover hover:scale-105 transition-all duration-300 \${ children.props.className || "" }\`, })}

) } export MaskedDiv `,__src__:"registry/default/ui/masked-div.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useRef "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" MaskType"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "type-1"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "type-2"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "type-3"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "type-4"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" SvgPath"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" path"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" height"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" number"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" number"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" MaskedDivProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" children"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"ReactElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLImageElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" HTMLVideoElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" maskType"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" MaskType"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" backgroundColor"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" number"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" svgPaths"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Record"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"MaskType"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" SvgPath"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "type-1"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" path"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "M0.928955 40.9769C0.928955 18.9149 18.7917 1.01844 40.8536 0.976903L289.97 0.507853C308.413 0.473128 323.521 15.1483 324.022 33.5845L324.886 65.4007C325.955 104.745 358.022 136.159 397.38 136.417L432.98 136.65C447.818 136.748 459.797 148.799 459.803 163.637L459.982 550.982C459.992 573.08 442.08 591 419.982 591H40.9289C18.8376 591 0.928955 573.091 0.928955 551V40.9769Z"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" height"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 591,"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 460,"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "type-2"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" path"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "M0.811768 77.2118C0.811768 60.4225 14.4222 46.8121 31.2115 46.8121H180.95C192.496 46.8121 201.855 37.4527 201.855 25.9073V25.9073C201.855 11.9565 213.164 0.647217 227.115 0.647217H529.273C548.014 0.647217 563.206 15.8395 563.206 34.5802V34.5802C563.206 50.0897 575.779 62.6626 591.289 62.6626H820.388C837.177 62.6626 850.787 76.273 850.787 93.0623V350.953C850.787 367.742 837.177 381.353 820.388 381.353H366.165C349.852 381.353 336.627 368.128 336.627 351.814V351.814C336.627 335.501 323.402 322.276 307.089 322.276H31.2114C14.4222 322.276 0.811768 308.666 0.811768 291.876V77.2118Z"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" height"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 381,"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 850,"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "type-3"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" path"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "M0.811768 76.9148C0.811768 34.8184 34.9377 0.692566 77.0341 0.692566L238.314 0.692566C265.199 0.692566 291.315 9.66257 312.525 26.1818L330.454 40.145C351.665 56.6641 377.781 65.6342 404.666 65.6342H436.959H474.046C502.946 65.6342 530.612 53.9184 550.723 33.1634V33.1634C570.834 12.4083 598.5 0.692566 627.4 0.692566H774.565C816.661 0.692566 850.787 34.8185 850.787 76.9149V412.695C850.787 454.791 816.661 488.917 774.565 488.917H425.799H213.306H177.573C138.629 488.917 107.059 457.347 107.059 418.403V400.373C107.059 370.822 83.1034 346.867 53.553 346.867V346.867C24.4248 346.867 0.811768 323.254 0.811768 294.126V244.805V76.9148Z"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" height"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 489,"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 850,"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "type-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" path"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "M0.811768 34.5451C0.811768 15.7441 16.053 0.502808 34.8541 0.502808H816.745C835.546 0.502808 850.787 15.7441 850.787 34.5452V242.977C850.787 261.778 835.546 277.019 816.745 277.019H638.293H550.537C527.035 277.019 504.789 266.407 490.001 248.141L486.211 243.46C453.263 202.765 390.688 204.378 359.881 246.717V246.717C346.027 265.756 323.901 277.019 300.355 277.019H213.306H34.8541C16.0531 277.019 0.811768 261.778 0.811768 242.977V34.5451Z"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" height"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 278,"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 851,"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" MaskedDiv"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"FC"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"MaskedDivProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" children"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" maskType "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "type-1"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' ""'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" backgroundColor "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "transparent"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" size "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 1,"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" videoRef "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLVideoElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">(null)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleVisibilityChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" videoElement "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" videoRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"current"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" (!"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"videoElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"document"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"hidden"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" videoElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"pause"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" else"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,e.jsx)(l.span,{style:{color:"#FFF4"},children:" Only play if the video should be playing"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" playPromise "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" videoElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"play"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"playPromise "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"!=="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" undefined)"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" playPromise"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"catch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,e.jsx)(l.span,{style:{color:"#FFF4"},children:" Auto-play was prevented, handle this case silently"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" document"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"addEventListener"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"visibilitychange"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" handleVisibilityChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,e.jsx)(l.span,{style:{color:"#FFF4"},children:" Intersection Observer for viewport visibility"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" observer "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" new"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" IntersectionObserver"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"entries"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" entries"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"forEach"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"entry"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" videoElement "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" entry"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"target "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" HTMLVideoElement"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"entry"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"isIntersecting"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" playPromise "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" videoElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"play"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"playPromise "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"!=="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" undefined)"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" playPromise"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"catch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,e.jsx)(l.span,{style:{color:"#FFF4"},children:" Handle auto-play prevention silently"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" else"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" videoElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"pause"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" threshold"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0.1,"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,e.jsx)(l.span,{style:{color:"#FFF4"},children:" Start playing when 10% of the video is visible"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"videoRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" observer"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"observe"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"videoRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" document"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"removeEventListener"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"visibilitychange"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" handleVisibilityChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"videoRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,e.jsx)(l.span,{style:{color:"#FFF4"},children:" eslint-disable-next-line react-hooks/exhaustive-deps"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" observer"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"unobserve"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"videoRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" [])"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" selectedMask "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" svgPaths"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"maskType"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" svgString "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" `data:image/svg+xml,%3Csvg width='${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"selectedMask"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}' height='${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"selectedMask"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}' viewBox='0 0 ${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"selectedMask"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"} ${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"selectedMask"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"selectedMask"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}' fill='%23D9D9D9'/%3E%3C/svg%3E%0A`"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" containerStyle"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"CSSProperties"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" aspectRatio"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" `${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"selectedMask"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}/${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"selectedMask"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" backgroundColor"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" maskImage"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' `url("${'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"svgString"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'}")`'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" WebkitMaskImage"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' `url("${'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"svgString"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'}")`'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" maskRepeat"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "no-repeat"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" WebkitMaskRepeat"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "no-repeat"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" maskSize"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "contain"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" WebkitMaskSize"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "contain"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" `${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"size"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" * 100"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}%`"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" maxWidth"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "100%"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" margin"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "0 auto"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"section className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"`relative ${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" style"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"containerStyle"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cloneElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" `w-full h-full object-cover hover:scale-105 transition-all duration-300 ${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" children"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" || "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'""'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }`"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" })}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" MaskedDiv"})]})]})})})}),(0,e.jsx)(r,{children:"Update the import paths to match your project setup."}),(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import MaskedDiv from "@components/ui/masked-div" `,children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" MaskedDiv "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@components/ui/masked-div"'})]})})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`function BasicExample() { return (

) } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" BasicExample"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"MaskedDiv maskType"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"type-1"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={0.45}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"my-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"video autoPlay loop muted"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"source"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"https://videos.pexels.com/video-files/7710243/7710243-uhd_2560_1440_30fps.mp4"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"video/mp4"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"MaskedDiv maskType"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"type-1"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={0.45}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"my-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Image width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={1920}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" height"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={1080}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" alt"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})]})})]})]})}function x(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(N,n)})):N(n)}var D=x;function F(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return _(V);})(); ;return Component;

masked Div

Installation

Paste the below command in your terminal npx shadcn@latest add "http://skiper-ui.com/registry/masked-div.json"Copy

Paste the below command in your terminal
`npx shadcn@latest add "http://skiper-ui.com/registry/masked-div.json"`