import React, { useState, useEffect, useRef } from 'react'; const App = () => { const [isRevealed, setIsRevealed] = useState(false); const [isImageLoaded, setIsImageLoaded] = useState(false); const containerRef = useRef(null); // User's Logo URL const logoUrl = 'https://assets.cdn.filesafe.space/ErkfUxnq0ruMuqM4fZOK/media/69b719305b89c7b2c8a8c764.png'; // Sequence Timing useEffect(() => { if (isImageLoaded) { // Small delay so it doesn't snap in immediately upon loading const timer = setTimeout(() => { setIsRevealed(true); }, 300); return () => clearTimeout(timer); } }, [isImageLoaded]); const replay = () => { setIsRevealed(false); setTimeout(() => setIsRevealed(true), 400); }; const handleDoubleClick = () => { if (!document.fullscreenElement) { containerRef.current?.requestFullscreen().catch((err) => { console.error(`Error attempting to enable fullscreen: ${err.message}`); }); } else { document.exitFullscreen(); } }; return (
{/* Very subtle background vignette */}
{/* Center Container */}
{/* Loading Indicator (Minimalist) */} {!isImageLoaded && (
)} {/* The Base Logo - Smooth Fade & Focus Pull */} Infinity Personal Training setIsImageLoaded(true)} className={`absolute inset-0 w-full h-full object-contain will-change-transform will-change-filter ${ isRevealed ? 'animate-premium-resolve' : 'opacity-0 scale-110 blur-xl translate-y-4' }`} /> {/* Soft Drop Shadow Glow - Fades in behind the logo */} Glow {/* Single Refined Light Sweep (Shimmer) */} {isRevealed && isImageLoaded && (
)}
{/* Minimalist Replay Button */}
{/* CSS Animations */}