From 17ab2743de4b93418400790f10f591c2c53a4ea0 Mon Sep 17 00:00:00 2001
From: EvanLin3141 <Evan.lin.3141@gmail.com>
Date: Thu, 30 Jan 2025 00:52:39 +0000
Subject: [PATCH] FEAT: Floating Effect

Implemented Floating Effect on AuthModel, need further adjustments
---
 frontend/src/components/Auth/AuthModal.tsx |  2 +-
 frontend/tailwind.config.js                | 20 +++++++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Auth/AuthModal.tsx b/frontend/src/components/Auth/AuthModal.tsx
index abca0d8..1f6fcf6 100644
--- a/frontend/src/components/Auth/AuthModal.tsx
+++ b/frontend/src/components/Auth/AuthModal.tsx
@@ -29,7 +29,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
       {/*Container*/}
       <div
         className="container fixed inset-0 flex flex-col items-center justify-around z-50 
-        h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem] transition-all"
+        h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem] transition-all animate-floating"
         style={{ "--spin-duration": spinDuration } as React.CSSProperties}
       >
 
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 11a8100..ed4c182 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -12,7 +12,8 @@ export default {
       animation: {
         moving_text_colour: "moving_text_colour 6s ease-in-out infinite alternate",
         moving_bg: 'moving_bg 200s linear infinite',
-        'border-spin': 'border-spin linear infinite', // No duration here
+        'border-spin': 'border-spin linear infinite', 
+        floating: "floating 30s linear infinite"
       },
 
 
@@ -30,6 +31,23 @@ export default {
             '100%': { backgroundPosition: '100% 0%' },
           }
         },
+
+        floating: {
+          '0%': { transform: 'translate(0px, -5px) rotateX(0deg) rotateY(0deg)' },
+          '5%': { transform: 'translate(-3px, -5.5px) rotateX(-0.35deg) rotateY(-0.55deg)' },
+          '10%': { transform: 'translate(-9px, -6.15px) rotateX(-1.1deg) rotateY(-1.23deg)' },
+          '13%': { transform: 'translate(-12px, -5.5px) rotateX(-1.9deg) rotateY(-1.34deg)' },
+          //Top Left
+          '20%': { transform: 'translate(-10px, -7px) rotateX(-2.5deg) rotateY(-1.5deg)' }, 
+          '25%': { transform: 'translate(-6px, -5px) rotateX(-1.75deg) rotateY(-0.65deg)' },
+          '30%': { transform: 'translate(-4px, -1px) rotateX(0.45deg) rotateY(-0.45deg)' },
+          '35%': { transform: 'translate(-7px, 4px) rotateX(1.85deg) rotateY(-1.5deg)' },
+          //Bottom Left
+          '40%': { transform: 'translate(-10px, 7px) rotateX(2.5deg) rotateY(-1.5deg)' },  /* Bottom-left tilt */
+          '60%': { transform: 'translate(10px, 7px) rotateX(2.5deg) rotateY(1.5deg)' },   /* Bottom-right tilt */
+          '80%': { transform: 'translate(10px, -7px) rotateX(-2.5deg) rotateY(1.5deg)' }, /* Top-right tilt */
+          '100%': { transform: 'translate(0px, -5px) rotateX(0deg) rotateY(0deg)' }, 
+        },
       },
     },
     plugins: [