From c15da6bb2284ef87cb4109cc5d05a56f998cd537 Mon Sep 17 00:00:00 2001
From: Kanishk Chhabra <67221487+mrkc2303@users.noreply.github.com>
Date: Fri, 3 Oct 2025 20:14:20 -0500
Subject: [PATCH] Added a new animation neon bars
---
Art/mrkc2303-neon-bars/index.html | 29 ++++++++++
Art/mrkc2303-neon-bars/meta.json | 4 ++
Art/mrkc2303-neon-bars/styles.css | 96 +++++++++++++++++++++++++++++++
3 files changed, 129 insertions(+)
create mode 100644 Art/mrkc2303-neon-bars/index.html
create mode 100644 Art/mrkc2303-neon-bars/meta.json
create mode 100644 Art/mrkc2303-neon-bars/styles.css
diff --git a/Art/mrkc2303-neon-bars/index.html b/Art/mrkc2303-neon-bars/index.html
new file mode 100644
index 000000000..78304550a
--- /dev/null
+++ b/Art/mrkc2303-neon-bars/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ Neon Bars Equalizer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Art/mrkc2303-neon-bars/meta.json b/Art/mrkc2303-neon-bars/meta.json
new file mode 100644
index 000000000..20c107207
--- /dev/null
+++ b/Art/mrkc2303-neon-bars/meta.json
@@ -0,0 +1,4 @@
+{
+ "artName": "eclipse",
+ "githubHandle": "mrkc2303"
+}
diff --git a/Art/mrkc2303-neon-bars/styles.css b/Art/mrkc2303-neon-bars/styles.css
new file mode 100644
index 000000000..d24489beb
--- /dev/null
+++ b/Art/mrkc2303-neon-bars/styles.css
@@ -0,0 +1,96 @@
+* {
+ box-sizing: border-box;
+}
+
+html,
+body {
+ height: 100%;
+}
+
+body {
+ margin: 0;
+ background: radial-gradient(1000px 700px at 50% 50%, #0a0e19 0%, #04070d 60%, #02040a 100%);
+ display: grid;
+ place-items: center;
+ font-family: system-ui, sans-serif;
+}
+
+.wrap {
+ width: min(90vmin, 760px);
+ aspect-ratio: 16/9;
+ border-radius: 20px;
+ background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0));
+ box-shadow: 0 10px 40px rgba(0, 0, 0, .6), inset 0 0 60px rgba(255, 255, 255, .05);
+ display: grid;
+ place-items: end center;
+ overflow: hidden;
+ padding: 3vmin 4vmin;
+ position: relative;
+}
+
+/* subtle grid backdrop */
+.wrap::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(transparent 95%, rgba(255, 255, 255, .05) 0) 0 0/100% 8%,
+ linear-gradient(90deg, transparent 95%, rgba(255, 255, 255, .05) 0) 0 0/8% 100%;
+ opacity: .3;
+ pointer-events: none;
+}
+
+.bars {
+ width: 100%;
+ height: 80%;
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ align-items: end;
+ gap: clamp(6px, 1vw, 14px);
+}
+
+.bars span {
+ height: 15%;
+ border-radius: 999px;
+ background:
+ linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)),
+ linear-gradient(180deg, #6fd3ff, #de8bff 40%, #ffd86f 80%);
+ box-shadow:
+ 0 0 12px rgba(111, 211, 255, .6),
+ 0 0 24px rgba(222, 139, 255, .35),
+ inset 0 0 20px rgba(255, 255, 255, .18);
+ animation: bounce 2.8s ease-in-out infinite;
+ animation-delay: calc(var(--i) * -0.18s);
+ filter: saturate(1.2);
+}
+
+@keyframes bounce {
+
+ 0%,
+ 100% {
+ height: 15%;
+ transform: translateY(0);
+ }
+
+ 20% {
+ height: 75%;
+ }
+
+ 40% {
+ height: 35%;
+ }
+
+ 60% {
+ height: 90%;
+ }
+
+ 80% {
+ height: 45%;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .bars span {
+ animation: none;
+ }
+}
\ No newline at end of file