diff --git a/video-gen-app/src/index.css b/video-gen-app/src/index.css
index 634ebb66..53195dae 100644
--- a/video-gen-app/src/index.css
+++ b/video-gen-app/src/index.css
@@ -32,6 +32,90 @@ html, body {
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
+/* ── Electric Border Animation ─────────── */
+@keyframes electric-pulse {
+ 0%, 100% { opacity: 0.4; filter: blur(1px); }
+ 50% { opacity: 1; filter: blur(0); }
+}
+@keyframes electric-flow {
+ 0% { background-position: 0% 50%; }
+ 50% { background-position: 100% 50%; }
+ 100% { background-position: 0% 50%; }
+}
+
+.electric-border-card {
+ position: relative;
+}
+
+.electric-border {
+ position: absolute;
+ inset: -2px;
+ border-radius: 16px;
+ background: linear-gradient(
+ 90deg,
+ #6366f1,
+ #8b5cf6,
+ #a855f7,
+ #6366f1,
+ #8b5cf6,
+ #a855f7,
+ #6366f1
+ );
+ background-size: 300% 100%;
+ animation: electric-flow 3s linear infinite, electric-pulse 2s ease-in-out infinite;
+ z-index: 0;
+}
+
+.electric-border-inner {
+ position: absolute;
+ inset: 2px;
+ border-radius: 14px;
+ background: rgba(255, 255, 255, 0.9);
+ backdrop-filter: blur(12px);
+ z-index: 0;
+}
+
+.electric-border-card:hover .electric-border {
+ animation-duration: 1.5s, 1s;
+ opacity: 0.8;
+}
+
+/* ── Shiny Text Animation ─────────────── */
+@keyframes shiny {
+ 0% {
+ background-position: -200% center;
+ }
+ 100% {
+ background-position: 200% center;
+ }
+}
+
+.shiny-text-container {
+ margin-bottom: 16px;
+}
+
+.shiny-text {
+ font-size: 24px;
+ font-weight: 700;
+ background: linear-gradient(
+ 90deg,
+ #6366f1 0%,
+ #8b5cf6 20%,
+ #a855f7 40%,
+ #c084fc 50%,
+ #a855f7 60%,
+ #8b5cf6 80%,
+ #6366f1 100%
+ );
+ background-size: 200% auto;
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ animation: shiny 3s linear infinite;
+ display: inline-block;
+ letter-spacing: 1px;
+}
+
/* ── Keyframe Animations ───────────────── */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
diff --git a/video-gen-app/src/pages/LoginPage.tsx b/video-gen-app/src/pages/LoginPage.tsx
index a828b8cc..9d3c3946 100644
--- a/video-gen-app/src/pages/LoginPage.tsx
+++ b/video-gen-app/src/pages/LoginPage.tsx
@@ -261,9 +261,9 @@ const LoginPage: React.FC = () => {
};
const features = [
- { icon: