combines scroll and mouse for holo

Author: briansmiley

components/Card.tsx

@@ -28,6 +28,36 @@ export const Card: React.FC<CardProps> = ({
     const setProp = (prop: string, value: string) =>
       el.style.setProperty(prop, value)
 
+    // Unified angle: mouse sets absolute; scroll applies incremental delta
+    let ticking = false
+    let lastScrollY = window.scrollY || window.pageYOffset || 0
+    let angleDeg = (() => {
+      const existing = el.style.getPropertyValue('--angle')
+      const parsed = parseFloat(existing)
+      return Number.isFinite(parsed) ? parsed : 45
+    })()
+
+    const applyAngle = (deg: number) => {
+      // Normalize within 0..360
+      angleDeg = ((deg % 360) + 360) % 360
+      setProp('--angle', `${angleDeg}deg`)
+    }
+
+    const onScroll = () => {
+      const nowY = window.scrollY || window.pageYOffset || 0
+      const deltaY = nowY - lastScrollY
+      lastScrollY = nowY
+      if (deltaY === 0) return
+      const deltaAngle = deltaY * 0.8
+      if (ticking) return
+      ticking = true
+      requestAnimationFrame(() => {
+        applyAngle(angleDeg + deltaAngle)
+        ticking = false
+      })
+    }
+    window.addEventListener('scroll', onScroll, { passive: true })
+
     const onMouseUpdate = (e: MouseEvent) => {
       const rect = el.getBoundingClientRect()
       const width = el.offsetWidth
@@ -43,7 +73,9 @@ export const Card: React.FC<CardProps> = ({
 
       setProp('--dy', `${YAngle}deg`)
       setProp('--dx', `${XAngle}deg`)
-      setProp('--mouseAngle', `${Math.atan2(normY, normX)}rad`)
+      const angleRad = Math.atan2(normY, normX)
+      const nextAngleDeg = (angleRad * 180) / Math.PI
+      applyAngle(nextAngleDeg)
       setProp('--tx', `${normX}`)
       setProp('--ty', `${normY}`)
       const tiltMag = Math.min(1, Math.sqrt(normX * normX + normY * normY))
@@ -68,6 +100,7 @@ export const Card: React.FC<CardProps> = ({
       el.removeEventListener('mousemove', onMouseUpdate)
       el.removeEventListener('mouseenter', onMouseUpdate)
       el.removeEventListener('mouseleave', resetProps)
+      window.removeEventListener('scroll', onScroll)
     }
   }, [])
 

components/PlayerCard/Holoverlay.tsx

@@ -10,7 +10,7 @@ export type HoloEffect = 'dice' | 'lines' | 'wavy'
 export default function Holoverlay({
   effect,
   className,
-  scrollControlsAngle = true,
+  scrollControlsAngle = false,
 }: {
   effect: HoloEffect
   className?: string
@@ -27,7 +27,6 @@ export default function Holoverlay({
       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 = () => {

components/PlayerCard/holo.module.css

@@ -6,10 +6,8 @@
 }
 
 .shine {
-  --angle: 45deg;
-  --mouseAngle: 45deg;
   background: linear-gradient(
-    var(--mouseAngle, var(--angle)),
+    var(--angle, 45deg),
     rgba(255, 0, 0, 0.6),
     /* red */ rgba(255, 165, 0, 0.6),
     /* orange */ rgba(255, 255, 0, 0.6),