Animated gradient blobs in hero - Apple Music style drifting

Author: prasad-kumkar

src/pages/index.module.css

@@ -82,13 +82,76 @@
   justify-content: center;
   padding: 4rem 2rem;
   position: relative;
-  background:
-    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(20, 50, 120, 0.25) 0%, transparent 70%),
-    radial-gradient(ellipse 40% 30% at 70% 60%, rgba(77, 139, 255, 0.1) 0%, transparent 60%),
-    linear-gradient(180deg, #000 0%, #050510 100%);
+  background: #000;
   overflow: hidden;
 }
 
+/* Animated gradient blobs */
+.blob1, .blob2, .blob3 {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(100px);
+  pointer-events: none;
+  will-change: transform;
+  z-index: 0;
+}
+
+.blob1 {
+  width: 50vw;
+  height: 50vw;
+  max-width: 700px;
+  max-height: 700px;
+  top: -15%;
+  left: -10%;
+  background: radial-gradient(circle, rgba(20, 50, 160, 0.5) 0%, transparent 70%);
+  animation: drift1 14s ease-in-out infinite;
+}
+
+.blob2 {
+  width: 40vw;
+  height: 40vw;
+  max-width: 550px;
+  max-height: 550px;
+  bottom: -10%;
+  right: -8%;
+  background: radial-gradient(circle, rgba(77, 139, 255, 0.35) 0%, transparent 70%);
+  animation: drift2 18s ease-in-out infinite;
+}
+
+.blob3 {
+  width: 30vw;
+  height: 30vw;
+  max-width: 400px;
+  max-height: 400px;
+  top: 40%;
+  left: 50%;
+  background: radial-gradient(circle, rgba(100, 60, 200, 0.2) 0%, transparent 70%);
+  animation: drift3 20s ease-in-out infinite;
+}
+
+@keyframes drift1 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  20% { transform: translate(6vw, 8vh) scale(1.15); }
+  40% { transform: translate(12vw, 3vh) scale(0.9); }
+  60% { transform: translate(4vw, 15vh) scale(1.1); }
+  80% { transform: translate(-3vw, 6vh) scale(0.95); }
+}
+
+@keyframes drift2 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  20% { transform: translate(-8vw, -5vh) scale(1.1); }
+  40% { transform: translate(-4vw, -12vh) scale(0.95); }
+  60% { transform: translate(-12vw, -2vh) scale(1.15); }
+  80% { transform: translate(-2vw, -8vh) scale(0.9); }
+}
+
+@keyframes drift3 {
+  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
+  25% { transform: translate(-8vw, 5vh) scale(1.2) rotate(10deg); }
+  50% { transform: translate(5vw, -8vh) scale(0.85) rotate(-5deg); }
+  75% { transform: translate(-3vw, -3vh) scale(1.1) rotate(8deg); }
+}
+
 /* Film grain overlay */
 .grain {
   position: absolute;
@@ -100,20 +163,6 @@
   z-index: 1;
 }
 
-/* Subtle radial glow behind title */
-.heroGlow {
-  position: absolute;
-  top: 30%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 500px;
-  height: 500px;
-  background: radial-gradient(circle, rgba(77, 139, 255, 0.08) 0%, transparent 70%);
-  border-radius: 50%;
-  pointer-events: none;
-  z-index: 1;
-}
-
 .heroInner {
   position: relative;
   z-index: 2;

src/pages/index.tsx

@@ -45,7 +45,9 @@ function Hero() {
   return (
     <section className={styles.hero}>
       <div className={styles.grain} />
-      <div className={styles.heroGlow} />
+      <div className={styles.blob1} />
+      <div className={styles.blob2} />
+      <div className={styles.blob3} />
       <div className={styles.heroInner}>
         <p className={styles.kicker}>Independent Cardano Full-Node</p>
         <h1 className={styles.title}>BlueMatter</h1>