Add spectrumwave animation by Mithlesh-95 (#2964)

Mithlesh-95 · LaurelineP · web-flow · commit eca6b49a5558 · 2025-07-15T11:18:50.000+02:00
* Create index.html

* Create style.css

* Create meta.json

* Rename

* Rename

* Rename

* Update index.html

* Rename style.css to styles.css

---------

Co-authored-by: Laureline Paris &lt;32878345+LaurelineP@users.noreply.github.com&gt;
diff --git a/Art/Mithlesh-95-spectrumwave/index.html b/Art/Mithlesh-95-spectrumwave/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Pulsing Spectrum Waves</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <div class="wave-container">
+    <div class="bar bar1"></div>
+    <div class="bar bar2"></div>
+    <div class="bar bar3"></div>
+    <div class="bar bar4"></div>
+    <div class="bar bar5"></div>
+    <div class="bar bar6"></div>
+    <div class="bar bar7"></div>
+  </div>
+</body>
+</html>
diff --git a/Art/Mithlesh-95-spectrumwave/meta.json b/Art/Mithlesh-95-spectrumwave/meta.json
@@ -0,0 +1,4 @@
+{
+  "artName": "spectrumwave",
+  "githubHandle": "Mithlesh-95"
+}
diff --git a/Art/Mithlesh-95-spectrumwave/styles.css b/Art/Mithlesh-95-spectrumwave/styles.css
@@ -0,0 +1,38 @@
+body {
+  background-color: #111;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.wave-container {
+  display: flex;
+  gap: 10px;
+}
+
+.bar {
+  width: 10px;
+  height: 60px;
+  background: linear-gradient(180deg, #ff5f6d, #ffc371);
+  border-radius: 10px;
+  animation: pulse 1.2s ease-in-out infinite;
+  transform-origin: bottom;
+}
+
+.bar1 { animation-delay: 0s; background: #ff5f6d; }
+.bar2 { animation-delay: 0.1s; background: #ffc371; }
+.bar3 { animation-delay: 0.2s; background: #47e4c2; }
+.bar4 { animation-delay: 0.3s; background: #7158e2; }
+.bar5 { animation-delay: 0.4s; background: #ff6b81; }
+.bar6 { animation-delay: 0.5s; background: #0be881; }
+.bar7 { animation-delay: 0.6s; background: #18dcff; }
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scaleY(1);
+  }
+  50% {
+    transform: scaleY(2.2);
+  }
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "artName": "spectrumwave",
 +  "githubHandle": "Mithlesh-95"
 +}