wehub-resource-sync
74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
|
|
type Props = {
|
|
fadingOut?: boolean;
|
|
};
|
|
|
|
export const BootSplash: React.FC<Props> = ({ fadingOut = false }) => (
|
|
<div
|
|
className={[
|
|
'fixed inset-0 z-[9999] flex items-center justify-center overflow-hidden',
|
|
'transition-opacity duration-300 ease-out',
|
|
fadingOut ? 'opacity-0 pointer-events-none' : 'opacity-100',
|
|
].join(' ')}
|
|
style={{ background: '#08090d' }}
|
|
aria-hidden={fadingOut ? 'true' : undefined}
|
|
>
|
|
{/* Aurora glow — slow breathing, sits behind the wordmark for depth */}
|
|
<div
|
|
className="absolute pointer-events-none"
|
|
style={{
|
|
width: '440px',
|
|
height: '440px',
|
|
borderRadius: '50%',
|
|
background:
|
|
'radial-gradient(circle, rgba(99,102,241,0.24) 0%, rgba(56,189,248,0.08) 38%, rgba(8,9,13,0) 72%)',
|
|
filter: 'blur(20px)',
|
|
animation: 'boot-aurora 4.8s ease-in-out infinite',
|
|
}}
|
|
/>
|
|
|
|
<div className="relative flex flex-col items-center select-none">
|
|
<div
|
|
className="boot-shimmer leading-none"
|
|
style={{
|
|
fontFamily:
|
|
'Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
|
|
fontSize: '26px',
|
|
fontWeight: 500,
|
|
letterSpacing: '-0.012em',
|
|
}}
|
|
>
|
|
MobileGym
|
|
</div>
|
|
</div>
|
|
|
|
<style>{`
|
|
@keyframes boot-aurora {
|
|
0%, 100% { opacity: 0.72; transform: scale(1); }
|
|
50% { opacity: 1; transform: scale(1.06); }
|
|
}
|
|
@keyframes boot-shimmer-sweep {
|
|
0% { background-position: 220% 0; }
|
|
100% { background-position: -120% 0; }
|
|
}
|
|
.boot-shimmer {
|
|
background-image: linear-gradient(
|
|
110deg,
|
|
rgba(255,255,255,0.42) 0%,
|
|
rgba(255,255,255,0.42) 38%,
|
|
rgba(255,255,255,1) 50%,
|
|
rgba(255,255,255,0.42) 62%,
|
|
rgba(255,255,255,0.42) 100%
|
|
);
|
|
background-size: 240% 100%;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: boot-shimmer-sweep 3s ease-in-out infinite;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|