From 8f49fe01247b5a2650ef767218e199cfb5d284b2 Mon Sep 17 00:00:00 2001
From: Mekan1206 <myradow207@gmail.com>
Date: Mon, 9 Feb 2026 22:41:53 +0500
Subject: [PATCH] 404 add animation

---
 resources/views/errors/404.blade.php | 55 +++++++++++++++++++++++++++-
 1 file changed, 53 insertions(+), 2 deletions(-)

diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
index e185315..458a63d 100644
--- a/resources/views/errors/404.blade.php
+++ b/resources/views/errors/404.blade.php
@@ -63,7 +63,7 @@
 
         /* change to alternating star opacities */
         .all-stars {
-            animation: blinkblink 7s linear infinite;
+            animation: blinkblink 4s linear infinite;
         }
 
         @keyframes blinkblink {
@@ -72,6 +72,25 @@
             }
         }
 
+        @keyframes float {
+            0% {
+                transform: translateY(0px);
+            }
+
+            50% {
+                transform: translateY(-25px);
+            }
+
+            100% {
+                transform: translateY(0px);
+            }
+        }
+
+        .floating-object {
+            animation: float 3s ease-in-out infinite;
+            transform-box: fill-box;
+        }
+
         .moon {}
 
         input[type=text] {
@@ -100,7 +119,7 @@
     <div class="notfound-copy">
         <svg aria-labelledby="404" alt="404 Page not found" class="not-found">
             <title id="svgtitle1">404 Page not found</title>
-            <g class="404-text">
+            <g class="404-text floating-object">
                 <g opacity=".5" fill="#3B3D3D">
                     <path
                         d="M320.1 209.5c0 7.2-6 12.5-13.7 12.5s-13.7-5.4-13.7-12.5v-16.3h-43.8c-8.4 0-14.1-6.4-14.1-13.5 0-.8.8-4.4 2-7L275 84.5c2-4.8 7.2-7.8 12.3-7.8 6.8 0 13.7 6 13.7 12.9 0 1.2 0 2.6-.8 4.4-11.5 26.7-20.9 47.6-32.4 74.2h24.9v-30.4c0-7.2 6-12.5 13.7-12.5 7.4 0 13.7 5.4 13.7 12.5v30.4h2.6c7.6 0 13.3 5.8 13.3 12.3 0 7-5.8 12.5-13.3 12.5h-2.6v16.5zM436.9 123.9v54.7c0 24.3-16.3 43.6-46 43.6s-46-19.3-46-43.6v-54.7c0-26.3 13.9-47.4 46-47.4 32.1.1 46 21.2 46 47.4zm-64.3-1.4v56.1c0 11.3 6.4 19.1 18.3 19.1s18.3-7.8 18.3-19.1v-56.1c0-12.7-5.2-21.7-18.3-21.7s-18.3 9-18.3 21.7zM535 209.5c0 7.2-6 12.5-13.7 12.5s-13.7-5.4-13.7-12.5v-16.3h-43.8c-8.4 0-14.1-6.4-14.1-13.5 0-.8.8-4.4 2-7l38.2-88.2c2-4.8 7.2-7.8 12.3-7.8 6.8 0 13.7 6 13.7 12.9 0 1.2 0 2.6-.8 4.4-11.5 26.7-20.9 47.6-32.4 74.2h24.9v-30.4c0-7.2 6-12.5 13.7-12.5 7.4 0 13.7 5.4 13.7 12.5v30.4h2.6c7.6 0 13.3 5.8 13.3 12.3 0 7-5.8 12.5-13.3 12.5H535v16.5z" />
@@ -137,6 +156,7 @@
         </g>
         <!-- Moon shadow -->
         <g class="moon">
+            <g class="floating-object">
             <path opacity=".5" fill="#3B3D3D" d="M122.7 373.9L-237.1 744l283.8 269.4 279.9-492.8z" />
             <!-- Moon color base -->
             <g fill="#D1D5D6">
@@ -170,8 +190,39 @@
                         d="M249 311.1c1.4-.1.5-1.1.8-1.8.2.1.4.1.6.2.7.3.7.3 1.3-.2.2.4.3.8.5 1.2l.3.3c.1-.1.2-.3.2-.4.1-.7.1-1.5.2-2.3l.6.6c.5-.4 1-.9 1.5-1.4.2.7.4 1.3.5 2 .3-.1.5-.1.8-.2-.3.7-.6 1.2-.9 1.8-.1.2-.1.4-.1.6.2-.1.4-.1.6-.2.3-.2.6-.4 1-.7 0 1.2 1.1.7 1.6 1.1-.1.2-.2.3-.4.5-.5.7-.5.7 0 1.3-.7.3-1.3.5-2 .8-.8.3-.8.3-1 1.2-.7-.2-1.3-.5-2.1-.7l-.3.9c0 .1-.2.2-.2.2 0-.1-.1-.2-.1-.3 0-.3.1-.5.2-.9-.7-.2-1.5-.3-2.3-.5.6-.7.1-1.2-.3-1.6-.1-.5-.5-1-1-1.5z" />
                 </g>
             </g>
+            </g>
         </g>
     </svg>
+    <script>
+        // Use requestAnimationFrame for smooth animation performance
+        let rafId = null;
+
+        document.addEventListener('mousemove', (e) => {
+            if (rafId) return;
+
+            rafId = requestAnimationFrame(() => {
+                const width = window.innerWidth;
+                const height = window.innerHeight;
+                const mouseX = e.clientX;
+                const mouseY = e.clientY;
+
+                const xVal = (mouseX - width / 2) / width;
+                const yVal = (mouseY - height / 2) / height;
+
+                const moon = document.querySelector('.moon');
+                const stars = document.querySelector('.all-stars');
+                const notFound = document.querySelector('.notfound-copy');
+
+                // Parallax factors - adjust multipliers to control speed/depth
+                if (moon) moon.style.transform = `translate(${xVal * 40}px, ${yVal * 40}px)`;
+                if (stars) stars.style.transform = `translate(${xVal * 20}px, ${yVal * 20}px)`;
+                // Inverse movement for foreground to create depth
+                if (notFound) notFound.style.transform = `translate(${xVal * -30}px, ${yVal * -30}px)`;
+                
+                rafId = null;
+            });
+        });
+    </script>
 </body>
 
 </html>