From 3bafa982ee523e8b9f18a4434a4aa9f02fa47305 Mon Sep 17 00:00:00 2001
From: NicholaiVogel <nicholai@biohazardvfx.com>
Date: Mon, 13 Oct 2025 01:40:37 -0600
Subject: [PATCH] added loading animation

---
 src/components/Temp-Placeholder.tsx | 203 ++++++++++++++++++++++------
 1 file changed, 159 insertions(+), 44 deletions(-)

diff --git a/src/components/Temp-Placeholder.tsx b/src/components/Temp-Placeholder.tsx
index 914e1fa..190b8fa 100644
--- a/src/components/Temp-Placeholder.tsx
+++ b/src/components/Temp-Placeholder.tsx
@@ -26,6 +26,30 @@ function extractYouTubeVideoId(url: string): string | null {
   return null;
 }
 
+// Animation variants for page load
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { 
+    opacity: 0, 
+    y: 20 
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+  },
+};
+
+
 export function TempPlaceholder() {
   const titleRef = useRef<HTMLHeadingElement | null>(null);
   const titleInnerRef = useRef<HTMLSpanElement | null>(null);
@@ -92,20 +116,54 @@ export function TempPlaceholder() {
             opacity={0.5}
             className="rounded"
           />
-          <div className="relative z-10">
-        <p className="text-sm text-gray-500 mb-6">Last updated: 10-12-2025</p>
+          <motion.div 
+            className="relative z-10"
+            variants={containerVariants}
+            initial="hidden"
+            animate="visible"
+            transition={{
+              staggerChildren: 0.1,
+              delayChildren: 0.1,
+            }}
+          >
+        <motion.p 
+          className="text-sm text-gray-500 mb-6"
+          variants={itemVariants}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+        >
+          Last updated: 10-12-2025
+        </motion.p>
 
-        <h1 ref={titleRef} className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 leading-tight">
+        <motion.h1 
+          ref={titleRef} 
+          className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 leading-tight"
+          variants={itemVariants}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+        >
           <span ref={titleInnerRef} className="inline-block">
             You've gotta be <em className="text-gray-400">shittin'</em> me.
           </span>
-        </h1>
-        <p className="text-base sm:text-lg mb-2 text-gray-300">This is the 20th time this has happened.</p>
-        <p className="text-base sm:text-lg mb-6 md:mb-8 text-gray-400">
+        </motion.h1>
+        <motion.p 
+          className="text-base sm:text-lg mb-2 text-gray-300"
+          variants={itemVariants}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+        >
+          This is the 20th time this has happened.
+        </motion.p>
+        <motion.p 
+          className="text-base sm:text-lg mb-6 md:mb-8 text-gray-400"
+          variants={itemVariants}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+        >
           <em>Nicholai broke the website, again.</em>
-        </p>
+        </motion.p>
 
-        <div className="mb-8">
+        <motion.div 
+          className="mb-8"
+          variants={itemVariants}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+        >
           <HorizontalAccordion trigger="How did we get here?">
             <div className="w-full">
               <p className="mb-4 text-gray-400 text-sm">
@@ -133,8 +191,8 @@ export function TempPlaceholder() {
               </ol>
             </div>
           </HorizontalAccordion>
-        </div>
-        <h1 
+        </motion.div>
+        <motion.h1 
           onClick={(e) => {
             setMousePosition({ x: e.clientX, y: e.clientY });
             setIsEasterEggOpen(true);
@@ -145,11 +203,13 @@ export function TempPlaceholder() {
             textShadow: '2px 2px 0px #ff4d00, 4px 4px 0px #ff4d00',
             width: titleWidth ? `${titleWidth}px` : undefined
           }}
+          variants={itemVariants}
+          transition={{ duration: 0.4, ease: "easeOut" }}
         >
           <span ref={bioTextRef} className="inline-block" style={{ fontSize: bioFontSizePx ? `${bioFontSizePx}px` : undefined }}>
             BIOHAZARD
           </span>
-        </h1>
+        </motion.h1>
         
         <AnimatePresence>
           {isEasterEggOpen && (
@@ -254,12 +314,20 @@ export function TempPlaceholder() {
             </>
           )}
         </AnimatePresence>
-        <p className="mb-6 md:mb-8 text-base sm:text-lg text-gray-300">
+        <motion.p 
+          className="mb-6 md:mb-8 text-base sm:text-lg text-gray-300"
+          variants={itemVariants}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+        >
           <strong>Who we are:</strong> artists and technical people, we're
           better at VFX than we are at web design, I promise.
-        </p>
+        </motion.p>
 
-        <p className="mb-4 text-base sm:text-lg">
+        <motion.p 
+          className="mb-4 text-base sm:text-lg"
+          variants={itemVariants}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+        >
           <strong>Here's our reel:</strong>{" "}
           <a
             href="https://f.io/Wgx3EAHu"
@@ -270,14 +338,26 @@ export function TempPlaceholder() {
           >
             Biohazard Reel Mar 2025 - Frame.io
           </a>
-        </p>
+        </motion.p>
 
-        <p className="mb-4 md:mb-6 text-base sm:text-lg">
+        <motion.p 
+          className="mb-4 md:mb-6 text-base sm:text-lg"
+          variants={itemVariants}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+        >
           <strong>Some projects we've worked on:</strong>
-        </p>
+        </motion.p>
 
-        <ul className="mb-6 md:mb-8 space-y-3 md:space-y-4 text-sm sm:text-base">
-          <li className="flex items-start">
+        <motion.ul 
+          className="mb-6 md:mb-8 space-y-3 md:space-y-4 text-sm sm:text-base"
+          variants={itemVariants}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+        >
+          <motion.li 
+            className="flex items-start"
+            variants={itemVariants}
+            transition={{ duration: 0.4, ease: "easeOut" }}
+          >
             <span className="text-gray-400 mr-3 mt-1">•</span>
             <a
               href="https://www.instagram.com/biohazardvfx/"
@@ -288,8 +368,12 @@ export function TempPlaceholder() {
             >
               Gstar Raw - Pommelhorse
             </a>
-          </li>
-          <li className="flex items-start">
+          </motion.li>
+          <motion.li 
+            className="flex items-start"
+            variants={itemVariants}
+            transition={{ duration: 0.4, ease: "easeOut" }}
+          >
             <span className="text-gray-400 mr-3 mt-1">•</span>
             <HoverCard>
               <HoverCardTrigger asChild>
@@ -305,7 +389,7 @@ export function TempPlaceholder() {
                   <span className="hidden sm:inline"> (feat. Morgan Wallen)</span>
                 </a>
               </HoverCardTrigger>
-              <HoverCardContent className="w-80 p-0 bg-black border-gray-800">
+              <HoverCardContent className="w-80 p-0 bg-black border-gray-800 z-50">
                 <iframe
                   width="320"
                   height="180"
@@ -318,8 +402,12 @@ export function TempPlaceholder() {
                 />
               </HoverCardContent>
             </HoverCard>
-          </li>
-          <li className="flex items-start">
+          </motion.li>
+          <motion.li 
+            className="flex items-start"
+            variants={itemVariants}
+            transition={{ duration: 0.4, ease: "easeOut" }}
+          >
             <span className="text-gray-400 mr-3 mt-1">•</span>
             <HoverCard>
               <HoverCardTrigger asChild>
@@ -333,7 +421,7 @@ export function TempPlaceholder() {
                   The Wait Is Over | OFFICIAL TRAILER
                 </a>
               </HoverCardTrigger>
-              <HoverCardContent className="w-80 p-0 bg-black border-gray-800">
+              <HoverCardContent className="w-80 p-0 bg-black border-gray-800 z-50">
                 <iframe
                   width="320"
                   height="180"
@@ -346,8 +434,12 @@ export function TempPlaceholder() {
                 />
               </HoverCardContent>
             </HoverCard>
-          </li>
-          <li className="flex items-start">
+          </motion.li>
+          <motion.li 
+            className="flex items-start"
+            variants={itemVariants}
+            transition={{ duration: 0.4, ease: "easeOut" }}
+          >
             <span className="text-gray-400 mr-3 mt-1">•</span>
             <HoverCard>
               <HoverCardTrigger asChild>
@@ -361,7 +453,7 @@ export function TempPlaceholder() {
                   2hollis Star Album Trailer
                 </a>
               </HoverCardTrigger>
-              <HoverCardContent className="w-80 p-0 bg-black border-gray-800">
+              <HoverCardContent className="w-80 p-0 bg-black border-gray-800 z-50">
                 <iframe
                   width="320"
                   height="180"
@@ -374,8 +466,12 @@ export function TempPlaceholder() {
                 />
               </HoverCardContent>
             </HoverCard>
-          </li>
-          <li className="flex items-start">
+          </motion.li>
+          <motion.li 
+            className="flex items-start"
+            variants={itemVariants}
+            transition={{ duration: 0.4, ease: "easeOut" }}
+          >
             <span className="text-gray-400 mr-3 mt-1">•</span>
             <HoverCard>
               <HoverCardTrigger asChild>
@@ -389,7 +485,7 @@ export function TempPlaceholder() {
                   Thanksgiving With Kai, Kevin &amp; Druski
                 </a>
               </HoverCardTrigger>
-              <HoverCardContent className="w-80 p-0 bg-black border-gray-800">
+              <HoverCardContent className="w-80 p-0 bg-black border-gray-800 z-50">
                 <iframe
                   width="320"
                   height="180"
@@ -402,8 +498,12 @@ export function TempPlaceholder() {
                 />
               </HoverCardContent>
             </HoverCard>
-          </li>
-          <li className="flex items-start">
+          </motion.li>
+          <motion.li 
+            className="flex items-start"
+            variants={itemVariants}
+            transition={{ duration: 0.4, ease: "easeOut" }}
+          >
             <span className="text-gray-400 mr-3 mt-1">•</span>
             <HoverCard>
               <HoverCardTrigger asChild>
@@ -419,7 +519,7 @@ export function TempPlaceholder() {
                   <span className="hidden sm:inline"> (With or Without You) Official MV</span>
                 </a>
               </HoverCardTrigger>
-              <HoverCardContent className="w-80 p-0 bg-black border-gray-800">
+              <HoverCardContent className="w-80 p-0 bg-black border-gray-800 z-50">
                 <iframe
                   width="320"
                   height="180"
@@ -432,12 +532,21 @@ export function TempPlaceholder() {
                 />
               </HoverCardContent>
             </HoverCard>
-          </li>
-        </ul>
+          </motion.li>
+        </motion.ul>
 
-        <InstagramFeed />
+        <motion.div 
+          variants={itemVariants}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+        >
+          <InstagramFeed />
+        </motion.div>
 
-        <p className="mb-2 text-sm sm:text-base text-gray-300">
+        <motion.p 
+          className="mb-2 text-sm sm:text-base text-gray-300"
+          variants={itemVariants}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+        >
         Contact us:{" "}
           <a
             href="mailto:contact@biohazardvfx.com"
@@ -448,8 +557,12 @@ export function TempPlaceholder() {
           >
             contact@biohazardvfx.com
           </a>
-        </p>
-        <p className="text-sm sm:text-base text-gray-300">
+        </motion.p>
+        <motion.p 
+          className="text-sm sm:text-base text-gray-300"
+          variants={itemVariants}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+        >
           File a complaint:{" "}
           <a
             href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
@@ -460,18 +573,20 @@ export function TempPlaceholder() {
           >
             help@biohazardvfx.com
           </a>
-        </p>
+        </motion.p>
         
-        <p 
+        <motion.p 
           onClick={(e) => {
             setPigeonMousePosition({ x: e.clientX, y: e.clientY });
             setIsPigeonEggOpen(true);
           }}
           className="text-xs text-gray-600 mt-4 cursor-pointer hover:text-gray-500 transition-colors"
+          variants={itemVariants}
+          transition={{ duration: 0.4, ease: "easeOut" }}
         >
           No pigeons allowed in this zone 
-        </p>
-          </div>
+        </motion.p>
+          </motion.div>
         </div>
       </div>
     </section>