forked from imbytecat/fullstack-starter
feat(desktop): 迁移启动页到 React 并接入 Motion 动画
This commit is contained in:
49
apps/desktop/src/renderer/components/SplashApp.tsx
Normal file
49
apps/desktop/src/renderer/components/SplashApp.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
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] as [number, number, number, number],
|
||||
}}
|
||||
>
|
||||
<img
|
||||
alt="Logo"
|
||||
className="h-11 w-auto object-contain"
|
||||
draggable={false}
|
||||
src={logoImage}
|
||||
/>
|
||||
|
||||
<div className="relative h-[2px] w-24 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] as [number, number, number, number],
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<motion.p
|
||||
animate={{ opacity: [0.35, 0.8, 0.35] }}
|
||||
className="text-[10px] font-medium uppercase tracking-widest text-zinc-400"
|
||||
transition={{
|
||||
duration: 2.8,
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
}}
|
||||
>
|
||||
Starting
|
||||
</motion.p>
|
||||
</motion.section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user