From cff41423fc70abd1c3e048e607d00910af4a67e7 Mon Sep 17 00:00:00 2001
From: Majorfi <major-tom.eth@pm.me>
Date: Thu, 26 Oct 2023 12:34:55 +0200
Subject: [PATCH] fix: improve entrance animation

---
 pages/vaults-v3/index.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/pages/vaults-v3/index.tsx b/pages/vaults-v3/index.tsx
index 0091fedf4..1360a5c0f 100644
--- a/pages/vaults-v3/index.tsx
+++ b/pages/vaults-v3/index.tsx
@@ -38,13 +38,20 @@ function Counter({value}: {value: number}): ReactElement {
 	return <motion.span>{display}</motion.span>;
 }
 
-// // After delay
-// animation-delay: 1ms;
-// // Change to: "Color 2";
-// // Animate: Smart animate;
-// animation-timing-function: linear;
-// animation-duration: 2000ms;
-
+function Background(): ReactElement {
+	return (
+		<motion.div
+			transition={{duration: 10, delay: 0, repeat: Infinity, ease: 'linear'}}
+			animate={{
+				background: [
+					`linear-gradient(0deg, #D21162 24.91%, #2C3DA6 99.66%)`,
+					`linear-gradient(360deg, #D21162 24.91%, #2C3DA6 99.66%)`
+				]
+			}}
+			className={cl('absolute inset-0', 'pointer-events-none')}
+		/>
+	);
+}
 function BrandNewVaultCard(): ReactElement {
 	return (
 		<div
@@ -71,14 +78,7 @@ function BrandNewVaultCard(): ReactElement {
 					</button>
 				</div>
 			</div>
-			<div
-				className={cl(
-					'absolute -inset-80 rounded-3xl',
-					'pointer-events-none',
-					'bg-[linear-gradient(73deg,_#D21162_24.91%,_#2C3DA6_99.66%)]',
-					'animate-spin-slow'
-				)}
-			/>
+			<Background />
 		</div>
 	);
 }