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

fix: DrillOrbit fades in/out at path edges, DrillBitSpinner uses radial mask instead of hard clip

Browse Source 
Former-commit-id: 3aea27f3e17984634206ca817d074b18e712933e
This commit is contained in:
Marc Mintel
2026-05-11 21:31:49 +02:00
parent 079398239f
commit 74caea6854
11 changed files with 153 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/providers/PageTransitionShutter.tsx
View File

@@ -17,14 +17,23 @@ export function PageTransitionShutter() {
initial={{ y: '100%' }}
animate={{ y: '0%' }}
exit={{ y: '-100%' }}
transition={{ duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
className="fixed left-0 w-full z-[9998] bg-[#050B14] pointer-events-none flex flex-col items-center justify-center overflow-hidden"
transition={{ duration: 0.9, ease: [0.16, 1, 0.3, 1] }}
className="fixed left-0 w-full z-[9998] bg-[#050B14] pointer-events-none flex flex-col items-center justify-center overflow-visible"
style={{
height: '130vh',
top: '-15vh',
clipPath: 'polygon(0% 8%, 8.3% 0%, 16.6% 8%, 25% 0%, 33.3% 8%, 41.6% 0%, 50% 8%, 58.3% 0%, 66.6% 8%, 75% 0%, 83.3% 8%, 91.6% 0%, 100% 8%, 100% 92%, 91.6% 100%, 83.3% 92%, 75% 100%, 66.6% 92%, 58.3% 100%, 50% 92%, 41.6% 100%, 33.3% 92%, 25% 100%, 16.6% 92%, 8.3% 100%, 0% 92%)'
height: '110vh',
top: '-5vh',
}}
>
{/* Top organic wave edge */}
<svg viewBox="0 0 1440 48" preserveAspectRatio="none" className="absolute top-0 -translate-y-full left-0 w-full h-[clamp(16px,3vw,48px)]" style={{ transform: 'translateY(-99%) scaleY(-1)' }}>
<path d="M0,48 L0,28 C120,36 240,6 480,12 C720,18 840,42 1080,24 C1200,16 1320,32 1440,28 L1440,48 Z" fill="#050B14" />
<path d="M0,48 L0,36 C180,42 360,16 600,22 C840,28 960,44 1200,32 C1320,26 1400,38 1440,36 L1440,48 Z" fill="#050B14" opacity="0.6" />
</svg>
{/* Bottom organic wave edge */}
<svg viewBox="0 0 1440 48" preserveAspectRatio="none" className="absolute bottom-0 translate-y-full left-0 w-full h-[clamp(16px,3vw,48px)]" style={{ transform: 'translateY(99%)' }}>
<path d="M0,48 L0,28 C120,36 240,6 480,12 C720,18 840,42 1080,24 C1200,16 1320,32 1440,28 L1440,48 Z" fill="#050B14" />
<path d="M0,48 L0,36 C180,42 360,16 600,22 C840,28 960,44 1200,32 C1320,26 1400,38 1440,36 L1440,48 Z" fill="#050B14" opacity="0.6" />
</svg>
{/* Subtle grid background */}
<div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]" />