From e2aad2372223bfa7ad7848a7c851ac003ce703ce Mon Sep 17 00:00:00 2001
From: maamokun/MikanDev <maamo-kun@outlook.com>
Date: Sat, 27 Jul 2024 06:53:12 +0900
Subject: [PATCH] add: cinematic loader to homepage

---
 app/[lng]/page.tsx         |  2 +
 app/ui/CinematicLoader.tsx | 96 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 98 insertions(+)
 create mode 100644 app/ui/CinematicLoader.tsx

diff --git a/app/[lng]/page.tsx b/app/[lng]/page.tsx
index 3150668..c38bfec 100644
--- a/app/[lng]/page.tsx
+++ b/app/[lng]/page.tsx
@@ -4,6 +4,7 @@ import SpinningGallery from "../ui/SpinningGallery";
 import { useClientTranslation } from "../i18n/client";
 import { Button, Heading, Card, Center, Flex } from "@neodyland/ui";
 import { useRouter } from "next/navigation";
+import CinematicLoader from "../ui/CinematicLoader";
 import Image from "next/image";
 import mikanLogo from "../assets/mikandev-circle.webp";
 import mikan from "../assets/mikan.png";
@@ -66,6 +67,7 @@ export default function Home({ params: { lng } }: Props) {
 
     return (
         <>
+            <CinematicLoader />
             <div className="relative">
                 <Card className="mt-20">
                     <Center className="mt-5">
diff --git a/app/ui/CinematicLoader.tsx b/app/ui/CinematicLoader.tsx
new file mode 100644
index 0000000..ea5d4c2
--- /dev/null
+++ b/app/ui/CinematicLoader.tsx
@@ -0,0 +1,96 @@
+import Image from "next/image";
+import React, { useState, useEffect } from "react";
+import mikanLogo from "@/app/assets/mikan-vtube.svg";
+import { motion, AnimatePresence } from "framer-motion";
+
+
+const backgroundVariants = {
+  initial: { opacity: 1 },
+  exit: { opacity: 0, transition: { duration: 0.8 } }
+};
+
+const imageVariants = {
+    initial: { opacity: 0, scale: 1, y: 0 },
+    animate: { 
+      opacity: 1, 
+      scale: 1, 
+      y: -30,
+      transition: { 
+        opacity: { duration: 0.8, ease: "easeOut" },
+        y: { delay: 0.8, duration: 1, ease: "easeInOut" }
+      }
+    },
+    exit: { 
+      opacity: 0, 
+      rotate: 90, 
+      scale: 10, 
+      transition: { duration: 0.8 } 
+    }
+  };
+
+const textVariants = {
+  initial: { opacity: 0, y: 0 },
+  animate: { 
+    opacity: 1,
+    transition: { delay: 1, duration: 0.5 }
+  },
+  exit: { 
+    opacity: 0,
+    transition: { duration: 0.8 } 
+  }
+};
+
+export default function CinematicLoader() {
+  const [isVisible, setIsVisible] = useState(true);
+  const [showWelcome, setShowWelcome] = useState(false);
+
+  useEffect(() => {
+    const welcomeTimer = setTimeout(() => {
+      setShowWelcome(true);
+    }, 1000);
+
+    const exitTimer = setTimeout(() => {
+      setIsVisible(false);
+    }, 4000); // Increased to 4 seconds to allow time for the new animations
+
+    return () => {
+      clearTimeout(welcomeTimer);
+      clearTimeout(exitTimer);
+    };
+  }, []);
+
+  return (
+    <AnimatePresence>
+      {isVisible && (
+        <>
+          <motion.div 
+            className="fixed inset-0 bg-on-tertiary pointer-events-none z-40"
+            variants={backgroundVariants}
+            initial="initial"
+            exit="exit"
+          />
+          <motion.div
+            className="fixed inset-0 flex flex-col items-center justify-center pointer-events-none z-50"
+            variants={imageVariants}
+            initial="initial"
+            animate={["animate", "moveUp"]}
+            exit="exit"
+          >
+            <Image src={mikanLogo} alt="Logo" width={700} height={700} />
+            {showWelcome && (
+              <motion.div
+                className="text-4xl font-bold text-white mt-4"
+                variants={textVariants}
+                initial="initial"
+                animate="animate"
+                exit="exit"
+              >
+                Welcome to MikanDev!
+              </motion.div>
+            )}
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
\ No newline at end of file