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] }} transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
className="relative z-10 flex flex-col items-center w-full px-4" className="relative z-10 flex flex-col items-center w-full px-4"
> >
{/* Logo Container with Shimmer / Reflection effect */} {/* Single Masked Logo Container to prevent double-logo offset */}
<div className="relative w-64 h-20 sm:w-80 sm:h-24 mb-12 overflow-hidden mix-blend-plus-lighter"> <div
<Image 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)]"
src="/assets/logo-white.png" style={{
alt="E-TIB Gruppe" WebkitMaskImage: 'url(/assets/logo-white.png)',
fill WebkitMaskSize: 'contain',
className="object-contain filter drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]" WebkitMaskRepeat: 'no-repeat',
priority WebkitMaskPosition: 'center',
/> maskImage: 'url(/assets/logo-white.png)',
{/* Animated Light Sweep over Logo */} 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 <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%' }} initial={{ left: '-150%' }}
animate={{ left: '250%' }} animate={{ left: '250%' }}
transition={{ duration: 2.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.5 }} 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> </div>

40
components/providers/PageTransitionShutter.tsx
View File

@@ -32,31 +32,29 @@ export function PageTransitionShutter() {
transition={{ duration: 0.4, delay: 0.2 }} transition={{ duration: 0.4, delay: 0.2 }}
className="relative z-10 flex flex-col items-center w-full px-4" className="relative z-10 flex flex-col items-center w-full px-4"
> >
{/* Logo Container with Shimmer / Reflection effect */} {/* Single Masked Logo Container to prevent double-logo offset */}
<div className="relative w-48 h-16 sm:w-64 sm:h-20 overflow-hidden mix-blend-plus-lighter"> <div
<Image className="relative w-48 h-16 sm:w-64 sm:h-20 filter drop-shadow-[0_0_15px_rgba(255,255,255,0.15)]"
src="/assets/logo-white.png" style={{
alt="E-TIB Gruppe" WebkitMaskImage: 'url(/assets/logo-white.png)',
fill WebkitMaskSize: 'contain',
className="object-contain filter drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]" WebkitMaskRepeat: 'no-repeat',
priority WebkitMaskPosition: 'center',
/> maskImage: 'url(/assets/logo-white.png)',
{/* Animated Light Sweep over Logo (faster for page transitions) */} 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 <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%' }} initial={{ left: '-150%' }}
animate={{ left: '250%' }} animate={{ left: '250%' }}
transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.2 }} 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> </div>