62 lines
2.9 KiB
TypeScript
62 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
const PageLoader: React.FC = () => {
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-stone-100 dark:bg-stone-900">
|
|
<div className="relative">
|
|
{/* Animated Pottery Outline */}
|
|
<motion.svg
|
|
width="120"
|
|
height="160"
|
|
viewBox="0 0 120 160"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<motion.path
|
|
d="M30 150C30 155.523 34.4772 160 40 160H80C85.5228 160 90 155.523 90 150V140H30V150Z"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
className="text-stone-800 dark:text-stone-200"
|
|
initial={{ pathLength: 0, opacity: 0 }}
|
|
animate={{ pathLength: 1, opacity: 1 }}
|
|
transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatType: "reverse" }}
|
|
/>
|
|
<motion.path
|
|
d="M30 140C30 140 10 100 10 60C10 32.3858 32.3858 10 60 10C87.6142 10 110 32.3858 110 60C110 100 90 140 90 140H30Z"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
className="text-stone-800 dark:text-stone-200"
|
|
initial={{ pathLength: 0, opacity: 0 }}
|
|
animate={{ pathLength: 1, opacity: 1 }}
|
|
transition={{ duration: 2, ease: "easeInOut", repeat: Infinity, repeatType: "reverse", delay: 0.5 }}
|
|
/>
|
|
<motion.ellipse
|
|
cx="60"
|
|
cy="10"
|
|
rx="25"
|
|
ry="5"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
className="text-stone-800 dark:text-stone-200"
|
|
initial={{ pathLength: 0, opacity: 0 }}
|
|
animate={{ pathLength: 1, opacity: 1 }}
|
|
transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatType: "reverse", delay: 1 }}
|
|
/>
|
|
</motion.svg>
|
|
|
|
<motion.div
|
|
className="mt-8 text-center"
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, repeat: Infinity, repeatType: "reverse" }}
|
|
>
|
|
<span className="font-display text-sm tracking-[0.3em] uppercase text-stone-500">Shaping</span>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PageLoader;
|