mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

fix: resolve double logo overlay by using pure CSS mask architecture

Browse Source 
Former-commit-id: 3ad0a0ec6a225180c314efeac73f9a24baa98b2a
This commit is contained in:
Marc Mintel
2026-05-08 11:05:34 +02:00
parent 4769f4e12e
commit ec5c4ebbfb
2 changed files with 38 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/providers/InitialLoader.tsx
View File

@@ -74,31 +74,29 @@ export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?:
transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
className="relative z-10 flex flex-col items-center w-full px-4"
>
{/* Logo Container with Shimmer / Reflection effect */}
<div className="relative w-64 h-20 sm:w-80 sm:h-24 mb-12 overflow-hidden mix-blend-plus-lighter">
<Image
src="/assets/logo-white.png"
alt="E-TIB Gruppe"
fill
className="object-contain filter drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]"
priority
/>
{/* Animated Light Sweep over Logo */}
{/* Single Masked Logo Container to prevent double-logo offset */}
<div
className="relative w-64 h-20 sm:w-80 sm:h-24 mb-12 filter drop-shadow-[0_0_15px_rgba(255,255,255,0.15)]"
style={{
WebkitMaskImage: 'url(/assets/logo-white.png)',
WebkitMaskSize: 'contain',
WebkitMaskRepeat: 'no-repeat',
WebkitMaskPosition: 'center',
maskImage: 'url(/assets/logo-white.png)',
maskSize: 'contain',
maskRepeat: 'no-repeat',
maskPosition: 'center'
}}
>
{/* Base logo color (slightly dimmed to make the sweep visible) */}
<div className="absolute inset-0 bg-white/70" />
{/* Sweeping intense white light */}
<motion.div
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/80 to-transparent skew-x-[-25deg]"
className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-25deg]"
initial={{ left: '-150%' }}
animate={{ left: '250%' }}
transition={{ duration: 2.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.5 }}
style={{
WebkitMaskImage: 'url(/assets/logo-white.png)',
WebkitMaskSize: 'contain',
WebkitMaskRepeat: 'no-repeat',
WebkitMaskPosition: 'center',
maskImage: 'url(/assets/logo-white.png)',
maskSize: 'contain',
maskRepeat: 'no-repeat',
maskPosition: 'center'
}}
/>
</div>

40
components/providers/PageTransitionShutter.tsx
View File

@@ -32,31 +32,29 @@ export function PageTransitionShutter() {
transition={{ duration: 0.4, delay: 0.2 }}
className="relative z-10 flex flex-col items-center w-full px-4"
>
{/* Logo Container with Shimmer / Reflection effect */}
<div className="relative w-48 h-16 sm:w-64 sm:h-20 overflow-hidden mix-blend-plus-lighter">
<Image
src="/assets/logo-white.png"
alt="E-TIB Gruppe"
fill
className="object-contain filter drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]"
priority
/>
{/* Animated Light Sweep over Logo (faster for page transitions) */}
{/* Single Masked Logo Container to prevent double-logo offset */}
<div
className="relative w-48 h-16 sm:w-64 sm:h-20 filter drop-shadow-[0_0_15px_rgba(255,255,255,0.15)]"
style={{
WebkitMaskImage: 'url(/assets/logo-white.png)',
WebkitMaskSize: 'contain',
WebkitMaskRepeat: 'no-repeat',
WebkitMaskPosition: 'center',
maskImage: 'url(/assets/logo-white.png)',
maskSize: 'contain',
maskRepeat: 'no-repeat',
maskPosition: 'center'
}}
>
{/* Base logo color (slightly dimmed to make the sweep visible) */}
<div className="absolute inset-0 bg-white/70" />
{/* Sweeping intense white light */}
<motion.div
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/80 to-transparent skew-x-[-25deg]"
className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-25deg]"
initial={{ left: '-150%' }}
animate={{ left: '250%' }}
transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.2 }}
style={{
WebkitMaskImage: 'url(/assets/logo-white.png)',
WebkitMaskSize: 'contain',
WebkitMaskRepeat: 'no-repeat',
WebkitMaskPosition: 'center',
maskImage: 'url(/assets/logo-white.png)',
maskSize: 'contain',
maskRepeat: 'no-repeat',
maskPosition: 'center'
}}
/>
</div>