103 lines
3.4 KiB
TypeScript
103 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { Logo } from "./Logo";
|
|
|
|
export function Preloader() {
|
|
const [progress, setProgress] = useState(0);
|
|
const [complete, setComplete] = useState(false);
|
|
|
|
useEffect(() => {
|
|
document.body.style.overflow = "hidden";
|
|
window.scrollTo(0, 0);
|
|
|
|
const duration = 2500;
|
|
const interval = 25;
|
|
const steps = duration / interval;
|
|
let currentStep = 0;
|
|
|
|
const timer = setInterval(() => {
|
|
currentStep++;
|
|
const newProgress = Math.min(Math.floor((currentStep / steps) * 100), 100);
|
|
setProgress(newProgress);
|
|
|
|
if (currentStep >= steps) {
|
|
clearInterval(timer);
|
|
setTimeout(() => {
|
|
setComplete(true);
|
|
setTimeout(() => {
|
|
document.body.style.overflow = "auto";
|
|
}, 1000); // Wait for exit animation
|
|
}, 400); // Pause briefly at exactly 100%
|
|
}
|
|
}, interval);
|
|
|
|
return () => {
|
|
clearInterval(timer);
|
|
document.body.style.overflow = "auto";
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{!complete && (
|
|
<motion.div
|
|
initial={{ y: 0 }}
|
|
exit={{ y: "-100vh" }}
|
|
transition={{ duration: 0.9, ease: [0.76, 0, 0.24, 1] }}
|
|
className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[var(--ink)] text-white w-screen h-screen"
|
|
>
|
|
<div className="flex flex-col items-center justify-center gap-8 w-full px-6">
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
|
className="flex justify-center"
|
|
>
|
|
<Logo
|
|
variant="mark"
|
|
size="xl"
|
|
theme="dark"
|
|
className="w-32 h-auto md:w-48 lg:w-56 drop-shadow-[0_0_20px_rgba(232,255,0,0.15)]"
|
|
/>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3, ease: "easeOut" }}
|
|
className="text-center"
|
|
>
|
|
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight font-display mb-2">
|
|
<span style={{ color: "var(--slash)" }}>Evandro</span><span className="text-white">.dev.br</span>
|
|
</h1>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.6, duration: 0.5 }}
|
|
className="w-full max-w-[200px] mt-4"
|
|
>
|
|
<div className="h-[2px] w-full overflow-hidden bg-white/10 rounded-full">
|
|
<motion.div
|
|
className="h-full bg-[var(--slash)]"
|
|
initial={{ width: 0 }}
|
|
animate={{ width: `${progress}%` }}
|
|
transition={{ duration: 0.1, ease: "linear" }}
|
|
/>
|
|
</div>
|
|
<div className="mt-4 flex justify-center text-[11px] uppercase tracking-widest text-[var(--slash)] font-mono opacity-80">
|
|
{progress}%
|
|
</div>
|
|
</motion.div>
|
|
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|