34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
import { motion } from 'motion/react'
|
|
import logoImage from '../assets/logo.png'
|
|
|
|
export const SplashApp = () => {
|
|
return (
|
|
<main className="m-0 flex h-screen w-screen cursor-default select-none items-center justify-center overflow-hidden bg-white font-sans antialiased">
|
|
<motion.section
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="flex flex-col items-center gap-8"
|
|
initial={{ opacity: 0, y: 4 }}
|
|
transition={{
|
|
duration: 1,
|
|
ease: [0.16, 1, 0.3, 1],
|
|
}}
|
|
>
|
|
<img alt="Logo" className="h-20 w-auto object-contain" draggable={false} src={logoImage} />
|
|
|
|
<div className="relative h-[4px] w-36 overflow-hidden rounded-full bg-zinc-100">
|
|
<motion.div
|
|
animate={{ x: '100%' }}
|
|
className="h-full w-full bg-zinc-800"
|
|
initial={{ x: '-100%' }}
|
|
transition={{
|
|
duration: 2,
|
|
ease: [0.4, 0, 0.2, 1],
|
|
repeat: Infinity,
|
|
}}
|
|
/>
|
|
</div>
|
|
</motion.section>
|
|
</main>
|
|
)
|
|
}
|