) } export BlurVignetteDemo `,__src__:"registry/default/example/blur-vignette-demo.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" React "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Image "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "next/image"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" BlurVignette "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/skiper/BlurVignette"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" BlurVignetteDemo"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"relative max-w-4xl"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"BlurVignette"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" radius"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"24px"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" inset"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"10px"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" transitionLength"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"100px"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" blur"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"15px"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'" rounded-[2.5rem]"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" switchView"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={true}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"video"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" autoPlay"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={true}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" muted"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" loop"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" content"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"true"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"size-full object-cover transition-all "'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"source"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" src"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"https://cdn.pixabay.com/video/2023/10/19/185726-876210695_large.mp4"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"video/mp4"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"flex flex-wrap gap-4 py-4"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"BlurVignette"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" radius"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"24px"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" inset"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"20px"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" transitionLength"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"120px"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" blur"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"35px"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" switchView"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={true}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"aspect-square max-w-[calc(50%-1rem)] flex-1 rounded-[2.5rem]"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Image"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" width"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={200}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" height"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={200}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"size-full rounded-[2.5rem] object-cover"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" src"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"https://assets.lummi.ai/assets/QmWk5SDFexL89Cky4JrmnALBKyJ82Ny1cqckSGaFu72nRn?auto=format&w=1500"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" alt"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'""'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" priority"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"BlurVignette"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" radius"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"24px"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" inset"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"20px"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" transitionLength"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"120px"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" blur"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"35px"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" switchView"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={true}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"aspect-square max-w-[calc(50%-1rem)] flex-1 rounded-[2.5rem]"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Image"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" width"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={200}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" priority"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" height"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={200}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"size-full rounded-[2.5rem] object-cover"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" src"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"https://assets.lummi.ai/assets/QmNfVLFxAkjRQRHunvFEYgQmJKNtLg64qtfZu1WuZ77p2e?auto=format&w=640"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" alt"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'""'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" BlurVignetteDemo"})]})]})})})}),` `,(0,l.jsxs)(n.h1,{id:"installation",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsx)(n.p,{children:"Install the required dependencies."}),` `,(0,l.jsxs)(i,{defaultValue:"cli",children:[(0,l.jsxs)(r,{children:[(0,l.jsx)(o,{value:"cli",children:"CLI"}),(0,l.jsx)(o,{value:"manual",children:"Manual"})]}),(0,l.jsx)(t,{value:"cli",children:(0,l.jsx)(d,{children:(0,l.jsxs)(c,{children:[(0,l.jsx)(n.p,{children:"Paste the below command in your terminal"}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:` npx shadcn@latest add "http://skiper-ui.com/registry/blur-vignette.json" `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" npx"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" shadcn@latest"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" add"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "http://skiper-ui.com/registry/blur-vignette.json"'})]})})})})]})})}),(0,l.jsx)(t,{value:"manual",children:(0,l.jsxs)(d,{children:[(0,l.jsxs)(c,{children:[(0,l.jsx)(n.p,{children:"Install the required dependencies."}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:` npm i framer-motion clsx tailwind-merge `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" npm"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" i"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" framer-motion"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" clsx"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" tailwind-merge"})]})})})})]}),(0,l.jsxs)(c,{children:[(0,l.jsx)(n.p,{children:"Add util file"}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.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,l.jsxs)(n.code,{"data-language":"bash","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ClassValue,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" clsx"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "clsx"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" twMerge"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "tailwind-merge"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" "})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" function cn"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:".."}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:".inputs:"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ClassValue[]"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8",fontWeight:"bold"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" twMerge"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"clsx(inputs"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})})]}),(0,l.jsxs)(c,{children:["Copy the source code to ",(0,l.jsx)(n.code,{children:"components/ui/blur-vignette.tsx"})," "]}),(0,l.jsx)(p,{name:"blur-vignette",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import React, { useState } from "react" import { Switch } from "@/components/ui/switch" interface BlurVignetteProps { children: React.ReactNode className?: string radius?: string inset?: string transitionLength?: string blur?: string switchView?: boolean } const BlurVignette = ({ children, switchView, className = "", radius = "24px", inset = "16px", transitionLength = "32px", blur = "21px", }: BlurVignetteProps) => { const [isEnabled, setIsEnabled] = useState(true) return (

{children}

{switchView && ( )}

) } export BlurVignette `,__src__:"registry/default/ui/blur-vignette.tsx",__style__:"default",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" React"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Switch "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/switch"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"interface"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" BlurVignetteProps"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" children"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" React"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"ReactNode"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" string"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" radius"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" string"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" inset"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" string"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" transitionLength"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" string"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" blur"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" string"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" switchView"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" boolean"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" BlurVignette"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" children"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" switchView"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' ""'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" radius "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "24px"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" inset "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "16px"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" transitionLength "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "32px"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" blur "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "21px"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}:"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" BlurVignetteProps"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"isEnabled"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setIsEnabled"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(true)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"`relative overflow-hidden ${"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}`"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}>"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"style"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"`"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" .blur-vignette {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" --radius: ${"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"radius"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"};"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" --inset: ${"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"inset"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"};"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" --transition-length: ${"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"transitionLength"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"};"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" --blur: ${"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"blur"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"};"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" position: absolute;"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" inset: 0;"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" -webkit-backdrop-filter: blur(var(--blur));"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" backdrop-filter: blur(var(--blur));"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" --r: max(var(--transition-length), calc(var(--radius) - var(--inset)));"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" --corner-size: calc(var(--r) + var(--inset)) calc(var(--r) + var(--inset));"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" --corner-gradient: transparent 0px,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" transparent calc(var(--r) - var(--transition-length)), "})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" black var(--r);"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" --fill-gradient: black, "})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" black var(--inset),"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" transparent calc(var(--inset) + var(--transition-length)),"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" transparent calc(100% - var(--transition-length) - var(--inset)),"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" black calc(100% - var(--inset));"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" --fill-narrow-size: calc(100% - (var(--inset) + var(--r)) * 2);"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" --fill-farther-position: calc(var(--inset) + var(--r));"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" -webkit-mask-image: linear-gradient(to right, var(--fill-gradient)),"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" linear-gradient(to bottom, var(--fill-gradient)),"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" radial-gradient(at bottom right, var(--corner-gradient)),"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" radial-gradient(at bottom left, var(--corner-gradient)),"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" radial-gradient(at top left, var(--corner-gradient)),"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" radial-gradient(at top right, var(--corner-gradient));"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" -webkit-mask-size: 100% var(--fill-narrow-size), "})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" var(--fill-narrow-size) 100%,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" var(--corner-size), "})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" var(--corner-size), "})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" var(--corner-size),"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" var(--corner-size);"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" -webkit-mask-position: 0 var(--fill-farther-position), "})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" var(--fill-farther-position) 0,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 0 0, "})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 100% 0, "})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 100% 100%, "})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 0 100%;"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" -webkit-mask-repeat: no-repeat;"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" opacity: 0;"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" transition: opacity 0.3s ease;"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" .blur-vignette.active {"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" opacity: 1;"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" `"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"`blur-vignette ${"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"isEnabled"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ? "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"active"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" : "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'""}`'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"children"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"absolute right-4 top-4 flex items-center gap-2"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"span className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"text-sm text-gray-600"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"switchView "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Switch checked"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"isEnabled"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" onCheckedChange"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"setIsEnabled"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" BlurVignette"})]})]})})})}),(0,l.jsx)(c,{children:"Update the import paths to match your project setup."}),(0,l.jsxs)(n.h2,{id:"usage",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Usage"]}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import BlurVignette from "@/components/skiper/BlurVignette" `,children:(0,l.jsx)(n.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" BlurVignette "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/skiper/BlurVignette"'})]})})})}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`function BasicExample() { return (

) } `,children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" BasicExample"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"BlurVignette"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" radius"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"24px"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" inset"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"10px"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" transitionLength"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"100px"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" blur"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"15px"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'" rounded-[2.5rem]"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" switchView"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={true}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"video"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" autoPlay"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={true}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" muted"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" loop"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" content"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"true"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"size-full object-cover transition-all "'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"source"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" src"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"https://cdn.pixabay.com/video/2023/10/19/185726-876210695_large.mp4"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"video/mp4"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})})]})})]})]})}function B(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,Object.assign({},e,{children:(0,l.jsx)(u,e)})):u(e)}var L=B;function a(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return k(z);})(); ;return Component;

Blur Vignette

Installation

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

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