50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { useEffect, useState } from "react"
|
||
|
|
import Image from "next/image"
|
||
|
|
|
||
|
|
export function RevealScreen() {
|
||
|
|
const [isVisible, setIsVisible] = useState(true)
|
||
|
|
const [isAnimating, setIsAnimating] = useState(false)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
// Start fade out animation after 2 seconds
|
||
|
|
const timer = setTimeout(() => {
|
||
|
|
setIsAnimating(true)
|
||
|
|
// Remove the component after animation completes
|
||
|
|
setTimeout(() => {
|
||
|
|
setIsVisible(false)
|
||
|
|
}, 500)
|
||
|
|
}, 2000)
|
||
|
|
|
||
|
|
return () => clearTimeout(timer)
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
if (!isVisible) return null
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-500 ${
|
||
|
|
isAnimating ? "opacity-0" : "opacity-100"
|
||
|
|
}`}
|
||
|
|
style={{ backgroundColor: "#118a69" }}
|
||
|
|
>
|
||
|
|
<div className="flex flex-col items-center">
|
||
|
|
<div className="relative w-48 h-48 sm:w-64 sm:h-64 animate-pulse">
|
||
|
|
<Image
|
||
|
|
src="/images/meti-logo.png"
|
||
|
|
alt="METI Logo"
|
||
|
|
fill
|
||
|
|
style={{ objectFit: "contain" }}
|
||
|
|
priority
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="mt-8 flex space-x-2">
|
||
|
|
<div className="w-3 h-3 bg-white rounded-full animate-bounce" style={{ animationDelay: "0ms" }}></div>
|
||
|
|
<div className="w-3 h-3 bg-white rounded-full animate-bounce" style={{ animationDelay: "150ms" }}></div>
|
||
|
|
<div className="w-3 h-3 bg-white rounded-full animate-bounce" style={{ animationDelay: "300ms" }}></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|