added click to scroll on cards and pointerevents on splash cursor

Author: Austin1serb

.zero-ui/attributes.d.ts

@@ -2,7 +2,7 @@
 export declare const bodyAttributes: {
   "data-mobile-menu": string;
   "data-phase": "1" | "2" | "3" | "4" | "5";
-  "data-reveal": "false";
+  "data-reveal": "false" | "true";
   "data-scrolled": "down" | "up";
 };
 

app/components/HeroScrollClick.tsx

@@ -0,0 +1,11 @@
+import Link from "next/link"
+
+export const HeroScrollClick: React.FC = () => {
+  return (
+    <Link
+      href="#projects-grid"
+      aria-label="Scroll to projects"
+      className="absolute top-0 z-5 h-1/2 w-1/2  right-0 xs:top-5 sm:h-3/4 sm:top-0 md:right-1/20 lg:right-1/10 xl:right-1/20 reveal-true:pointer-events-none"
+    />
+  )
+}

app/components/HeroV2.tsx

@@ -1,3 +1,4 @@
+import { HeroScrollClick } from "./HeroScrollClick"
 import { ActivityDot } from "./ui/ActivityDot"
 import { AnimatedElement } from "./ui/AnimatedElement"
 import { CallToActionButton } from "./ui/CallToActionButton"
@@ -40,7 +41,8 @@ export const HeroV2 = () => {
           <CallToActionButton />
         </div>
         {/* Don't remove this span */}
-        <span data-stack-target-id className="xs:ml-[8%] [flex:1 _0_0px] xs:mt-20 mt-24 ml-[4%] h-1 w-2 sm:mt-11" />
+        <span data-stack-target-id className="xs:ml-[8%] [flex:1 _0_0px] xs:mt-20 mt-24 ml-[4%] h-1 w-2 sm:mt-11 xl:ml-[16%]" />
+        <HeroScrollClick />
 
         {/* subtle background ellipse */}
         <div className="pointer-events-none absolute inset-y-0 left-1/3 -z-1 hidden w-full bg-radial from-indigo-100 via-transparent to-transparent blur-3xl md:block" />

app/components/ProjectsGrid.tsx

@@ -18,7 +18,7 @@ export function ProjectsGrid({ className }: { className?: string }) {
   const ref = useRef<HTMLDivElement>(null)
   const rawOffsets = useOffset(ids)
   const isMobile = useIsMobile()
-  const responsiveScale = isMobile ? 0.34 : 0.7
+  const responsiveScale = isMobile ? 0.34 : 0.8
   const [, setReveal] = useUI<"true" | "false">("reveal", "false")
 
   const { scrollYProgress } = useScroll({
@@ -61,7 +61,7 @@ export function ProjectsGrid({ className }: { className?: string }) {
         setReveal(inView ? "true" : "false")
       },
       {
-        threshold: isMobile ? 0.5 : 0.8,
+        threshold: isMobile ? 0.5 : 0.4,
       }
     )
     observer.observe(element)
@@ -70,7 +70,7 @@ export function ProjectsGrid({ className }: { className?: string }) {
   }, [isMobile])
 
   return (
-    <section className={clsx("relative", className)} ref={ref}>
+    <section id="projects-grid" className={clsx("relative scroll-mt-36", className)} ref={ref}>
       <div className="relative z-4 grid grid-cols-1 grid-rows-1 gap-4 md:grid-cols-2 md:grid-rows-2">
         <AnimatedCard
           key={"react-zero-ui"}

app/components/SplashCursor.tsx

@@ -1139,24 +1139,24 @@ export function SplashCursor({
       return ((value - min) % range) + min
     }
 
-    window.addEventListener("mousedown", (e) => {
+    window.addEventListener("pointerdown", (e) => {
       const pointer = pointers[0]
       const posX = scaleByPixelRatio(e.clientX)
       const posY = scaleByPixelRatio(e.clientY)
       updatePointerDownData(pointer, -1, posX, posY)
       clickSplat(pointer)
     })
 
-    function handleFirstMouseMove(e: MouseEvent) {
+    function handleFirstMouseMove(e: PointerEvent) {
       const pointer = pointers[0]
       const posX = scaleByPixelRatio(e.clientX)
       const posY = scaleByPixelRatio(e.clientY)
       const color = generateColor()
       updateFrame()
       updatePointerMoveData(pointer, posX, posY, color)
-      document.body.removeEventListener("mousemove", handleFirstMouseMove)
+      document.body.removeEventListener("pointermove", handleFirstMouseMove)
     }
-    document.body.addEventListener("mousemove", handleFirstMouseMove)
+    document.body.addEventListener("pointermove", handleFirstMouseMove)
 
     window.addEventListener("mousemove", (e) => {
       const pointer = pointers[0]