{"id":70114,"date":"2024-07-20T18:33:45","date_gmt":"2024-07-20T15:03:45","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/create-stunning-custom-cursor-animations-with-framer-motion-o44\/"},"modified":"2024-07-20T18:33:45","modified_gmt":"2024-07-20T15:03:45","slug":"create-stunning-custom-cursor-animations-with-framer-motion-o44","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/create-stunning-custom-cursor-animations-with-framer-motion-o44\/","title":{"rendered":"\u0628\u0627 \u062d\u0631\u06a9\u062a \u0641\u0631\u06cc\u0645\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0645\u06a9\u0627\u0646\u200c\u0646\u0645\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u062e\u06cc\u0631\u0647\u200c\u06a9\u0646\u0646\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f"},"content":{"rendered":"<div data-article-id=\"1925238\" id=\"article-body\">\n<p>\u0633\u0644\u0627\u0645 dev.to \u062c\u0627\u0645\u0639\u0647!<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a\u060c \u0645\u06cc \u062e\u0648\u0627\u0647\u0645 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Framer Motion\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0648 \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.  Framer Motion \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc React \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u06a9\u0647 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc \u0628\u062e\u0634\u062f\u060c \u0639\u0627\u0644\u06cc \u0627\u0633\u062a.<\/p>\n<p><strong>\u062f\u0631\u0628\u0627\u0631\u0647 \u067e\u0631\u0648\u0698\u0647<\/strong><\/p>\n<p>\u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0627\u062f\u0647 React \u0627\u0633\u062a \u06a9\u0647 \u0634\u0627\u0645\u0644 \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0633\u0641\u0627\u0631\u0634\u06cc \u0648 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0633\u062a.  \u0647\u062f\u0641 \u0645\u0627 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u062c\u0630\u0627\u0628 \u062a\u0631 \u0648 \u0644\u0630\u062a \u0628\u062e\u0634 \u062a\u0631 \u06a9\u0646\u06cc\u0645.  \u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u062f\u0645\u0648\u06cc \u0632\u0646\u062f\u0647 \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><strong>\u0646\u0633\u062e\u0647 \u06cc \u0646\u0645\u0627\u06cc\u0634\u06cc<\/strong><\/p>\n<p><iframe src=\"https:\/\/stackblitz.com\/edit\/vitejs-vite-xwssu7?ctl=1&amp;embed=1&amp;hideExplorer=1&amp;hideNavigation=1&amp;view=preview\" width=\"100%\" height=\"500\" scrolling=\"no\" frameborder=\"no\" allowfullscreen=\"\" allowtransparency=\"true\" loading=\"lazy\"><br \/>\n<\/iframe>\n<\/p>\n<p><strong>\u0634\u0631\u0648\u0639 \u0634\u062f\u0646<\/strong><\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vite \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p><strong>1. \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npm create vite@latest custom-cursor-framer-motion -- --template react\ncd custom-cursor-framer-motion\nnpm install\nnpm run dev\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>2. \u0646\u0635\u0628 Framer Motion<\/strong><\/p>\n<p>\u0628\u0639\u062f\u060c Framer Motion \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npm install framer-motion\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0627\u06cc\u062c\u0627\u062f \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0633\u0641\u0627\u0631\u0634\u06cc<\/strong><\/p>\n<p>\u0628\u0631\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0631\u062f\u0646 \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627\u060c \u0627\u0632 Framer Motion \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 motion.div \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0628\u0647 \u062d\u0631\u06a9\u0627\u062a \u0645\u0627\u0648\u0633 \u0628\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u067e\u0627\u0633\u062e \u0645\u06cc \u062f\u0647\u062f.  \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 Context API \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062d\u0627\u0644\u062a \u0645\u062a\u063a\u06cc\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u062f\u0631 \u0633\u0637\u062d \u062c\u0647\u0627\u0646\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p><strong>\u0627\u06cc\u062c\u0627\u062f \u0632\u0645\u06cc\u0646\u0647<\/strong><\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u0632\u0645\u06cc\u0646\u0647 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u0646\u0648\u0627\u0639 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"c1\">\/\/ src\/components\/CustomCursor.jsx<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">createContext<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">CursorContext<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createContext<\/span><span class=\"p\">();<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">useCursorContext<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">useContext<\/span><span class=\"p\">(<\/span><span class=\"nx\">CursorContext<\/span><span class=\"p\">);<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">CursorContextProvider<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">children<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">initialCursorVariant<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setInitialCursorVariant<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">animateCursorVariant<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setAnimateCursorVariant<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">);<\/span>\n<span class=\"c1\">\/\/ This function allows for smooth transitions between cursor states<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">animateCursor<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">variant<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setInitialCursorVariant<\/span><span class=\"p\">(<\/span><span class=\"nx\">animateCursorVariant<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setAnimateCursorVariant<\/span><span class=\"p\">(<\/span><span class=\"nx\">variant<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\"><span class=\"nc\">CursorContext<\/span><span class=\"p\">.<\/span><span class=\"nc\">Provider<\/span>\n      <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">{<\/span>\n        <span class=\"nx\">initialCursorVariant<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">setInitialCursorVariant<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">animateCursorVariant<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">setAnimateCursorVariant<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">animateCursor<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">}<\/span><span class=\"si\">}<\/span>\n    <span class=\"p\">&gt;<\/span>\n      <span class=\"si\">{<\/span><span class=\"nx\">children<\/span><span class=\"si\">}<\/span>\n    <span class=\"p\"\/><span class=\"nc\">CursorContext<\/span><span class=\"p\">.<\/span><span class=\"nc\">Provider<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0645\u0624\u0644\u0641\u0647 \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0633\u0641\u0627\u0631\u0634\u06cc<\/strong><\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u062f \u0645\u0648\u0644\u0641\u0647 \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0622\u0645\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 Framer Motion \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0645\u0648\u0642\u0639\u06cc\u062a \u0648 \u0638\u0627\u0647\u0631 \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"c1\">\/\/ src\/components\/CustomCursor.jsx<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">motion<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useMotionValue<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">framer-motion<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useEffect<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/assets\/style\/custom-cursor.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useCursorContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/components\/CursorContext.jsx<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">Cursor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">initialCursorVariant<\/span><span class=\"p\">,<\/span> <span class=\"nx\">animateCursorVariant<\/span><span class=\"p\">,<\/span> <span class=\"nx\">animateCursor<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useCursorContext<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">cursorX<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useMotionValue<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">cursorY<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useMotionValue<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">variants<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">cursorEnter<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">border<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">1px solid #eeff00<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">boxShadow<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">0 0 1px 0px #eeff00 inset, 0 0 1px 0px #eeff00<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">scale<\/span><span class=\"p\">:<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">borderRadius<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">50%<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">backgroundColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">transparent<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">transition<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">duration<\/span><span class=\"p\">:<\/span> <span class=\"mf\">0.2<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">cursorLeave<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">scale<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">border<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">backgroundColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">transparent<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">transition<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">duration<\/span><span class=\"p\">:<\/span> <span class=\"mf\">0.2<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">buttonHover<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">scale<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">backgroundColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#eeff00<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">borderRadius<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">50%<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#app<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">mouseMoveHandler<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">cursorX<\/span><span class=\"p\">.<\/span><span class=\"nf\">set<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">clientX<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">12<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">cursorY<\/span><span class=\"p\">.<\/span><span class=\"nf\">set<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">clientY<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">12<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">};<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">mouseEnterHandler<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">animateCursor<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">cursorEnter<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">};<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">mouseLeaveHandler<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">animateCursor<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">cursorLeave<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">};<\/span>\n    <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">mousemove<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">mouseMoveHandler<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">mouseenter<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">mouseEnterHandler<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">mouseleave<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">mouseLeaveHandler<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">mousemove<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">mouseMoveHandler<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">mouseenter<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">mouseEnterHandler<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">app<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">mouseleave<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">mouseLeaveHandler<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">};<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">animateCursor<\/span><span class=\"p\">,<\/span> <span class=\"nx\">cursorX<\/span><span class=\"p\">,<\/span> <span class=\"nx\">cursorY<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\"><span class=\"nt\">motion<\/span><span class=\"p\">.<\/span><span class=\"nt\">div<\/span>\n      <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"cursor\"<\/span>\n      <span class=\"na\">variants<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">variants<\/span><span class=\"si\">}<\/span>\n      <span class=\"na\">initial<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">initialCursorVariant<\/span><span class=\"si\">}<\/span>\n      <span class=\"na\">animate<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">animateCursorVariant<\/span><span class=\"si\">}<\/span>\n      <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">{<\/span>\n        <span class=\"na\">translateX<\/span><span class=\"p\">:<\/span> <span class=\"nx\">cursorX<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">translateY<\/span><span class=\"p\">:<\/span> <span class=\"nx\">cursorY<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">transformOrigin<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">center<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">}<\/span><span class=\"si\">}<\/span>\n    <span class=\"p\">\/&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Cursor<\/span><span class=\"p\">;<\/span>\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d<\/strong>:<\/p>\n<ul>\n<li>\n<strong>useMotionValue<\/strong>: \u0627\u06cc\u0646 \u0642\u0644\u0627\u0628 \u0627\u0632 Framer Motion \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u0642\u0627\u062f\u06cc\u0631 \u062d\u0631\u06a9\u062a\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0628\u0627 \u0645\u0648\u0642\u0639\u06cc\u062a \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/li>\n<li>\n<strong>\u0627\u0646\u0648\u0627\u0639<\/strong>: \u0633\u0628\u06a9 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u0647\u0646\u06af\u0627\u0645 \u0648\u0631\u0648\u062f \u0628\u0647 \u06cc\u06a9 \u0645\u0646\u0637\u0642\u0647 \u062e\u0627\u0635 \u06cc\u0627 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0645\u0627\u0648\u0633 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0647\u0627.<\/li>\n<li>\n<strong>useEffect<\/strong>: \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u062d\u0631\u06a9\u062a \u0645\u0627\u0648\u0633 \u0648 \u062a\u0639\u0627\u0645\u0644 \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f.  \u0645\u0648\u0642\u0639\u06cc\u062a \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0638\u0627\u0647\u0631 \u0622\u0646 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0648\u0636\u0639\u06cc\u062a \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<li>\n<strong>motion.div<\/strong>: \u0627\u06cc\u0646 \u0639\u0646\u0635\u0631 \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0645\u062a\u062d\u0631\u06a9 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0648\u0636\u0639\u06cc\u062a \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0641\u0639\u0644\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u0648 \u0645\u062a\u062d\u0631\u06a9 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n<\/ul>\n<p><strong>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u062f\u06a9\u0645\u0647 \u0627\u06cc<\/strong><\/p>\n<p>\u062a\u0639\u0631\u06cc\u0641 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0631\u0627\u06cc \u062f\u06a9\u0645\u0647 \u0647\u0627 \u0646\u06cc\u0632 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u0645\u0648\u0646\u0647\u200c\u0627\u06cc \u0627\u0632 \u062f\u06a9\u0645\u0647\u200c\u0627\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0646\u06af\u0647\u200c\u062f\u0627\u0634\u062a\u0646 \u0645\u0627\u0648\u0633 \u0631\u0648\u06cc \u0622\u0646 \u06cc\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627 \u0631\u0627 \u067e\u062e\u0634 \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"c1\">\/\/ src\/components\/ButtonHover.jsx<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">motion<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">framer-motion<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/assets\/style\/button-hover.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useCursorContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/components\/CursorContext.jsx<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">ButtonHover<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">animateCursor<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useCursorContext<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">mouseEnterHandler<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">animateCursor<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">buttonHover<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">mouseLeaveHandler<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">animateCursor<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">cursorEnter<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\"><span class=\"nt\">motion<\/span><span class=\"p\">.<\/span><span class=\"nt\">button<\/span>\n      <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"button-hover\"<\/span>\n      <span class=\"na\">onMouseEnter<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">mouseEnterHandler<\/span><span class=\"si\">}<\/span>\n      <span class=\"na\">onMouseLeave<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">mouseLeaveHandler<\/span><span class=\"si\">}<\/span>\n      <span class=\"na\">initial<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">{<\/span>\n        <span class=\"na\">backgroundColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#000<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#fff<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">}<\/span><span class=\"si\">}<\/span>\n      <span class=\"na\">whileHover<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">{<\/span>\n        <span class=\"na\">backgroundColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#eeff00<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#000<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">}<\/span><span class=\"si\">}<\/span>\n      <span class=\"na\">whileTap<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">{<\/span>\n        <span class=\"na\">scale<\/span><span class=\"p\">:<\/span> <span class=\"mf\">0.9<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">}<\/span><span class=\"si\">}<\/span>\n    <span class=\"p\">&gt;<\/span>\n      Hover and Click Me!\n    <span class=\"p\"\/><span class=\"nt\">motion<\/span><span class=\"p\">.<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">ButtonHover<\/span><span class=\"p\">;<\/span>\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li>\n<strong>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CursorContext<\/strong>: \u062a\u0627\u0628\u0639 animateCursor \u0631\u0627 \u0627\u0632 \u0645\u062a\u0646 \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0638\u0627\u0647\u0631 \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u062a\u0639\u0627\u0645\u0644 \u062f\u06a9\u0645\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u062f.<\/li>\n<li>\n<strong>mouseEnterHandler<\/strong>: \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0627\u0648\u0633 \u0648\u0627\u0631\u062f \u0646\u0627\u062d\u06cc\u0647 \u062f\u06a9\u0645\u0647 \u0645\u06cc \u0634\u0648\u062f\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0647\u0627\u0648\u0631 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\n<strong>mouseLeaveHandler<\/strong>: \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0627\u0648\u0633 \u0627\u0632 \u0646\u0627\u062d\u06cc\u0647 \u062f\u06a9\u0645\u0647 \u062e\u0627\u0631\u062c \u0645\u06cc \u0634\u0648\u062f\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0628\u0647 cursorEnter \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u062f.<\/li>\n<li>\n<strong>\u062d\u0631\u06a9\u062a.\u062f\u06a9\u0645\u0647<\/strong>: \u0627\u06cc\u0646 \u0639\u0646\u0635\u0631 \u062f\u06a9\u0645\u0647 \u0627\u0632 Framer Motion \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0627\u0632 \u062c\u0645\u0644\u0647 \u0627\u0641\u06a9\u062a \u0647\u0627\u06cc \u0634\u0646\u0627\u0648\u0631 \u0648 \u06a9\u0644\u06cc\u06a9 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.  \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062e\u0648\u062f \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0645\u06cc \u06a9\u0627\u0647\u0634 \u0645\u06cc \u06cc\u0627\u0628\u062f.<\/li>\n<\/ul>\n<p><strong>\u062c\u0632\u0621 \u0628\u0631\u0646\u0627\u0645\u0647<\/strong><\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u062f \u0627\u0635\u0644\u06cc \u0627\u0633\u062a <strong>\u0628\u0631\u0646\u0627\u0645\u0647<\/strong> \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u06a9\u0647 \u062a\u0645\u0627\u0645 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0627\u062f\u063a\u0627\u0645 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"c1\">\/\/ src\/App.jsx<\/span>\n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/App.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">CustomCursor<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/components\/CustomCursor.jsx<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">ButtonHover<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/components\/ButtonHover.jsx<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">CursorContextProvider<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/components\/CursorContext.jsx<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">App<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\"><span class=\"nt\">div<\/span> <span class=\"na\">id<\/span><span class=\"p\">=<\/span><span class=\"s\">\"app\"<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\"><span class=\"nc\">CursorContextProvider<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\"><span class=\"nc\">CustomCursor<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\"><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"center\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\"><span class=\"nc\">ButtonHover<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\"\/><span class=\"nc\">CursorContextProvider<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">App<\/span><span class=\"p\">;<\/span>\n<\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li>\n<strong>CursorContextProvider<\/strong>: \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0645\u06cc\u200c\u067e\u06cc\u0686\u062f \u062a\u0627 \u0632\u0645\u06cc\u0646\u0647 \u0645\u06a9\u0627\u0646\u200c\u0646\u0645\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u0627\u062c\u0632\u0627\u06cc \u0641\u0631\u0632\u0646\u062f \u0641\u0631\u0627\u0647\u0645 \u06a9\u0646\u062f\u060c \u0648 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u062f \u06a9\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a \u0645\u06a9\u0627\u0646\u200c\u0646\u0645\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0648 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627 \u062f\u0631 \u0633\u0637\u062d \u062c\u0647\u0627\u0646\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/li>\n<li>\n<strong>\u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0633\u0641\u0627\u0631\u0634\u06cc<\/strong>: \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u06a9\u0647 \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u0631\u0646\u062f\u0631 \u0648 \u0645\u062a\u062d\u0631\u06a9 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<strong>ButtonHover<\/strong>: \u06cc\u06a9 \u062c\u0632\u0621 \u062f\u06a9\u0645\u0647 \u0628\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0634\u0646\u0627\u0648\u0631 \u0648 \u06a9\u0644\u06cc\u06a9.<\/li>\n<\/ul>\n<p><strong>\u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc CSS<\/strong><\/p>\n<p>\u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc\u060c \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0634\u0627\u0645\u0644 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc CSS \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<ul>\n<li>\n<strong>src\/assets\/style\/custom-cursor.css<\/strong>: \u0634\u0627\u0645\u0644 \u0633\u0628\u06a9 \u0647\u0627\u06cc \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0633\u0641\u0627\u0631\u0634\u06cc \u0627\u0633\u062a.<\/li>\n<li>\n<strong>src\/assets\/style\/button-hover.css<\/strong>: \u0634\u0627\u0645\u0644 \u0633\u0628\u06a9 \u0647\u0627\u06cc \u0627\u0641\u06a9\u062a \u0634\u0646\u0627\u0648\u0631 \u062f\u06a9\u0645\u0647 \u0627\u0633\u062a.<\/li>\n<li>\n<strong>src\/App.css<\/strong>: \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u06a9\u0644\u06cc \u0628\u0631\u0627\u06cc \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0628\u0631\u0646\u0627\u0645\u0647.<\/li>\n<\/ul>\n<p>\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0646\u062d\u0648\u0647 \u0627\u0639\u0645\u0627\u0644 \u0633\u0628\u06a9\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><strong>\u0646\u0633\u062e\u0647 \u0646\u0645\u0627\u06cc\u0634\u06cc \u0632\u0646\u062f\u0647 \u0648 \u06a9\u062f<\/strong><\/p>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u067e\u0631\u0648\u0698\u0647 \u06a9\u0627\u0645\u0644 \u0648 \u0646\u0633\u062e\u0647 \u06cc \u0646\u0645\u0627\u06cc\u0634\u06cc \u0632\u0646\u062f\u0647 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u067e\u06cc\u0648\u0646\u062f StackBlitz \u0632\u06cc\u0631 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<p>\u067e\u0631\u0648\u0698\u0647 StackBlitz<\/p>\n<hr\/>\n<p>\u0646\u0638\u0631\u0627\u062a \u0648 \u0633\u0648\u0627\u0644\u0627\u062a \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u062f\u0631 \u0646\u0638\u0631\u0627\u062a \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f!  \u06a9\u062f \u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9!  \ud83c\udf89<\/p>\n<hr\/><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0633\u0644\u0627\u0645 dev.to \u062c\u0627\u0645\u0639\u0647! \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a\u060c \u0645\u06cc \u062e\u0648\u0627\u0647\u0645 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Framer Motion\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0648 \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645. Framer Motion \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc React \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u06a9\u0647 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647\u0628\u0648\u062f &hellip;<\/p>\n","protected":false},"author":2,"featured_media":70115,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-70114","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/70114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=70114"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/70114\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/70115"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=70114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=70114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=70114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}