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

feat: content-aware HDDBore and TrenchLaying animations with drillbit transition

Browse Source 
Former-commit-id: 1a541fc31c5b24aa083c3441a9ab642c7d49da59
This commit is contained in:
Marc Mintel
2026-05-11 21:49:57 +02:00
parent e33dcdddac
commit 2e1e34a617
12 changed files with 236 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/providers/PageTransitionShutter.tsx
View File

@@ -13,25 +13,19 @@ export function PageTransitionShutter() {
{isTransitioning && (
<motion.div
key="shutter"
initial={{ y: '100%' }}
initial={{ y: '-100%' }}
animate={{ y: '0%' }}
exit={{ y: '-100%' }}
exit={{ y: '100%' }}
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: '110vh',
top: '-5vh',
height: '100vh',
top: '0',
}}
>
{/* 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" />
{/* Bottom massive Drill Bit Teeth edge (leading edge cutting down) */}
<svg viewBox="0 0 1000 100" preserveAspectRatio="none" className="absolute bottom-0 translate-y-full left-0 w-full h-[clamp(40px,8vw,120px)] text-[#050B14]">
<path d="M0,0 L1000,0 L1000,10 L960,100 L920,10 L880,100 L840,10 L800,100 L760,10 L720,100 L680,10 L640,100 L600,10 L560,100 L520,10 L480,100 L440,10 L400,100 L360,10 L320,100 L280,10 L240,100 L200,10 L160,100 L120,10 L80,100 L40,10 L0,100 Z" fill="currentColor" />
</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%)]" />
@@ -173,30 +167,6 @@ export function PageTransitionShutter() {
/>
</motion.div>
{/* Background bore arc (full width, bottom) */}
<svg
viewBox="0 0 700 220"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="absolute bottom-0 left-0 w-full h-36 sm:h-52 opacity-[0.10] pointer-events-none"
>
<motion.path
d="M -50 60 C 120 60 180 180 350 180 C 520 180 580 60 750 60"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{ duration: 1.6, ease: [0.4, 0, 0.2, 1], delay: 0.2 }}
/>
<motion.line
x1="0" y1="60" x2="700" y2="60"
stroke="white" strokeWidth="0.8" strokeDasharray="8 12"
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{ duration: 1.2, ease: 'easeOut' }}
/>
</svg>
</motion.div>
</motion.div>
)}