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

feat: apply drill-bit tooth clip-path to PageTransitionShutter

Browse Source 
Former-commit-id: 9eab20dc309b3597d730fd6bc054417b1c35be4d
This commit is contained in:
Marc Mintel
2026-05-11 11:02:01 +02:00
parent c97ee638d9
commit 079398239f
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/providers/PageTransitionShutter.tsx
View File

@@ -17,8 +17,13 @@ export function PageTransitionShutter() {
initial={{ y: '100%' }}
animate={{ y: '0%' }}
exit={{ y: '-100%' }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
className="fixed inset-0 z-[9998] bg-[#050B14] pointer-events-none flex flex-col items-center justify-center overflow-hidden"
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"
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%)'
}}
>
{/* 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%)]" />