add custom cursor #48

app/template.tsx

@@ -7,6 +7,7 @@ import TopMenu from '@/components/TopMenu/TopMenu';
 import SocialIcons from '@/components/SocialIcons/SocialIcons';
 import {loadFeatures} from '@/lib/framerMotion/loadFeatures';
 import ScrollToTopButton from '@/components/ScrollToTop/ScrollToTop';
+import CustomCursor from '@/lib/customCursor/CustomCursor';
 
 /**
  * @param {{children}} props Props.
@@ -25,6 +26,7 @@ export default function Template({children}: {children: React.ReactNode}) {
       />
       <SocialIcons />
       {children}
+      <CustomCursor />
     </LazyMotion>
   );
 }

components/Gallery/GalleryItem.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import Image from 'next/image';
 import {forwardRef} from 'react';
 import {useHotkeys} from 'react-hotkeys-hook';
+import {customCursorClickableClass} from '@/lib/customCursor/customCursorClickableClass';
 import AppearInViewport from '../AppearInViewport/AppearInViewport';
 
 /**
@@ -16,7 +17,7 @@ type GalleryItemProps = {
 
 const imgCn = clsx('rounded-md', 'overflow-hidden');
 const overflowCn = clsx(
-  'cursor-pointer',
+  customCursorClickableClass,
   'relative',
   'after:absolute',
   'after:content-[""]',

lib/customCursor/CustomCursor.tsx

@@ -0,0 +1,14 @@
+import dynamic from 'next/dynamic';
+import {prefersReducedMotion} from '@/utils/isPrefersReducedMotion';
+import options from './customCursorOptions';
+
+const AnimatedCursor = dynamic(() => import('react-animated-cursor'), {
+  ssr: false,
+});
+
+/**
+ * @returns Custom cursor.
+ */
+export default function CustomCursor() {
+  return prefersReducedMotion ? null : <AnimatedCursor {...options} />;
+}

lib/customCursor/customCursorClickableClass.ts

@@ -0,0 +1 @@
+export const customCursorClickableClass = 'custom-cursor-clickable';

lib/customCursor/customCursorOptions.ts

@@ -0,0 +1,29 @@
+import {ComponentProps} from 'react';
+import AnimatedCursor from 'react-animated-cursor';
+import {customCursorClickableClass} from './customCursorClickableClass';
+
+// eslint-disable-next-line jsdoc/require-jsdoc
+type Options = ComponentProps<typeof AnimatedCursor>;
+
+const options: Options = {
+  innerSize: 12,
+  outerStyle: {
+    border: '2px solid white',
+  },
+  outerSize: 20,
+  outerScale: 2,
+  outerAlpha: 0.2,
+  color: '255, 255, 255',
+  innerScale: 0,
+  clickables: [
+    'a',
+    'input[type="text"]',
+    'input[type="email"]',
+    'input[type="number"]',
+    'label[for]',
+    'button',
+    `.${customCursorClickableClass}`,
+  ],
+};
+
+export default options;

package.json

@@ -30,6 +30,7 @@
     "photoswipe": "^5.3.8",
     "postcss": "8.4.23",
     "react": "18.2.0",
+    "react-animated-cursor": "^2.7.0",
     "react-dom": "18.2.0",
     "react-hotkeys-hook": "^4.4.0",
     "react-page-visibility": "^7.0.0",

utils/isPrefersReducedMotion.ts

@@ -5,11 +5,13 @@ const query = '(prefers-reduced-motion: reduce)';
 /**
  * @returns True if the user has requested reduced motion.
  */
-export default function isPrefersReducedMotion() {
+function isPrefersReducedMotion() {
   if (isServer()) {
     return false;
   }
 
   const mediaQueryList = window.matchMedia(query);
   return mediaQueryList.matches;
 }
+
+export const prefersReducedMotion = isPrefersReducedMotion();