82 lines
3.3 KiB
TypeScript
82 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { useTransition } from './TransitionProvider';
|
|
import Image from 'next/image';
|
|
|
|
export function PageTransitionShutter() {
|
|
const { isTransitioning } = useTransition();
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{isTransitioning && (
|
|
<motion.div
|
|
key="shutter"
|
|
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"
|
|
>
|
|
{/* 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%)]" />
|
|
|
|
{/* Deep Glow inside the Shutter */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent opacity-80 mix-blend-screen" />
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 1.05 }}
|
|
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) */}
|
|
<motion.div
|
|
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/50 to-transparent skew-x-[-25deg]"
|
|
initial={{ left: '-150%' }}
|
|
animate={{ left: '250%' }}
|
|
transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.2 }}
|
|
style={{ mixBlendMode: 'overlay' }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Extremely minimalist transition indicator */}
|
|
<motion.div
|
|
className="mt-6 flex gap-1"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.3 }}
|
|
>
|
|
{[0, 1, 2].map((i) => (
|
|
<motion.div
|
|
key={i}
|
|
className="w-1.5 h-1.5 rounded-full bg-primary"
|
|
initial={{ opacity: 0.3, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{
|
|
duration: 0.4,
|
|
repeat: Infinity,
|
|
repeatType: "reverse",
|
|
delay: i * 0.15
|
|
}}
|
|
/>
|
|
))}
|
|
</motion.div>
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|