}> }> {/* Radial gradient for the cute fade */}

); } const Card = ({ title, icon, children, }: { title: string; icon: React.ReactNode; children?: React.ReactNode; }) => { const [hovered, setHovered] = React.useState(false); return (

setHovered(true)} onMouseLeave={() => setHovered(false)} className="border border-black/[0.2] group/canvas-card flex items-center justify-center dark:border-white/[0.2] max-w-sm w-full mx-auto p-4 relative h-[30rem] relative" > {hovered && ( {children} )}

{icon}

{title}

); }; const AceternityIcon = () => { return ( ); }; export const Icon = ({ className, ...rest }: any) => { return ( ); }; `,__src__:"src/registry/default/example/canvas-reveal-effect-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:"#3CEC85"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"AnimatePresence"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"motion"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"framer-motion"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"CanvasRevealEffect"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"@/components/ui/canvas-reveal-effect"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" CanvasRevealEffectDemo"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"py-20 flex flex-col lg:flex-row items-center justify-center bg-white dark:bg-black w-full gap-4 mx-auto px-8"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Card"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"Sheetal is Nisha"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"AceternityIcon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"CanvasRevealEffect"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"animationSpeed"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"5.1"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"containerClassName"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"bg-emerald-900"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Card"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"Nisha is Munni"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"AceternityIcon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"CanvasRevealEffect"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"animationSpeed"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"containerClassName"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"bg-black"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={["})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"236"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"72"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"153"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"232"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"121"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"249"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"dotSize"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"/* Radial gradient for the cute fade */"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute inset-0 [mask-image:radial-gradient(400px_at_center,white,transparent)] bg-black/50 dark:bg-black/90"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Card"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"Munni is Aditi"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"AceternityIcon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"CanvasRevealEffect"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"animationSpeed"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"containerClassName"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"bg-sky-600"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={[["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"125"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"211"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"252"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]]}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"Card"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"ReactNode"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"ReactNode"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"hovered"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"setHovered"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"onMouseEnter"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"setHovered"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"onMouseLeave"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"setHovered"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"border border-black/[0.2] group/canvas-card flex items-center justify-center dark:border-white/[0.2] max-w-sm w-full mx-auto p-4 relative h-[30rem] relative"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Icon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute h-6 w-6 -top-3 -left-3 dark:text-white text-black"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Icon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute h-6 w-6 -bottom-3 -left-3 dark:text-white text-black"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Icon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute h-6 w-6 -top-3 -right-3 dark:text-white text-black"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Icon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute h-6 w-6 -bottom-3 -right-3 dark:text-white text-black"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"AnimatePresence"}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"hovered"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"motion.div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"initial"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"animate"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"h-full w-full absolute inset-0"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"relative z-20"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"text-center group-hover/canvas-card:-translate-y-4 group-hover/canvas-card:opacity-0 transition duration-200 w-full mx-auto flex items-center justify-center"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"h2"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"dark:text-white text-xl opacity-0 group-hover/canvas-card:opacity-100 relative z-10 text-black mt-4 font-bold group-hover/canvas-card:text-white group-hover/canvas-card:-translate-y-2 transition duration-200"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"AceternityIcon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"svg"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"66"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"65"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"viewBox"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"0 0 66 65"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"fill"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"none"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"xmlns"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"h-10 w-10 text-black dark:text-white group-hover/canvas-card:text-white "'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"path"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"d"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"M8 8.05571C8 8.05571 54.9009 18.1782 57.8687 30.062C60.8365 41.9458 9.05432 57.4696 9.05432 57.4696"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"stroke"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"currentColor"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeWidth"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"15"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeMiterlimit"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"3.86874"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeLinecap"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"round"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"mixBlendMode"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"darken"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"Icon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F38CEC"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#F38CEC"},children:"rest"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"any"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"svg"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"xmlns"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"fill"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"none"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"viewBox"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"0 0 24 24"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeWidth"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"1.5"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"stroke"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"currentColor"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{..."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"rest"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeLinecap"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"round"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeLinejoin"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"round"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"d"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"M12 6v12m6-6H6"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})})]})})})}),` `,(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.jsxs)(c,{children:[(0,e.jsx)(r,{children:"Install util 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 three @react-three/fiber `,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:"#B5BDCC"},children:"npm "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:"i"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:"framer-motion"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:"tailwind-merge"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:"three"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:"@react-three/fiber"})]})})})}),(0,e.jsx)(r,{children:"Add util file"}),(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"utils/cn.ts"}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__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":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"ClassValue"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"clsx"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"twMerge"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"tailwind-merge"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" cn"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"(..."}),(0,e.jsx)(l.span,{style:{color:"#F38CEC"},children:"inputs"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"ClassValue"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[])"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" twMerge"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"inputs"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"));"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})})]})})]}),(0,e.jsx)(r,{children:"Copy the source code"}),(0,e.jsx)(l.p,{children:(0,e.jsx)(l.code,{children:"components/ui/canvas-reveal-effect.tsx"})}),(0,e.jsx)(i,{name:"canvas-reveal-effect",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 { cn } from "@/utils/cn"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import React, { useMemo, useRef } from "react"; import * as THREE from "three"; export const CanvasRevealEffect = ({ animationSpeed = 0.4, opacities = [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1], colors = [[0, 255, 255]], containerClassName, dotSize, showGradient = true, }: { /** * 0.1 - slower * 1.0 - faster */ animationSpeed?: number; opacities?: number[]; colors?: number[][]; containerClassName?: string; dotSize?: number; showGradient?: boolean; }) => { return (

{showGradient && (

)}

); }; interface DotMatrixProps { colors?: number[][]; opacities?: number[]; totalSize?: number; dotSize?: number; shader?: string; center?: ("x" | "y")[]; } const DotMatrix: React.FC = ({ colors = [[0, 0, 0]], opacities = [0.04, 0.04, 0.04, 0.04, 0.04, 0.08, 0.08, 0.08, 0.08, 0.14], totalSize = 4, dotSize = 2, shader = "", center = ["x", "y"], }) => { const uniforms = React.useMemo(() => { let colorsArray = [ colors[0], colors[0], colors[0], colors[0], colors[0], colors[0], ]; if (colors.length === 2) { colorsArray = [ colors[0], colors[0], colors[0], colors[1], colors[1], colors[1], ]; } else if (colors.length === 3) { colorsArray = [ colors[0], colors[0], colors[1], colors[1], colors[2], colors[2], ]; } return { u_colors: { value: colorsArray.map((color) => [ color[0] / 255, color[1] / 255, color[2] / 255, ]), type: "uniform3fv", }, u_opacities: { value: opacities, type: "uniform1fv", }, u_total_size: { value: totalSize, type: "uniform1f", }, u_dot_size: { value: dotSize, type: "uniform1f", }, }; }, [colors, opacities, totalSize, dotSize]); return ( ); }; type Uniforms = { [key: string]: { value: number[] | number[][] | number; type: string; }; }; const ShaderMaterial = ({ source, uniforms, maxFps = 60, }: { source: string; hovered?: boolean; maxFps?: number; uniforms: Uniforms; }) => { const { size } = useThree(); const ref = useRef(); let lastFrameTime = 0; useFrame(({ clock }) => { if (!ref.current) return; const timestamp = clock.getElapsedTime(); if (timestamp - lastFrameTime < 1 / maxFps) { return; } lastFrameTime = timestamp; const material: any = ref.current.material; const timeLocation = material.uniforms.u_time; timeLocation.value = timestamp; }); const getUniforms = () => { const preparedUniforms: any = {}; for (const uniformName in uniforms) { const uniform: any = uniforms[uniformName]; switch (uniform.type) { case "uniform1f": preparedUniforms[uniformName] = { value: uniform.value, type: "1f" }; break; case "uniform3f": preparedUniforms[uniformName] = { value: new THREE.Vector3().fromArray(uniform.value), type: "3f", }; break; case "uniform1fv": preparedUniforms[uniformName] = { value: uniform.value, type: "1fv" }; break; case "uniform3fv": preparedUniforms[uniformName] = { value: uniform.value.map((v: number[]) => new THREE.Vector3().fromArray(v) ), type: "3fv", }; break; case "uniform2f": preparedUniforms[uniformName] = { value: new THREE.Vector2().fromArray(uniform.value), type: "2f", }; break; default: console.error(\`Invalid uniform type for '\${uniformName}'.\`); break; } } preparedUniforms["u_time"] = { value: 0, type: "1f" }; preparedUniforms["u_resolution"] = { value: new THREE.Vector2(size.width * 2, size.height * 2), }; // Initialize u_resolution return preparedUniforms; }; // Shader material const material = useMemo(() => { const materialObject = new THREE.ShaderMaterial({ vertexShader: \` precision mediump float; in vec2 coordinates; uniform vec2 u_resolution; out vec2 fragCoord; void main(){ float x = position.x; float y = position.y; gl_Position = vec4(x, y, 0.0, 1.0); fragCoord = (position.xy + vec2(1.0)) * 0.5 * u_resolution; fragCoord.y = u_resolution.y - fragCoord.y; } \`, fragmentShader: source, uniforms: getUniforms(), glslVersion: THREE.GLSL3, blending: THREE.CustomBlending, blendSrc: THREE.SrcAlphaFactor, blendDst: THREE.OneFactor, }); return materialObject; }, [size.width, size.height, source]); return ( ); }; const Shader: React.FC = ({ source, uniforms, maxFps = 60 }) => { return (

); }; interface ShaderProps { source: string; uniforms: { [key: string]: { value: number[] | number[][] | number; type: string; }; }; maxFps?: number; } `,__src__:"src/registry/default/ui/canvas-reveal-effect.tsx",__style__:"default",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:"#3CEC85"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"@/utils/cn"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"Canvas"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"useFrame"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"useThree"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"@react-three/fiber"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"useMemo"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"THREE"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"three"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"CanvasRevealEffect"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"animationSpeed"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.4"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"opacities"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.3"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.3"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.3"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.5"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.5"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.5"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.8"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.8"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.8"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"255"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"255"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"containerClassName"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"dotSize"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"showGradient"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"/**"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:" * 0.1 - slower"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:" * 1.0 - faster"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:" */"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"animationSpeed"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacities"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[];"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[][];"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"containerClassName"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"dotSize"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"showGradient"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"h-full relative bg-white w-full"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"containerClassName"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"h-full w-full"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"DotMatrix"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"??"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"255"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"255"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]]}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"dotSize"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"dotSize"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"??"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"opacities"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"opacities"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"??"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.3"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.3"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.3"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.5"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.5"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.5"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.8"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.8"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.8"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"shader"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:"`"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" float animation_speed_factor = "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"animationSpeed"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"toFixed"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" float intro_offset = distance(u_resolution / 2.0 / u_total_size, st2) * 0.01 + (random(st2) * 0.15);"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" opacity *= step(intro_offset, u_time * animation_speed_factor);"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" opacity *= clamp((1.0 - step(intro_offset + 0.1, u_time * animation_speed_factor)) * 1.25, 1.0, 1.25);"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" `"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"center"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={["}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"x"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"y"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"showGradient"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute inset-0 bg-gradient-to-t from-gray-950 to-[84%]"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"DotMatrixProps"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[][];"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacities"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[];"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"totalSize"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"dotSize"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"shader"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"center"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"x"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"y"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")[];"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"DotMatrix"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"FC"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"DotMatrixProps"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"opacities"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.04"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.04"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.04"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.04"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.04"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.08"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.08"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.08"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.08"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.14"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"totalSize"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"4"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"dotSize"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"shader"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"center"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"x"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"y"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"uniforms"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"useMemo"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colorsArray"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"];"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:"length "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colorsArray"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"];"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"else"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:"length "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colorsArray"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"];"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"u_colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"colorsArray"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#F38CEC"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"/"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"255"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"/"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"255"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"/"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"255"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"uniform3fv"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"u_opacities"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"opacities"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"uniform1fv"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"u_total_size"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"totalSize"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"uniform1f"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"u_dot_size"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"dotSize"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"uniform1f"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"opacities"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"totalSize"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"dotSize"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]);"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Shader"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"source"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:"`"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" precision mediump float;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" in vec2 fragCoord;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" uniform float u_time;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" uniform float u_opacities[10];"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" uniform vec3 u_colors[6];"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" uniform float u_total_size;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" uniform float u_dot_size;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" uniform vec2 u_resolution;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" out vec4 fragColor;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" float PHI = 1.61803398874989484820459;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" float random(vec2 xy) {"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" return fract(tan(distance(xy * PHI, xy) * 0.5) * xy.x);"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" float map(float value, float min1, float max1, float min2, float max2) {"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" return min2 + (value - min1) * (max2 - min2) / (max1 - min1);"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" void main() {"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" vec2 st = fragCoord.xy;"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"center"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"includes"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"x"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"st.x -= abs(floor((mod(u_resolution.x, u_total_size) - u_dot_size) * 0.5));"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'""'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"center"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"includes"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"y"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"st.y -= abs(floor((mod(u_resolution.y, u_total_size) - u_dot_size) * 0.5));"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'""'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" float opacity = step(0.0, st.x);"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" opacity *= step(0.0, st.y);"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" vec2 st2 = vec2(int(st.x / u_total_size), int(st.y / u_total_size));"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" float frequency = 5.0;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" float show_offset = random(st2);"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" float rand = random(st2 * floor((u_time / frequency) + show_offset + frequency) + 1.0);"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" opacity *= u_opacities[int(rand * 10.0)];"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" opacity *= 1.0 - step(u_dot_size / u_total_size, fract(st.x / u_total_size));"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" opacity *= 1.0 - step(u_dot_size / u_total_size, fract(st.y / u_total_size));"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" vec3 color = u_colors[int(show_offset * 6.0)];"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"shader"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" fragColor = vec4(color, opacity);"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" fragColor.rgb *= fragColor.a;"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" }`"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"uniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"uniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"maxFps"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"60"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Uniforms"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#F38CEC"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[]"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[][]"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"ShaderMaterial"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"source"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"uniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"maxFps"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"60"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"source"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"hovered"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"maxFps"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"uniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Uniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"size"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"useThree"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"THREE"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Mesh"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:">();"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"lastFrameTime"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"useFrame"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"(({"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F38CEC"},children:"clock"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"timestamp"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"clock"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"getElapsedTime"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"timestamp"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"lastFrameTime"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"/"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"maxFps"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"lastFrameTime"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"timestamp"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"material"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"any"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"material"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"timeLocation"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"material"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"uniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"u_time"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"timeLocation"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"timestamp"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"});"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"getUniforms"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"preparedUniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"any"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{};"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"for"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"uniformName"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"in"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"uniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"uniform"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"any"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"uniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"uniformName"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"];"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"switch"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"uniform"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"case"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"uniform1f"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"preparedUniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"uniformName"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"uniform"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"1f"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"break"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"case"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"uniform3f"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"preparedUniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"uniformName"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"THREE"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"Vector3"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"fromArray"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"uniform"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"3f"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"break"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"case"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"uniform1fv"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"preparedUniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"uniformName"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"uniform"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"1fv"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"break"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"case"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"uniform3fv"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"preparedUniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"uniformName"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"uniform"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#F38CEC"},children:"v"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[])"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"THREE"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"Vector3"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"fromArray"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"v"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"3fv"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"break"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"case"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"uniform2f"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"preparedUniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"uniformName"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"THREE"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"Vector2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"fromArray"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"uniform"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"2f"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"break"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"console"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"error"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:"`Invalid uniform type for '"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"uniformName"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:"'.`"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"break"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"preparedUniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"u_time"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"1f"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"preparedUniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"u_resolution"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"THREE"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"Vector2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"size"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"size"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"// Initialize u_resolution"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"preparedUniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"// Shader material"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"material"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"useMemo"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"materialObject"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"THREE"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"ShaderMaterial"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"vertexShader"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:"`"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" precision mediump float;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" in vec2 coordinates;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" uniform vec2 u_resolution;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" out vec2 fragCoord;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" void main(){"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" float x = position.x;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" float y = position.y;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" gl_Position = vec4(x, y, 0.0, 1.0);"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" fragCoord = (position.xy + vec2(1.0)) * 0.5 * u_resolution;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" fragCoord.y = u_resolution.y - fragCoord.y;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" }"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:" `"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"fragmentShader"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"source"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"uniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"getUniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"(),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"glslVersion"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"THREE"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"GLSL3"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"blending"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"THREE"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"CustomBlending"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"blendSrc"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"THREE"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"SrcAlphaFactor"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"blendDst"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"THREE"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"OneFactor"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"});"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"materialObject"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"size"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"size"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"source"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]);"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"mesh"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"any"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"planeGeometry"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"args"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"primitive"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"object"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"material"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"attach"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"material"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"Shader"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"FC"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"ShaderProps"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F38CEC"},children:"source"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F38CEC"},children:"uniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F38CEC"},children:"maxFps"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"60"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Canvas"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute inset-0 h-full w-full"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"ShaderMaterial"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"source"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"source"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"uniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"uniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"maxFps"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"maxFps"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"ShaderProps"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"source"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"uniforms"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#F38CEC"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[]"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[][]"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"maxFps"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})})]})})})})]}),` `,(0,e.jsxs)(l.h2,{id:"section",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#section",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Section"]}),` `,(0,e.jsx)(s,{name:"canvas-reveal-effect-demo-3",className:"[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]",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 from "react"; import { AnimatePresence, motion } from "framer-motion"; import { CanvasRevealEffect } from "@/components/ui/canvas-reveal-effect"; export function CanvasRevealEffectDemo3() { const [hovered, setHovered] = React.useState(false); return (

setHovered(true)} onMouseLeave={() => setHovered(false)} className="h-[40rem] flex flex-col lg:flex-row overflow-hidden items-center justify-center bg-black w-full gap-4 mx-auto px-8 relative" >

With insomnia, nothing's real. Everything is far away. Everything is a copy, of a copy, of a copy

{hovered && ( )} {/* Radial gradient for the cute fade */}

); } `,__src__:"src/registry/default/example/canvas-reveal-effect-demo-3.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:"#3CEC85"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"AnimatePresence"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"motion"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"framer-motion"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"CanvasRevealEffect"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"@/components/ui/canvas-reveal-effect"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" CanvasRevealEffectDemo3"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"hovered"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"setHovered"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"onMouseEnter"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" setHovered"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"onMouseLeave"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" setHovered"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"h-[40rem] flex flex-col lg:flex-row overflow-hidden items-center justify-center bg-black w-full gap-4 mx-auto px-8 relative"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"md:text-2xl text-2xl font-medium text-center text-white relative z-20 max-w-2xl mx-auto"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" With insomnia, nothing"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"&"}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"apos"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:"s real. Everything is far away. Everything"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" is a copy, of a copy, of a copy"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"AnimatePresence"}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"hovered"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"motion.div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"initial"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"animate"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"exit"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"h-full w-full absolute inset-0"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"CanvasRevealEffect"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"animationSpeed"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"5"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"containerClassName"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"bg-transparent"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={["})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"59"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"130"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"246"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"139"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"92"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"246"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"opacities"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.4"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.4"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.4"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.4"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"dotSize"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"/* Radial gradient for the cute fade */"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute inset-0 [mask-image:radial-gradient(400px_at_center,white,transparent)] bg-black/50 dark:bg-black/90"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})})]})})})}),` `,(0,e.jsxs)(l.h2,{id:"static",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#static",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Static"]}),` `,(0,e.jsx)(s,{name:"canvas-reveal-effect-demo-2",className:"[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]",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 from "react"; import { AnimatePresence, motion } from "framer-motion"; import { CanvasRevealEffect } from "@/components/ui/canvas-reveal-effect"; export function CanvasRevealEffectDemo2() { return ( <>

I'm static and I know it.

); } const Card = ({ title, icon, children, }: { title: string; icon: React.ReactNode; children?: React.ReactNode; }) => { const [hovered, setHovered] = React.useState(false); return (

{icon}

{title}

); }; const AceternityIcon = () => { return ( ); }; export const Icon = ({ className, ...rest }: any) => { return ( ); }; `,__src__:"src/registry/default/example/canvas-reveal-effect-demo-2.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:"#3CEC85"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"AnimatePresence"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"motion"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"framer-motion"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"CanvasRevealEffect"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"@/components/ui/canvas-reveal-effect"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" CanvasRevealEffectDemo2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"py-20 flex flex-col lg:flex-row items-center justify-center bg-white dark:bg-black w-full gap-4 mx-auto px-8"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"border border-black/[0.2] group/canvas-card flex items-center justify-center dark:border-white/[0.2] max-w-sm w-full mx-auto p-4 relative h-[30rem] relative"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Icon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute h-6 w-6 -top-3 -left-3 dark:text-white text-black"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Icon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute h-6 w-6 -bottom-3 -left-3 dark:text-white text-black"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Icon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute h-6 w-6 -top-3 -right-3 dark:text-white text-black"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Icon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute h-6 w-6 -bottom-3 -right-3 dark:text-white text-black"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"AnimatePresence"}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"h-full w-full absolute inset-0"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"CanvasRevealEffect"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"animationSpeed"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"containerClassName"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"bg-black"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={["})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"236"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"72"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"153"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"232"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"121"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"249"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"dotSize"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"relative z-20"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"text-center group-hover/canvas-card:-translate-y-4 group-hover/canvas-card:opacity-0 transition duration-200 w-full mx-auto flex items-center justify-center"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"AceternityIcon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"h2"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"dark:text-white text-xl opacity-0 group-hover/canvas-card:opacity-100 relative z-10 text-black mt-4 font-bold group-hover/canvas-card:text-white group-hover/canvas-card:-translate-y-2 transition duration-200"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" I"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"&"}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"apos"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:"m static and I know it."})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"Card"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"ReactNode"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"ReactNode"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"hovered"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"setHovered"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"onMouseEnter"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"setHovered"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"onMouseLeave"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"setHovered"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"border border-black/[0.2] group/canvas-card flex items-center justify-center dark:border-white/[0.2] max-w-sm w-full mx-auto p-4 relative h-[30rem] relative"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Icon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute h-6 w-6 -top-3 -left-3 dark:text-white text-black"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Icon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute h-6 w-6 -bottom-3 -left-3 dark:text-white text-black"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Icon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute h-6 w-6 -top-3 -right-3 dark:text-white text-black"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Icon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute h-6 w-6 -bottom-3 -right-3 dark:text-white text-black"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"AnimatePresence"}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"hovered"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"motion.div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"initial"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"animate"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"h-full w-full absolute inset-0"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"relative z-20"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"text-center group-hover/canvas-card:-translate-y-4 group-hover/canvas-card:opacity-0 transition duration-200 w-full mx-auto flex items-center justify-center"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"h2"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"dark:text-white text-xl opacity-0 group-hover/canvas-card:opacity-100 relative z-10 text-black mt-4 font-bold group-hover/canvas-card:text-white group-hover/canvas-card:-translate-y-2 transition duration-200"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"AceternityIcon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"svg"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"66"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"65"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"viewBox"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"0 0 66 65"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"fill"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"none"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"xmlns"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"h-10 w-10 text-black dark:text-white group-hover/canvas-card:text-white "'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"path"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"d"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"M8 8.05571C8 8.05571 54.9009 18.1782 57.8687 30.062C60.8365 41.9458 9.05432 57.4696 9.05432 57.4696"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"stroke"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"currentColor"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeWidth"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"15"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeMiterlimit"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"3.86874"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeLinecap"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"round"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"mixBlendMode"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"darken"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"Icon"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F38CEC"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#F38CEC"},children:"rest"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"any"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"svg"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"xmlns"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"fill"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"none"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"viewBox"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"0 0 24 24"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeWidth"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"1.5"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"stroke"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"currentColor"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{..."}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"rest"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeLinecap"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"round"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeLinejoin"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"round"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"d"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"M12 6v12m6-6H6"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})})]})})})}),` `,(0,e.jsxs)(l.h2,{id:"props",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,e.jsxs)(l.table,{children:[(0,e.jsx)(l.thead,{children:(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.th,{children:"Component"}),(0,e.jsx)(l.th,{children:"Prop Name"}),(0,e.jsx)(l.th,{children:"Type"}),(0,e.jsx)(l.th,{children:"Default Value"}),(0,e.jsx)(l.th,{children:"Description"})]})}),(0,e.jsxs)(l.tbody,{children:[(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"CanvasRevealEffect"}),(0,e.jsx)(l.td,{children:"animationSpeed"}),(0,e.jsx)(l.td,{children:"number"}),(0,e.jsx)(l.td,{children:"0.4"}),(0,e.jsx)(l.td,{children:"Animation speed, where 0.1 is slower and 1.0 is faster."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"CanvasRevealEffect"}),(0,e.jsx)(l.td,{children:"opacities"}),(0,e.jsx)(l.td,{children:"number[]"}),(0,e.jsx)(l.td,{children:"[0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1]"}),(0,e.jsx)(l.td,{children:"Array of opacities for the effect."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"CanvasRevealEffect"}),(0,e.jsx)(l.td,{children:"colors"}),(0,e.jsx)(l.td,{children:"number[][]"}),(0,e.jsx)(l.td,{children:"[[0, 255, 255]]"}),(0,e.jsx)(l.td,{children:"Array of RGB color arrays to use in the effect."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"CanvasRevealEffect"}),(0,e.jsx)(l.td,{children:"containerClassName"}),(0,e.jsx)(l.td,{children:"string"}),(0,e.jsx)(l.td,{}),(0,e.jsx)(l.td,{children:"Additional class name(s) for the container div."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"CanvasRevealEffect"}),(0,e.jsx)(l.td,{children:"dotSize"}),(0,e.jsx)(l.td,{children:"number"}),(0,e.jsx)(l.td,{}),(0,e.jsx)(l.td,{children:"Size of the dots in the effect."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"DotMatrix"}),(0,e.jsx)(l.td,{children:"colors"}),(0,e.jsx)(l.td,{children:"number[][]"}),(0,e.jsx)(l.td,{children:"[[0, 0, 0]]"}),(0,e.jsx)(l.td,{children:"Array of RGB color arrays for the dots. Default is black."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"DotMatrix"}),(0,e.jsx)(l.td,{children:"opacities"}),(0,e.jsx)(l.td,{children:"number[]"}),(0,e.jsx)(l.td,{children:"[0.04, 0.04, 0.04, 0.04, 0.04, 0.08, 0.08, 0.08, 0.08, 0.14]"}),(0,e.jsx)(l.td,{children:"Array of opacities for the dots."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"DotMatrix"}),(0,e.jsx)(l.td,{children:"totalSize"}),(0,e.jsx)(l.td,{children:"number"}),(0,e.jsx)(l.td,{children:"4"}),(0,e.jsx)(l.td,{children:"Total size of the effect area."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"DotMatrix"}),(0,e.jsx)(l.td,{children:"dotSize"}),(0,e.jsx)(l.td,{children:"number"}),(0,e.jsx)(l.td,{children:"2"}),(0,e.jsx)(l.td,{children:"Size of the individual dots."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"DotMatrix"}),(0,e.jsx)(l.td,{children:"shader"}),(0,e.jsx)(l.td,{children:"string"}),(0,e.jsx)(l.td,{}),(0,e.jsx)(l.td,{children:"Custom shader code to apply to the dots."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"DotMatrix"}),(0,e.jsx)(l.td,{children:"center"}),(0,e.jsx)(l.td,{children:'("x" | "y")[]'}),(0,e.jsx)(l.td,{children:'["x", "y"]'}),(0,e.jsx)(l.td,{children:"Array indicating whether to center the effect on the x and/or y axis."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"ShaderMaterial"}),(0,e.jsx)(l.td,{children:"source"}),(0,e.jsx)(l.td,{children:"string"}),(0,e.jsx)(l.td,{}),(0,e.jsx)(l.td,{children:"GLSL source code for the shader."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"ShaderMaterial"}),(0,e.jsx)(l.td,{children:"uniforms"}),(0,e.jsx)(l.td,{children:"Uniforms"}),(0,e.jsx)(l.td,{}),(0,e.jsx)(l.td,{children:"Uniform variables for the shader."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"ShaderMaterial"}),(0,e.jsx)(l.td,{children:"maxFps"}),(0,e.jsx)(l.td,{children:"number"}),(0,e.jsx)(l.td,{children:"60"}),(0,e.jsx)(l.td,{children:"Maximum frames per second for the shader animation."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"Shader"}),(0,e.jsx)(l.td,{children:"source"}),(0,e.jsx)(l.td,{children:"string"}),(0,e.jsx)(l.td,{}),(0,e.jsx)(l.td,{children:"GLSL source code for the shader."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"Shader"}),(0,e.jsx)(l.td,{children:"uniforms"}),(0,e.jsx)(l.td,{children:"Uniforms"}),(0,e.jsx)(l.td,{}),(0,e.jsx)(l.td,{children:"Uniform variables for the shader."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"Shader"}),(0,e.jsx)(l.td,{children:"maxFps"}),(0,e.jsx)(l.td,{children:"number"}),(0,e.jsx)(l.td,{children:"60"}),(0,e.jsx)(l.td,{children:"Maximum frames per second for the shader animation."})]})]})]}),` `,(0,e.jsxs)(l.p,{children:["The inspiration for this effect is directly taken from ",(0,e.jsx)(l.a,{href:"https://clerk.dev",rel:"nofollow",target:"_blank",children:"Clerk's website"}),"."]})]})}function f(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(p,n)})):p(n)}var v=f;function a(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return N(x);})(); ;return Component;

Aceternity UI