created cursor component with wand image (#30)

* "created cursor component with wang image
 with '#' will be ignored, and an empty message aborts the commit.

* Created Simple About Section (#31)

* Hero Section (#27)

* set up initial template

* added navbar to hero section

* responsive hero section

* Basic About is done

* Merge from Dev (#33)

* Hero Section (#27)

* set up initial template

* added navbar to hero section

* responsive hero section

* Basic About is done

* About is added

* fixed cursor selection bugs and added a trail

* Fixed missing component import for FAQ

* added comment in luge.js

---------

Co-authored-by: Kevin Monisit <monisitkevin@gmail.com>

app/(landing)/page.tsx

@@ -9,10 +9,14 @@ import { Suspense } from 'react';
 import Sponsors from './sections/Sponsors';
 import About from './sections/About';
 import FAQ from './sections/FAQ/FAQ';
+import Cursor from '@/app/ui/cursor';
 
 export default function Page() {
   return (
     <main className="flex min-h-screen flex-col">
+      <Suspense>
+        <Cursor />
+      </Suspense>
       <div>
         <Hero />
         <About />

app/ui/cursor.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import Image from 'next/image';
+import LugeReact from "./luge";
+
+/**
+ *
+ * Documentation: https://luge.cool/docs/custom-cursor/
+ * Compatibility with Next.js Discussion: https://github.com/AntoineW/luge/discussions/9
+ *
+ * The day that Luge becomes deprecated or starts to break, cause problems, etc., it must be removed.
+ *
+ * 1. pnpm uninstall @waaark/luge
+ * 2. Delete the TrailEffect component
+ * 3. Delete all instances of data-lg-[...] in global.css
+ */
+const TrailEffect = () => {
+  return (
+    <>
+      <LugeReact />
+      <div data-lg-cursor data-lg-cursor-hide>
+        <div data-lg-cursor-trail data-lg-cursor-trail-length="20" data-lg-cursor-inertia="0.4"></div>
+      </div>
+    </>
+  );
+}
+
+const Cursor = () => {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  const [isPointer, setIsPointer] = useState(false);
+
+  const handleMouseMove = (e: any) => {
+    setPosition({ x: e.clientX, y: e.clientY });
+
+    const target = e.target;
+
+    setIsPointer(
+      window.getComputedStyle(target).getPropertyValue("cursor") === "pointer"
+    );
+    // target.style.cursor = "none";
+
+    e.stopPropagation();
+  };
+
+  useEffect(() => {
+    window.addEventListener("mousemove", handleMouseMove);
+
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
+
+  const YSize = isPointer ? -100 : 100;
+  const XSize = isPointer ? -100 : 20;
+  const rotationAngle = isPointer ? 0 : 315;
+  const topPos = (position.y - YSize / 4) + 10;
+  const leftPos = (position.x - XSize / 4) + 30;
+
+  const hasNotMoved = position.x === 0 && position.y === 0;
+
+  return (
+    <>
+      <TrailEffect />
+      <Image
+        src={"/landing/wand.png"}
+        alt="Custom Cursor"
+        width={XSize}
+        height={YSize}
+        className="select-none z-50"
+        style={{
+          display: hasNotMoved ? "none" : "block",
+          transform: `rotate(${rotationAngle}deg)`,
+          position: "fixed",
+          left: `${leftPos}px`,
+          top: `${topPos}px`,
+          pointerEvents: "none",
+        }}
+      />
+    </>
+  );
+};
+
+export default Cursor;

app/ui/global.css

@@ -16,3 +16,23 @@ input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+
+.lg-cursor-pointer:before {
+  margin: -5px 0 0 -5px;
+  width: 10px;
+  height: 10px;
+
+  background-color: cyan;
+  border-radius: 50%;
+}
+
+.lg-cursor-trail path {
+  stroke: cyan;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 12px;
+}
+.lg-cursor--hover .lg-cursor-pointer:before {
+  background-color: red;
+  transform: scale(2);
+}

app/ui/luge.js

@@ -0,0 +1,27 @@
+'use client';
+import { useEffect } from 'react';
+
+import '@/node_modules/@waaark/luge/dist/css/luge.css';
+
+/**
+ * This is for the trailing effect for the wand in the Cursor component.
+ *
+ * Delete this when necessary. This adds a whole another library to this project
+ * and we don't need the clutter later on if we don't need it.
+ *
+ * But magic wand trail effect is very cool. So we keep for Spring '24.
+ */
+
+const LugeReact = () => {
+  useEffect(() => {
+    import('@waaark/luge/dist/js/luge')
+      .then((luge) => {
+        luge.lifecycle.refresh();
+      })
+      .catch((error) => console.error(error));
+  });
+
+  return null;
+};
+
+export default LugeReact;

package.json

@@ -16,6 +16,7 @@
     "@tailwindcss/forms": "^0.5.7",
     "@types/node": "20.5.7",
     "@vercel/postgres": "^0.5.0",
+    "@waaark/luge": "0.6.18-beta.2",
     "autoprefixer": "10.4.15",
     "bcrypt": "^5.1.1",
     "clsx": "^2.0.0",

tsconfig.json

@@ -28,7 +28,8 @@
     "**/*.tsx",
     ".next/types/**/*.ts",
     "app/lib/placeholder-data.js",
-    "scripts/seed.js"
+    "scripts/seed.js",
+    "app/ui/luge.js"
   ],
   "exclude": ["node_modules"]
 }