Full-screen gradient mesh hero bg - Apple Music style color fields

Author: prasad-kumkar

src/pages/index.module.css

@@ -79,105 +79,60 @@
   justify-content: center;
   padding: 4rem 2rem;
   position: relative;
-  background: #000;
+  background: #040410;
   overflow: hidden;
 }
 
-/* Animated gradient blobs - complex organic shapes */
+/* Full-screen gradient mesh - 5 layers */
 .blob1, .blob2, .blob3 {
   position: absolute;
-  filter: blur(80px);
+  inset: 0;
   pointer-events: none;
-  will-change: transform;
   z-index: 0;
-  opacity: 0.9;
 }
 
+/* Layer 1: deep base wash */
 .blob1 {
-  width: 55vw;
-  height: 55vw;
-  max-width: 800px;
-  max-height: 800px;
-  top: -20%;
-  left: -15%;
-  border-radius: 40% 60% 70% 30% / 50% 30% 70% 50%;
   background:
-    radial-gradient(circle at 30% 40%, rgba(15, 40, 180, 0.6) 0%, transparent 50%),
-    radial-gradient(circle at 70% 60%, rgba(60, 100, 220, 0.3) 0%, transparent 45%),
-    radial-gradient(circle at 50% 80%, rgba(30, 60, 140, 0.2) 0%, transparent 55%);
-  animation: morph1 16s ease-in-out infinite, drift1 14s ease-in-out infinite;
+    radial-gradient(ellipse 120% 80% at 20% 80%, #0a1628 0%, transparent 60%),
+    radial-gradient(ellipse 100% 100% at 80% 20%, #0c1a3d 0%, transparent 55%);
+  animation: field1 20s ease-in-out infinite;
 }
 
+/* Layer 2: primary color fields */
 .blob2 {
-  width: 45vw;
-  height: 45vw;
-  max-width: 650px;
-  max-height: 650px;
-  bottom: -15%;
-  right: -12%;
-  border-radius: 60% 40% 30% 70% / 40% 60% 40% 60%;
   background:
-    radial-gradient(circle at 60% 30%, rgba(77, 139, 255, 0.5) 0%, transparent 45%),
-    radial-gradient(circle at 30% 70%, rgba(40, 80, 200, 0.25) 0%, transparent 50%),
-    radial-gradient(circle at 80% 80%, rgba(100, 150, 255, 0.15) 0%, transparent 40%);
-  animation: morph2 20s ease-in-out infinite, drift2 18s ease-in-out infinite;
+    radial-gradient(ellipse 70% 60% at 15% 50%, rgba(20, 60, 180, 0.6) 0%, transparent 65%),
+    radial-gradient(ellipse 50% 70% at 85% 60%, rgba(60, 120, 255, 0.35) 0%, transparent 60%),
+    radial-gradient(ellipse 40% 50% at 50% 10%, rgba(30, 50, 120, 0.4) 0%, transparent 55%);
+  animation: field2 16s ease-in-out infinite;
 }
 
+/* Layer 3: highlights + accent */
 .blob3 {
-  width: 35vw;
-  height: 35vw;
-  max-width: 500px;
-  max-height: 500px;
-  top: 35%;
-  left: 45%;
-  border-radius: 50% 60% 40% 70% / 60% 40% 60% 40%;
   background:
-    radial-gradient(circle at 40% 50%, rgba(90, 50, 180, 0.3) 0%, transparent 50%),
-    radial-gradient(circle at 70% 30%, rgba(60, 80, 220, 0.2) 0%, transparent 45%);
-  animation: morph3 22s ease-in-out infinite, drift3 20s ease-in-out infinite;
-}
-
-@keyframes morph1 {
-  0%, 100% { border-radius: 40% 60% 70% 30% / 50% 30% 70% 50%; }
-  25% { border-radius: 60% 40% 30% 70% / 70% 50% 30% 60%; }
-  50% { border-radius: 30% 70% 50% 50% / 40% 60% 50% 40%; }
-  75% { border-radius: 70% 30% 60% 40% / 50% 40% 60% 50%; }
+    radial-gradient(ellipse 35% 40% at 30% 35%, rgba(80, 140, 255, 0.3) 0%, transparent 60%),
+    radial-gradient(ellipse 25% 35% at 75% 70%, rgba(100, 160, 255, 0.2) 0%, transparent 55%),
+    radial-gradient(ellipse 30% 25% at 55% 55%, rgba(60, 40, 150, 0.15) 0%, transparent 50%);
+  animation: field3 12s ease-in-out infinite;
 }
 
-@keyframes morph2 {
-  0%, 100% { border-radius: 60% 40% 30% 70% / 40% 60% 40% 60%; }
-  25% { border-radius: 40% 60% 50% 50% / 60% 30% 70% 40%; }
-  50% { border-radius: 50% 50% 40% 60% / 30% 70% 50% 50%; }
-  75% { border-radius: 30% 70% 60% 40% / 50% 40% 30% 70%; }
-}
-
-@keyframes morph3 {
-  0%, 100% { border-radius: 50% 60% 40% 70% / 60% 40% 60% 40%; }
-  33% { border-radius: 70% 30% 50% 50% / 40% 60% 30% 70%; }
-  66% { border-radius: 40% 50% 70% 30% / 50% 50% 40% 60%; }
-}
-
-@keyframes drift1 {
-  0%, 100% { transform: translate(0, 0) scale(1); }
-  20% { transform: translate(8vw, 10vh) scale(1.15); }
-  40% { transform: translate(15vw, 4vh) scale(0.9); }
-  60% { transform: translate(5vw, 18vh) scale(1.1); }
-  80% { transform: translate(-4vw, 8vh) scale(0.95); }
+@keyframes field1 {
+  0%, 100% { opacity: 1; transform: scale(1) translate(0, 0); }
+  50% { opacity: 0.85; transform: scale(1.05) translate(2%, -3%); }
 }
 
-@keyframes drift2 {
+@keyframes field2 {
   0%, 100% { transform: translate(0, 0) scale(1); }
-  20% { transform: translate(-10vw, -6vh) scale(1.1); }
-  40% { transform: translate(-5vw, -15vh) scale(0.95); }
-  60% { transform: translate(-14vw, -3vh) scale(1.15); }
-  80% { transform: translate(-3vw, -10vh) scale(0.9); }
+  25% { transform: translate(3%, 4%) scale(1.02); }
+  50% { transform: translate(-2%, 2%) scale(0.98); }
+  75% { transform: translate(1%, -3%) scale(1.03); }
 }
 
-@keyframes drift3 {
+@keyframes field3 {
   0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
-  25% { transform: translate(-10vw, 6vh) scale(1.25) rotate(15deg); }
-  50% { transform: translate(6vw, -10vh) scale(0.8) rotate(-8deg); }
-  75% { transform: translate(-4vw, -4vh) scale(1.15) rotate(10deg); }
+  33% { transform: translate(-4%, 3%) scale(1.08) rotate(1deg); }
+  66% { transform: translate(3%, -4%) scale(0.95) rotate(-1deg); }
 }
 
 /* Film grain overlay */