Tiltholo

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,57 @@ 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.8) % 360
+      el.style.setProperty('--angle', `${angle}deg`)
+      el.style.setProperty('--mouseAngle', `${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,
+      )}
     />
   )
 }

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"

components/PlayerCard/holo.module.css

@@ -6,9 +6,10 @@
 }
 
 .shine {
-  --angle: 135deg;
+  --angle: 45deg;
+  --mouseAngle: 45deg;
   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),