File size: 2,689 Bytes
0cb1aa7 0b03358 0cb1aa7 c21b456 0b03358 0cb1aa7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | import React from 'react';
import { motion } from 'framer-motion';
import { Bot } from 'lucide-react';
import AubixIcon from './AubixIcon';
const SplashScreen: React.FC = () => {
return (
<motion.div
initial={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.8 }}
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
background: 'var(--bg-dark)',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
zIndex: 9999,
}}
>
<motion.div
initial={{ scale: 0.5, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{
type: "spring",
stiffness: 260,
damping: 20,
delay: 0.2
}}
>
<AubixIcon size={180} />
</motion.div>
<motion.h1
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.4 }}
style={{
fontSize: '3rem',
fontWeight: 'bold',
background: 'linear-gradient(to right, #fff, #6e59ff)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
marginBottom: 'var(--space-md)'
}}
>
Aubm
</motion.h1>
<motion.div
initial={{ scaleX: 0 }}
animate={{ scaleX: 1 }}
transition={{ delay: 0.6, duration: 1.5, ease: "easeInOut" }}
style={{
width: '200px',
height: '4px',
background: 'rgba(255,255,255,0.1)',
borderRadius: '2px',
overflow: 'hidden',
position: 'relative'
}}
>
<motion.div
animate={{
x: ['-100%', '100%']
}}
transition={{
repeat: Infinity,
duration: 1.5,
ease: "linear"
}}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
background: 'var(--accent)',
boxShadow: '0 0 10px var(--accent)'
}}
/>
</motion.div>
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 1.2 }}
style={{
marginTop: 'var(--space-lg)',
color: 'var(--text-dim)',
fontSize: '0.9rem',
letterSpacing: '2px',
textTransform: 'uppercase'
}}
>
Orchestrating Intelligence
</motion.p>
</motion.div>
);
};
export default SplashScreen;
|