} title="Do things the right way" description="Running out of copy so I'll write anything." /> } title="The best AI code editor ever." description="Yes, it's true. I'm not even kidding. Ask my mom if you don't believe me." /> } title="You should buy Aceternity UI Pro" description="It's the best money you'll ever spend" /> } title="This card is also built by Cursor" description="I'm not even kidding. Ask my mom if you don't believe me." /> } title="Coming soon on Aceternity UI" description="I'm writing the code as I record this, no shit." />

); } interface GridItemProps { area: string; icon: React.ReactNode; title: string; description: React.ReactNode; } const GridItem = ({ area, icon, title, description }: GridItemProps) => { return (

{icon}

{title}

{description}

); }; `,__rawStringJsx__:`"use client";; import { Box, Lock, Search, Settings, Sparkles } from "lucide-react"; import { GlowingEffect } from "@/components/ui/glowing-effect"; export function GlowingEffectDemo() { return ( (

) ); } const GridItem = ({ area, icon, title, description }) => { return ( (

{icon}

{title}

{description}

) ); }; `,__src__:"/src/registry/default/example/glowing-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:"#98C379"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"Box"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"Lock"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"Search"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"Settings"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"Sparkles"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"lucide-react"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"GlowingEffect"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"@/components/ui/glowing-effect"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"GlowingEffectDemo"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"ul"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"grid grid-cols-1 grid-rows-none gap-4 md:grid-cols-12 md:grid-rows-3 lg:gap-4 xl:max-h-[34rem] xl:grid-rows-2"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GridItem"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"area"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"md:[grid-area:1/1/2/7] xl:[grid-area:1/1/2/5]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Box"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"h-4 w-4 text-black dark:text-neutral-400"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Do things the right way"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:`"Running out of copy so I'll write anything."`})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GridItem"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"area"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"md:[grid-area:1/7/2/13] xl:[grid-area:2/1/3/5]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Settings"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"h-4 w-4 text-black dark:text-neutral-400"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"The best AI code editor ever."'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:`"Yes, it's true. I'm not even kidding. Ask my mom if you don't believe me."`})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GridItem"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"area"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"md:[grid-area:2/1/3/7] xl:[grid-area:1/5/3/8]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Lock"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"h-4 w-4 text-black dark:text-neutral-400"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"You should buy Aceternity UI Pro"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:`"It's the best money you'll ever spend"`})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GridItem"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"area"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"md:[grid-area:2/7/3/13] xl:[grid-area:1/8/2/13]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Sparkles"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"h-4 w-4 text-black dark:text-neutral-400"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"This card is also built by Cursor"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:`"I'm not even kidding. Ask my mom if you don't believe me."`})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GridItem"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"area"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"md:[grid-area:3/1/4/13] xl:[grid-area:2/8/3/13]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Search"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"h-4 w-4 text-black dark:text-neutral-400"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Coming soon on Aceternity UI"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:`"I'm writing the code as I record this, no shit."`})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GridItemProps"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"area"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ReactNode"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ReactNode"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"GridItem"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({ "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"area"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GridItemProps"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"li"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`min-h-[14rem] list-none "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"area"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"relative h-full rounded-2.5xl border p-2 md:rounded-3xl md:p-3"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GlowingEffect"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"spread"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"40"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"glow"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"disabled"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"proximity"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"64"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"inactiveZone"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.01"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"relative flex h-full flex-col justify-between gap-6 overflow-hidden rounded-xl border-0.75 p-6 dark:shadow-[0px_0px_27px_0px_#2D2D2D] md:p-6"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"relative flex flex-1 flex-col justify-between gap-3"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"w-fit rounded-lg border border-gray-600 p-2 "'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"space-y-3"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"h3"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"pt-0.5 text-xl/[1.375rem] font-semibold font-sans -tracking-4 md:text-2xl/[1.875rem] text-balance text-black dark:text-white"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"h2"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"[&_b]:md:font-semibold [&_strong]:md:font-semibold font-sans text-sm/[1.125rem] '})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#98C379"},children:' md:text-base/[1.375rem] text-black dark:text-neutral-400"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},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)(o,{defaultValue:"manual",children:[(0,e.jsxs)(s,{children:[(0,e.jsx)(t,{value:"cli",children:"CLI"}),(0,e.jsx)(t,{value:"manual",children:"Manual"})]}),(0,e.jsx)(d,{value:"cli",children:(0,e.jsxs)(B,{children:[(0,e.jsx)(a,{children:"Run the following command"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add https://ui.aceternity.com/registry/glowing-effect.json `,__npmCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/glowing-effect.json `,__yarnCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/glowing-effect.json `,__pnpmCommand__:`pnpm dlx shadcn@latest add https://ui.aceternity.com/registry/glowing-effect.json `,__bunCommand__:`bunx --bun shadcn@latest add https://ui.aceternity.com/registry/glowing-effect.json `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npx "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"shadcn@latest"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"add"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"https://ui.aceternity.com/registry/glowing-effect.json"})]})})})})]})}),(0,e.jsx)(d,{value:"manual",children:(0,e.jsxs)(B,{children:[(0,e.jsx)(a,{children:"Install 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 motion clsx tailwind-merge `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npm "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"i"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"motion"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"tailwind-merge"})]})})})}),(0,e.jsx)(a,{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:"lib/utils.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)); } `,__rawStringJsx__:`import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { 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:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"ClassValue"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"clsx"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"twMerge"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwind-merge"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(..."}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"inputs"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ClassValue"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"[]) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"twMerge"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"inputs"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})]}),(0,e.jsx)(a,{children:"Copy the source code"}),(0,e.jsx)(l.p,{children:(0,e.jsx)(l.code,{children:"components/ui/glowing-effect.tsx"})}),(0,e.jsx)(h,{name:"glowing-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 { memo, useCallback, useEffect, useRef } from "react"; import { cn } from "@/lib/utils"; import { animate } from "motion/react"; interface GlowingEffectProps { blur?: number; inactiveZone?: number; proximity?: number; spread?: number; variant?: "default" | "white"; glow?: boolean; className?: string; disabled?: boolean; movementDuration?: number; borderWidth?: number; } const GlowingEffect = memo( ({ blur = 0, inactiveZone = 0.7, proximity = 0, spread = 20, variant = "default", glow = false, className, movementDuration = 2, borderWidth = 1, disabled = true, }: GlowingEffectProps) => { const containerRef = useRef(null); const lastPosition = useRef({ x: 0, y: 0 }); const animationFrameRef = useRef(0); const handleMove = useCallback( (e?: MouseEvent | { x: number; y: number }) => { if (!containerRef.current) return; if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); } animationFrameRef.current = requestAnimationFrame(() => { const element = containerRef.current; if (!element) return; const { left, top, width, height } = element.getBoundingClientRect(); const mouseX = e?.x ?? lastPosition.current.x; const mouseY = e?.y ?? lastPosition.current.y; if (e) { lastPosition.current = { x: mouseX, y: mouseY }; } const center = [left + width * 0.5, top + height * 0.5]; const distanceFromCenter = Math.hypot( mouseX - center[0], mouseY - center[1] ); const inactiveRadius = 0.5 * Math.min(width, height) * inactiveZone; if (distanceFromCenter < inactiveRadius) { element.style.setProperty("--active", "0"); return; } const isActive = mouseX > left - proximity && mouseX < left + width + proximity && mouseY > top - proximity && mouseY < top + height + proximity; element.style.setProperty("--active", isActive ? "1" : "0"); if (!isActive) return; const currentAngle = parseFloat(element.style.getPropertyValue("--start")) || 0; let targetAngle = (180 * Math.atan2(mouseY - center[1], mouseX - center[0])) / Math.PI + 90; const angleDiff = ((targetAngle - currentAngle + 180) % 360) - 180; const newAngle = currentAngle + angleDiff; animate(currentAngle, newAngle, { duration: movementDuration, ease: [0.16, 1, 0.3, 1], onUpdate: (value) => { element.style.setProperty("--start", String(value)); }, }); }); }, [inactiveZone, proximity, movementDuration] ); useEffect(() => { if (disabled) return; const handleScroll = () => handleMove(); const handlePointerMove = (e: PointerEvent) => handleMove(e); window.addEventListener("scroll", handleScroll, { passive: true }); document.body.addEventListener("pointermove", handlePointerMove, { passive: true, }); return () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); } window.removeEventListener("scroll", handleScroll); document.body.removeEventListener("pointermove", handlePointerMove); }; }, [handleMove, disabled]); return ( <>

0 && "blur-[var(--blur)] ", className, disabled && "!hidden" )} >

); } ); GlowingEffect.displayName = "GlowingEffect"; export { GlowingEffect }; `,__rawStringJsx__:`"use client";; import { memo, useCallback, useEffect, useRef } from "react"; import { cn } from "@/lib/utils"; import { animate } from "motion/react"; const GlowingEffect = memo(({ blur = 0, inactiveZone = 0.7, proximity = 0, spread = 20, variant = "default", glow = false, className, movementDuration = 2, borderWidth = 1, disabled = true }) => { const containerRef = useRef(null); const lastPosition = useRef({ x: 0, y: 0 }); const animationFrameRef = useRef(0); const handleMove = useCallback((e) => { if (!containerRef.current) return; if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); } animationFrameRef.current = requestAnimationFrame(() => { const element = containerRef.current; if (!element) return; const { left, top, width, height } = element.getBoundingClientRect(); const mouseX = e?.x ?? lastPosition.current.x; const mouseY = e?.y ?? lastPosition.current.y; if (e) { lastPosition.current = { x: mouseX, y: mouseY }; } const center = [left + width * 0.5, top + height * 0.5]; const distanceFromCenter = Math.hypot(mouseX - center[0], mouseY - center[1]); const inactiveRadius = 0.5 * Math.min(width, height) * inactiveZone; if (distanceFromCenter < inactiveRadius) { element.style.setProperty("--active", "0"); return; } const isActive = mouseX > left - proximity && mouseX < left + width + proximity && mouseY > top - proximity && mouseY < top + height + proximity; element.style.setProperty("--active", isActive ? "1" : "0"); if (!isActive) return; const currentAngle = parseFloat(element.style.getPropertyValue("--start")) || 0; let targetAngle = (180 * Math.atan2(mouseY - center[1], mouseX - center[0])) / Math.PI + 90; const angleDiff = ((targetAngle - currentAngle + 180) % 360) - 180; const newAngle = currentAngle + angleDiff; animate(currentAngle, newAngle, { duration: movementDuration, ease: [0.16, 1, 0.3, 1], onUpdate: (value) => { element.style.setProperty("--start", String(value)); }, }); }); }, [inactiveZone, proximity, movementDuration]); useEffect(() => { if (disabled) return; const handleScroll = () => handleMove(); const handlePointerMove = (e) => handleMove(e); window.addEventListener("scroll", handleScroll, { passive: true }); document.body.addEventListener("pointermove", handlePointerMove, { passive: true, }); return () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); } window.removeEventListener("scroll", handleScroll); document.body.removeEventListener("pointermove", handlePointerMove); }; }, [handleMove, disabled]); return (<>

0 && "blur-[var(--blur)] ", className, disabled && "!hidden" )}>

); }); GlowingEffect.displayName = "GlowingEffect"; export { GlowingEffect }; `,__src__:"/src/registry/default/ui/glowing-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:"#98C379"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"memo"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"useCallback"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"@/lib/utils"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"animate"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"motion/react"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GlowingEffectProps"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"blur"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"inactiveZone"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"proximity"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"spread"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"default"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" | "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"white"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"glow"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"disabled"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"movementDuration"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"borderWidth"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GlowingEffect"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"memo"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"blur"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"inactiveZone"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.7"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"proximity"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"spread"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"20"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"default"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"glow"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"movementDuration"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"borderWidth"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"disabled"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"GlowingEffectProps"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"containerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLDivElement"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"lastPosition"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" });"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"animationFrameRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"handleMove"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useCallback"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"MouseEvent"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" | { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"; "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"containerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"animationFrameRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"cancelAnimationFrame"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"animationFrameRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"animationFrameRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"requestAnimationFrame"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"element"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"containerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"element"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"left"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"top"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"element"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"getBoundingClientRect"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"mouseX"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"?."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"??"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"lastPosition"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"mouseY"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"?."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"??"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"lastPosition"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"lastPosition"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"x"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"mouseX"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"mouseY"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"center"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"left"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.5"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"top"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.5"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"];"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"distanceFromCenter"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Math"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"hypot"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"mouseX"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"center"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"mouseY"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"center"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"inactiveRadius"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.5"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Math"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"min"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"inactiveZone"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"distanceFromCenter"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"inactiveRadius"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"element"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"setProperty"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"--active"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"0"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"isActive"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"mouseX"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"left"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"proximity"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"mouseX"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"left"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"proximity"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"mouseY"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"top"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"proximity"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"mouseY"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"top"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"proximity"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"element"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"setProperty"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"--active"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"isActive"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"1"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"0"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"isActive"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"currentAngle"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"parseFloat"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"element"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"getPropertyValue"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"--start"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:")) "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"targetAngle"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"180"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Math"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"atan2"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"mouseY"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"center"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"], "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"mouseX"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"center"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"])) "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"/"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Math"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"PI"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"90"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"angleDiff"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" (("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"targetAngle"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"currentAngle"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"180"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"%"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"360"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"180"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"newAngle"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"currentAngle"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"angleDiff"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"animate"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"currentAngle"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"newAngle"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"movementDuration"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"ease"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ["}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.16"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.3"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"onUpdate"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ("}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"element"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"setProperty"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"--start"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"String"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"inactiveZone"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"proximity"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"movementDuration"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"disabled"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"handleScroll"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"handleMove"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"handlePointerMove"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"PointerEvent"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"handleMove"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"window"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"scroll"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"handleScroll"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"passive"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" });"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"body"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"pointermove"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"handlePointerMove"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"passive"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"animationFrameRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"cancelAnimationFrame"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"animationFrameRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"window"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"scroll"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"handleScroll"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"document"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"body"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"pointermove"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"handlePointerMove"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, ["}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"handleMove"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"disabled"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]);"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <>"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"pointer-events-none absolute -inset-px hidden rounded-[inherit] border opacity-0 transition-opacity"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"glow"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"opacity-100"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"white"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"border-white"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"disabled"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"!block"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"containerRef"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"--blur"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"blur"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"px`"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"--spread"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"spread"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"--start"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"0"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"--active"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"0"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"--glowingeffect-border-width"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"borderWidth"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"px`"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"--repeating-conic-gradient-times"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"5"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"--gradient"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"white"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`repeating-conic-gradient("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" from 236.84deg at 50% 50%,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" var(--black),"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" var(--black) calc(25% / var(--repeating-conic-gradient-times))"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" )`"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`radial-gradient(circle, #dd7bbb 10%, #dd7bbb00 20%),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" radial-gradient(circle at 40% 40%, #d79f1e 5%, #d79f1e00 15%),"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" radial-gradient(circle at 60% 60%, #5a922c 10%, #5a922c00 20%), "})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" radial-gradient(circle at 40% 60%, #4c7894 10%, #4c789400 20%),"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" repeating-conic-gradient("})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" from 236.84deg at 50% 50%,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" #dd7bbb 0%,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" #d79f1e calc(25% / var(--repeating-conic-gradient-times)),"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" #5a922c calc(50% / var(--repeating-conic-gradient-times)), "})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" #4c7894 calc(75% / var(--repeating-conic-gradient-times)),"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" #dd7bbb calc(100% / var(--repeating-conic-gradient-times))"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#98C379"},children:" )`"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"CSSProperties"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"pointer-events-none absolute inset-0 rounded-[inherit] opacity-100 transition-opacity"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"glow"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"opacity-100"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"blur"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"blur-[var(--blur)] "'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"disabled"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"!hidden"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"glow"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"rounded-[inherit]"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:`'after:content-[""] after:rounded-[inherit] after:absolute after:inset-[calc(-1*var(--glowingeffect-border-width))]'`}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"after:[border:var(--glowingeffect-border-width)_solid_transparent]"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"after:[background:var(--gradient)] after:[background-attachment:fixed]"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"after:opacity-[var(--active)] after:transition-opacity after:duration-300"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"after:[mask-clip:padding-box,border-box]"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"after:[mask-composite:intersect]"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"after:[mask-image:linear-gradient(#0000,#0000),conic-gradient(from_calc((var(--start)-var(--spread))*1deg),#00000000_0deg,#fff,#00000000_calc(var(--spread)*2deg))]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GlowingEffect"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"displayName"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"GlowingEffect"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"GlowingEffect"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})]})]})})})})]})})]}),` `,(0,e.jsxs)(l.h4,{id:"example",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#example",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Example"]}),` `,(0,e.jsx)(l.p,{children:"Here is another example usage of the same component with different props."}),` `,(0,e.jsx)(r,{name:"glowing-effect-demo-2",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 { Box, Lock, Search, Settings, Sparkles } from "lucide-react"; import { GlowingEffect } from "@/components/ui/glowing-effect"; export function GlowingEffectDemoSecond() { return (

); } interface GridItemProps { area: string; icon: React.ReactNode; title: string; description: React.ReactNode; } const GridItem = ({ area, icon, title, description }: GridItemProps) => { return (

{icon}

{title}

{description}

) ); } const GridItem = ({ area, icon, title, description }) => { return ( (

{icon}

{title}

{description}

) ); }; `,__src__:"/src/registry/default/example/glowing-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:"#98C379"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"Box"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"Lock"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"Search"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"Settings"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"Sparkles"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"lucide-react"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"GlowingEffect"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"@/components/ui/glowing-effect"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"GlowingEffectDemoSecond"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"ul"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"grid grid-cols-1 grid-rows-none gap-4 md:grid-cols-12 md:grid-rows-3 lg:gap-4 xl:max-h-[34rem] xl:grid-rows-2"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GridItem"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"area"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"md:[grid-area:1/1/2/7] xl:[grid-area:1/1/2/5]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Box"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"h-4 w-4 text-black dark:text-neutral-400"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Do things the right way"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:`"Running out of copy so I'll write anything."`})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GridItem"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"area"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"md:[grid-area:1/7/2/13] xl:[grid-area:2/1/3/5]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Settings"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"h-4 w-4 text-black dark:text-neutral-400"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"The best AI code editor ever."'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:`"Yes, it's true. I'm not even kidding. Ask my mom if you don't believe me."`})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GridItem"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"area"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"md:[grid-area:2/1/3/7] xl:[grid-area:1/5/3/8]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Lock"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"h-4 w-4 text-black dark:text-neutral-400"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"You should buy Aceternity UI Pro"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:`"It's the best money you'll ever spend"`})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GridItem"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"area"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"md:[grid-area:2/7/3/13] xl:[grid-area:1/8/2/13]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Sparkles"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"h-4 w-4 text-black dark:text-neutral-400"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"This card is also built by Cursor"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:`"I'm not even kidding. Ask my mom if you don't believe me."`})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GridItem"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"area"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"md:[grid-area:3/1/4/13] xl:[grid-area:2/8/3/13]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Search"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"h-4 w-4 text-black dark:text-neutral-400"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Coming soon on Aceternity UI"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:`"I'm writing the code as I record this, no shit."`})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GridItemProps"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"area"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ReactNode"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ReactNode"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"GridItem"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({ "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"area"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GridItemProps"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"li"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`min-h-[14rem] list-none "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"area"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"relative h-full rounded-2.5xl border p-2 md:rounded-3xl md:p-3"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"GlowingEffect"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"blur"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"borderWidth"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"spread"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"80"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"glow"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"disabled"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"proximity"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"64"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"inactiveZone"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.01"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"relative flex h-full flex-col justify-between gap-6 overflow-hidden rounded-xl border-0.75 p-6 dark:shadow-[0px_0px_27px_0px_#2D2D2D] md:p-6"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"relative flex flex-1 flex-col justify-between gap-3"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"w-fit rounded-lg border border-gray-600 p-2 "'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"icon"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"space-y-3"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"h3"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"pt-0.5 text-xl/[1.375rem] font-semibold font-sans -tracking-4 md:text-2xl/[1.875rem] text-balance text-black dark:text-white"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"h2"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"[&_b]:md:font-semibold [&_strong]:md:font-semibold font-sans text-sm/[1.125rem] '})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#98C379"},children:' md:text-base/[1.375rem] text-black dark:text-neutral-400"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},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:"Prop"}),(0,e.jsx)(l.th,{children:"Type"}),(0,e.jsx)(l.th,{children:"Default"}),(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:"blur"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"number"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"0"})}),(0,e.jsx)(l.td,{children:"The amount of blur applied to the glowing effect in pixels"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"inactiveZone"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"number"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"0.7"})}),(0,e.jsx)(l.td,{children:"The radius multiplier for the center zone where the effect is disabled. Value between 0 and 1"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"proximity"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"number"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"0"})}),(0,e.jsx)(l.td,{children:"The distance in pixels beyond the element's bounds where the effect remains active"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"spread"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"number"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"20"})}),(0,e.jsx)(l.td,{children:"The angular spread of the glowing effect in degrees"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"variant"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:'"default" | "white"'})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:'"default"'})}),(0,e.jsx)(l.td,{children:'The color variant of the effect. "default" uses a multi-color gradient, while "white" uses a black and white scheme'})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"glow"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"boolean"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"false"})}),(0,e.jsx)(l.td,{children:"When true, forces the effect to be visible regardless of hover state"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"className"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"string"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"undefined"})}),(0,e.jsx)(l.td,{children:"Additional CSS classes to apply to the effect container"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"disabled"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"boolean"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"true"})}),(0,e.jsx)(l.td,{children:"When true, disables the interactive glowing effect"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"movementDuration"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"number"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"2"})}),(0,e.jsx)(l.td,{children:"The duration of the glow movement animation in seconds"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"borderWidth"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"number"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"1"})}),(0,e.jsx)(l.td,{children:"The width of the glowing border in pixels"})]})]})]}),` `,(0,e.jsxs)(l.p,{children:["This component was inspired by ",(0,e.jsx)(l.a,{href:"https://cursor.sh/enterprise",rel:"nofollow",target:"_blank",children:"Cursor's Enterprise page"}),"."]})]})}function v(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(A,n)})):A(n)}var w=v;function c(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(k);})(); ;return Component;