From 462f4c3f78828a02905bdf562605fcdff279b8b3 Mon Sep 17 00:00:00 2001
From: Brian Smiley <briantsmiley42@gmail.com>
Date: Sat, 13 Sep 2025 18:32:44 -0700
Subject: [PATCH 1/4] fixes image path

---
 components/PlayerCard/PlayerCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/PlayerCard/PlayerCard.tsx b/components/PlayerCard/PlayerCard.tsx
index 0e01a29d..8389d244 100644
--- a/components/PlayerCard/PlayerCard.tsx
+++ b/components/PlayerCard/PlayerCard.tsx
@@ -144,7 +144,7 @@ export default function PlayerCard({
         />
         {/* Frame Overlay */}
         <Image
-          src="/images/cards/celestial-frame-2x3.png"
+          src="/images/cards/celestial-frame-2x3-shortbanner.png"
           alt="Frame overlay"
           fill
           className="pointer-events-none z-3 object-cover"

From 220a6887373f029206d90cf5311d4110394f65eb Mon Sep 17 00:00:00 2001
From: Brian Smiley <briantsmiley42@gmail.com>
Date: Sat, 13 Sep 2025 18:35:13 -0700
Subject: [PATCH 2/4] fixes not showing holo movile

---
 components/PlayerCard/holo.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/PlayerCard/holo.module.css b/components/PlayerCard/holo.module.css
index b3fef469..1211015e 100644
--- a/components/PlayerCard/holo.module.css
+++ b/components/PlayerCard/holo.module.css
@@ -8,7 +8,7 @@
 .shine {
   --angle: 135deg;
   background: linear-gradient(
-    var(--mouseAngle),
+    var(--mouseAngle, var(--angle)),
     rgba(255, 0, 0, 0.6),
     /* red */ rgba(255, 165, 0, 0.6),
     /* orange */ rgba(255, 255, 0, 0.6),

From 070d16b280439e6bfec808677e3dd11c567ebfc5 Mon Sep 17 00:00:00 2001
From: Brian Smiley <briantsmiley42@gmail.com>
Date: Sat, 13 Sep 2025 18:40:28 -0700
Subject: [PATCH 3/4] adds scroll holo

---
 components/PlayerCard/Holoverlay.tsx | 48 +++++++++++++++++++++++++++-
 1 file changed, 47 insertions(+), 1 deletion(-)

diff --git a/components/PlayerCard/Holoverlay.tsx b/components/PlayerCard/Holoverlay.tsx
index 47f84ebb..93bd3e24 100644
--- a/components/PlayerCard/Holoverlay.tsx
+++ b/components/PlayerCard/Holoverlay.tsx
@@ -1,3 +1,7 @@
+'use client'
+
+import React, { useEffect, useRef } from 'react'
+
 import { cn } from '@/lib/utils'
 
 import styles from '@/components/PlayerCard/holo.module.css'
@@ -6,14 +10,56 @@ export type HoloEffect = 'dice' | 'lines' | 'wavy'
 export default function Holoverlay({
   effect,
   className,
+  scrollControlsAngle = true,
 }: {
   effect: HoloEffect
   className?: string
+  scrollControlsAngle?: boolean
 }) {
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const el = overlayRef.current
+    if (!el || !scrollControlsAngle) return
+
+    let ticking = false
+    const setAngle = () => {
+      const scrollY = window.scrollY || window.pageYOffset || 0
+      const angle = (scrollY * 0.15) % 360
+      el.style.setProperty('--angle', `${angle}deg`)
+    }
+
+    const onScroll = () => {
+      if (ticking) return
+      ticking = true
+      requestAnimationFrame(() => {
+        setAngle()
+        ticking = false
+      })
+    }
+
+    const onResize = onScroll
+
+    setAngle()
+    window.addEventListener('scroll', onScroll, { passive: true })
+    window.addEventListener('resize', onResize)
+
+    return () => {
+      window.removeEventListener('scroll', onScroll)
+      window.removeEventListener('resize', onResize)
+    }
+  }, [scrollControlsAngle])
+
   return (
     <div
+      ref={overlayRef}
       id="holo"
-      className={`${cn('z-4', styles.shine, styles[effect], 'absolute inset-0 z-3 size-full opacity-[.3] transition-opacity duration-300 hover:opacity-100', className)}`}
+      className={cn(
+        'pointer-events-none absolute inset-0 z-4 size-full opacity-[.3] transition-opacity duration-300 hover:opacity-100',
+        styles.shine,
+        styles[effect],
+        className,
+      )}
     />
   )
 }

From 2a4f461d2c6c2896fb9be9f9a85a12f0184338ef Mon Sep 17 00:00:00 2001
From: Brian Smiley <briantsmiley42@gmail.com>
Date: Sat, 13 Sep 2025 18:50:17 -0700
Subject: [PATCH 4/4] better scroll

---
 components/PlayerCard/Holoverlay.tsx  | 3 ++-
 components/PlayerCard/holo.module.css | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/PlayerCard/Holoverlay.tsx b/components/PlayerCard/Holoverlay.tsx
index 93bd3e24..dbed6364 100644
--- a/components/PlayerCard/Holoverlay.tsx
+++ b/components/PlayerCard/Holoverlay.tsx
@@ -25,8 +25,9 @@ export default function Holoverlay({
     let ticking = false
     const setAngle = () => {
       const scrollY = window.scrollY || window.pageYOffset || 0
-      const angle = (scrollY * 0.15) % 360
+      const angle = (scrollY * 0.8) % 360
       el.style.setProperty('--angle', `${angle}deg`)
+      el.style.setProperty('--mouseAngle', `${angle}deg`)
     }
 
     const onScroll = () => {
diff --git a/components/PlayerCard/holo.module.css b/components/PlayerCard/holo.module.css
index 1211015e..0c4b5ab0 100644
--- a/components/PlayerCard/holo.module.css
+++ b/components/PlayerCard/holo.module.css
@@ -6,7 +6,8 @@
 }
 
 .shine {
-  --angle: 135deg;
+  --angle: 45deg;
+  --mouseAngle: 45deg;
   background: linear-gradient(
     var(--mouseAngle, var(--angle)),
     rgba(255, 0, 0, 0.6),