36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { useTransition } from './TransitionProvider';
|
|
|
|
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-primary-dark pointer-events-none flex flex-col items-center justify-center overflow-hidden"
|
|
>
|
|
{/* E-TIB Premium Glow inside the Shutter */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent/20 via-transparent to-transparent opacity-50" />
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 1.1 }}
|
|
transition={{ duration: 0.4, delay: 0.2 }}
|
|
className="w-16 h-16 border-t-2 border-r-2 border-primary rounded-full animate-spin"
|
|
/>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|