From 3590d47fdb0967622bdf039c0d182c1a55e3481f Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Fri, 8 May 2026 12:53:04 +0200
Subject: [PATCH] feat: add mask-based shine sweep effect to header logo on
 hover

Former-commit-id: b93efa80bbbe4a6645e23a5848252bfbce0d9248
---
 components/layout/Header.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 7f05fb111..82708eced 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -107,6 +107,22 @@ export function Header({ navLinks }: HeaderProps) {
               priority
               sizes="192px"
             />
+            {/* Masked sweep overlay on hover */}
+            <div 
+              className="absolute inset-0 z-10 pointer-events-none transition-transform duration-500 origin-left group-hover:scale-105"
+              style={{
+                WebkitMaskImage: `url(${(isSolidMode || isMobileMenuOpen) ? "/assets/logo.png" : "/assets/logo-white.png"})`,
+                WebkitMaskSize: 'contain',
+                WebkitMaskRepeat: 'no-repeat',
+                WebkitMaskPosition: 'left center',
+                maskImage: `url(${(isSolidMode || isMobileMenuOpen) ? "/assets/logo.png" : "/assets/logo-white.png"})`,
+                maskSize: 'contain',
+                maskRepeat: 'no-repeat',
+                maskPosition: 'left center'
+              }}
+            >
+              <div className="absolute top-0 -left-[150%] h-[200%] w-[150%] bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-25deg] group-hover:left-[150%] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)]" />
+            </div>
           </TransitionLink>
           
           <nav className="relative z-10 hidden md:flex items-center gap-8 lg:gap-10">