var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),g=(n,l)=>{for(var s in l)c(n,s,{get:l[s],enumerable:!0})},o=(n,l,s,a)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of y(l))!u.call(n,r)&&r!==s&&c(n,r,{get:()=>l[r],enumerable:!(a=E(l,r))||a.enumerable});return n};var B=(n,l,s)=>(s=n!=null?p(F(n)):{},o(l||!n||!n.__esModule?c(s,"default",{value:n,enumerable:!0}):s,n)),f=n=>o(c({},"__esModule",{value:!0}),n);var t=m((v,i)=>{i.exports=_jsx_runtime});var x={};g(x,{default:()=>h});var e=B(t());function d(n){let l={code:"code",figure:"figure",h2:"h2",img:"img",p:"p",pre:"pre",span:"span",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.p,{children:"If you\u2019re looking to spice up your website\u2019s interactivity and design, a mask cursor is a slick, modern feature that can really grab attention. In this blog, I\u2019ll show you how to build a custom mask cursor using React, Framer Motion, and Tailwind CSS \u2014 from scratch."}),` `,(0,e.jsx)(l.h2,{children:"Step 1: Setup the Boilerplate Layout"}),` `,(0,e.jsx)(l.p,{children:"Let\u2019s begin by creating a full screen layout that includes two overlapping paragraphs. One will be visible by default and other will only be revealed under the mask cursor."}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// src/app/page.tsx"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" MaskCursor "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/mask-cursor1"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" default"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" Home"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"MaskCursor"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// src/components/mask-cursor.tsx"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" MaskCursor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" w-screen h-screen "'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" h-full w-full text-5xl font-semibold leading-12 flex items-center justify-center"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" max-w-2xl"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" A visual designer - with skills that haven't been replaced by A.I. -"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" making good shit only if the paycheck is equally good."})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" h-full w-full text-5xl font-semibold leading-12 flex items-center justify-center"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" max-w-2xl"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" I'm a <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" text-orange-600"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">selectively skilled{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" "'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" product designer with strong focus on producing high quality &"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Impactful digital experiences."})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" default"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" MaskCursor;"})]})]})})}),` `,(0,e.jsx)(l.p,{children:"It will look something like below."}),` `,(0,e.jsx)(l.p,{children:(0,e.jsx)(l.img,{src:"/mask-cursor-effect-step-1.png",alt:"Mask cursor step 1"})}),` `,` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)(l.h2,{children:"Step 2: Add a Mask Image to Create the Reveal Effect"}),` `,(0,e.jsx)(l.p,{children:"To make the magic happen, we\u2019ll use a mask image that follows the cursor and reveals the hidden layer beneath it. Tailwind CSS supports mask-image with utilities, so we can create a circular mask using a custom SVG and apply it to the foreground text."}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"xml","data-theme":"github-dark",children:(0,e.jsxs)(l.code,{"data-language":"xml","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:""})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"svg"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" xmlns"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"http://www.w3.org/2000/svg"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" width"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"400"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" height"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"400"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"circle"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" cx"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"200"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" cy"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"200"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" r"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"200"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"white"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:""})]})]})})}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// src/components/mask-cursor.tsx"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" MaskCursor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" w-screen h-screen "'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" absolute h-full w-full text-5xl font-semibold leading-12 flex items-center justify-center mask-[url(/circle.svg)] mask-no-repeat bg-orange-500 text-black"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" max-w-2xl"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" A visual designer - with skills that haven't been replaced by A.I. -"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" making good shit only if the paycheck is equally good."})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" h-full w-full text-5xl font-semibold leading-12 flex items-center justify-center "'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" max-w-2xl"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" I'm a <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" text-orange-600"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">selectively skilled{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" "'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" product designer with strong focus on producing high quality &"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Impactful digital experiences."})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" default"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" MaskCursor;"})]})]})})}),` `,(0,e.jsxs)(l.p,{children:[`Let see how it looks. `,(0,e.jsx)(l.img,{src:"/mask-cursor-effect-step-2.png",alt:"Mask cursor step 1"})]}),` `,` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)(l.p,{children:"Now that the masked layer is visible, let\u2019s animate it. Using Framer Motion, we\u2019ll track the cursor and update the mask-position so the circular mask follows the mouse \u2014 revealing the hidden text as you move around."}),` `,(0,e.jsx)(l.h2,{children:"Step 4: Add a Mask Image to Create the Reveal Effect"}),` `,(0,e.jsx)(l.p,{children:"To make the mask follow the cursor, we\u2019ll first create a custom hook that tracks the mouse position. Then, we\u2019ll use motion to smoothly animate the mask\u2019s position using those coordinates."}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"ts","data-theme":"github-dark",children:(0,e.jsxs)(l.code,{"data-language":"ts","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// hooks/useMousePosition.ts"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useEffect, useState } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" useMousePosition"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"mousePosition"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setMousePosition"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({ x: "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", y: "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" });"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" handleMouseMove"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" MouseEvent"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setMousePosition"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" x: event.clientX,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" y: event.clientY,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" });"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" };"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" window."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"addEventListener"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mousemove"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", handleMouseMove);"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" window."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"removeEventListener"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mousemove"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", handleMouseMove);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, []);"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" mousePosition;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})})]})})}),` `,(0,e.jsx)(l.p,{children:"Now import and use the hook inside your component. We\u2019ll animate the mask-position using the cursor coordinates"}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"//src/components/mask-cursor.tsx"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { motion } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "framer-motion"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useMousePosition } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/app/hooks/useMousePosition"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" MaskCursor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"x"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"y"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" useMousePosition"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" 120"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"w-screen h-screen relative overflow-hidden"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"/* Top Masked Layer */"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"motion.div"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" animate"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" WebkitMaskPosition: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"x"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" -"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" /"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" 2"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}px ${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"y"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" -"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" /"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" 2"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}px`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" maskPosition: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"x"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" -"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" /"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" 2"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}px ${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"y"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" -"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" /"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" 2"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}px`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" transition"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" type: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"tween"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ease: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"backOut"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"absolute inset-0 bg-orange-500 text-black text-5xl font-semibold leading-12 flex items-center justify-center mask-[url(/circle.svg)] mask-no-repeat"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" style"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" WebkitMaskSize: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"size"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}px`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" maskSize: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"size"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}px`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"max-w-2xl text-center"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" A visual designer \u2013 with skills that haven't been replaced by A.I. \u2013"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" making good shit only if the paycheck is equally good."})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"/* Base Layer */"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"absolute inset-0 text-5xl font-semibold leading-12 flex items-center justify-center"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"max-w-2xl text-center"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" I'm a <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"text-orange-600"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">selectively skilled{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" "'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" product designer with strong focus on producing high quality & impactful digital experiences."})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" default"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" MaskCursor;"})]})]})})}),` `,(0,e.jsx)(l.p,{children:(0,e.jsx)(l.img,{src:"/mask-cursor-effect-step-3.png",alt:"Mask cursor step 1"})}),` `,` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)(l.p,{children:"You can now see the masked text when you hover over the paragraph, but it might not look quite right yet. The masked SVG circle may be too small, and the position might not align perfectly with the cursor. To fix this, we need to adjust the size of the mask and fine-tune its positioning so that the cursor and the circular mask move in sync and create a cleaner reveal effect."}),` `,(0,e.jsx)(l.h2,{children:"Step 5: Fine tune Mask Size and Cursor Alignment for Perfect Reveal"}),` `,(0,e.jsx)(l.p,{children:"We will keep track of whether we hovered over the paragraph and adjust position and size of masked svg for perfect reveal"}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// src/components/mask-cursor.tsx"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React, { useState } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { motion } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "motion/react"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useMousePosition } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/app/hooks/useMousePosition"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" MaskCursor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"isHovered"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setIsHovered"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"x"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"y"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" useMousePosition"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" isHovered "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" 300"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" 40"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" w-screen h-screen "'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"motion.div"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" animate"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" maskPosition: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"x"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" -"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" /"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" 2"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}px ${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"y"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" -"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" /"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" 2"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}px`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" maskSize: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"size"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}px`"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" transition"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" type: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"tween"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ease: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"backOut"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" absolute h-full w-full text-5xl font-semibold leading-12 flex items-center justify-center mask-[url(/circle.svg)] mask-no-repeat bg-orange-500 text-black"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"p"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onMouseOver"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setIsHovered"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onMouseOut"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" setIsHovered"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" max-w-2xl"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" A visual designer - with skills that haven't been replaced by A.I. -"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" making good shit only if the paycheck is equally good."})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" h-full w-full text-5xl font-semibold leading-12 flex items-center justify-center "'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" max-w-2xl"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" I'm a <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" text-orange-600"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">selectively skilled{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" "'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" product designer with strong focus on producing high quality &"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Impactful digital experiences."})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" default"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" MaskCursor;"})]})]})})}),` `,(0,e.jsx)(l.p,{children:"And there you have it! You\u2019ve just built a dynamic mask-cursor reveal effect using Next.js, Tailwind CSS, and Framer Motion."}),` `,(0,e.jsx)(l.p,{children:"If you found this useful or inspiring, feel free to share, comment, or reach out! And stay tuned for more creative UI tricks using React and motion-powered magic."})]})}function h(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(d,{...n})}):d(n)}return f(x);})(); ;return Component;

Blogs