setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} style={{ willChange: 'transform' }} > {isHovered && (

)} {children}

); }; function MouseFollowing() { return (

Mouse Here

); } export MouseFollowing; `,__src__:"registry/default/example/mouse-following.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" React, { useState } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'react'"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"CardWithEffect"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ({ "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"children"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" { "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"children"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"React"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"ReactNode"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" }) "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"mousePosition"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"setMousePosition"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"({ x: "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:", y: "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" });"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"isHovered"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"setIsHovered"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"false"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"handleMouseMove"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"e"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"React"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"MouseEvent"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"HTMLDivElement"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">) "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"rect"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" e.currentTarget."}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"getBoundingClientRect"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"();"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"setMousePosition"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"({ x: e.clientX "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"-"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" rect.left, y: e.clientY "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"-"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" rect.top });"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" };"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"div"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"relative bg-[#000] flex-1 rounded-xl border border-white/30 p-4 overflow-hidden"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"onMouseMove"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"handleMouseMove"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"onMouseEnter"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"() "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"setIsHovered"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"true"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:")"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"onMouseLeave"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"() "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"setIsHovered"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"false"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:")"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"style"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"{ willChange: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'transform'"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"isHovered "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"div"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"pointer-events-none absolute rounded-full"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"style"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"{"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" width: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'300px'"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" height: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'300px'"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" top: mousePosition.y "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"-"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"150"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" left: mousePosition.x "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"-"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"150"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" background: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'#5D2CA8'"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" filter: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'blur(100px)'"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" transform: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'translate(-0%, -0%)'"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" zIndex: "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"10"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#8B949E"},children:"// Ensure the effect is on top"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" willChange: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'transform, top, left'"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" )"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"children"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" );"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"};"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"MouseFollowing"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"CardWithEffect"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-[400px] flex items-center justify-center text-white"'}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Mouse Here"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" );"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" MouseFollowing;"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})})]})})})}),` `,(0,l.jsxs)(e.h2,{id:"usage",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,l.jsx)(c,{defaultValue:"manual",children:(0,l.jsx)(r,{value:"manual",children:(0,l.jsx)(i,{children:(0,l.jsx)(t,{children:"Copy and paste the Mouse Following code into your project."})})})})]})}function x(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(D,n)})):D(n)}var M=x;function o(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(A);})(); ;return Component;