feat: add animations

asafkorem · Nov 3, 2024 · 14e862b · 14e862b
1 parent 29e653d
commit 14e862b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -33,3 +33,29 @@
     --ring: 212.7 26.8% 83.9%;
   }
 }
+
+@keyframes shine {
+  0% {
+    filter: drop-shadow(0 0 2px #eab308) brightness(1);
+  }
+  50% {
+    filter: drop-shadow(0 0 10px #eab308) brightness(1.2);
+  }
+  100% {
+    filter: drop-shadow(0 0 2px #eab308) brightness(1);
+  }
+}
+
+.animate-shine {
+  animation: shine 5s ease-in-out infinite;
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-glow {
+    text-shadow: 0 0 10px rgb(234 179 8 / 0.3);
+  }
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,8 +10,10 @@ export default function Home() {
         <div className="max-w-5xl mx-auto space-y-6">
           <header className="text-center py-8">
             <div className="flex items-center justify-center gap-3 mb-4">
-              <Flashlight className="w-8 h-8 text-yellow-500 transform rotate-[145deg]" />
-              <h1 className="text-3xl font-bold">Git Spotlight</h1>
+              <Flashlight
+                  className="w-8 h-8 text-yellow-500 transform rotate-[145deg] animate-shine"
+              />
+              <h1 className="text-3xl font-bold text-glow">Git Spotlight</h1>
             </div>
             <p className="text-[#8b949e] max-w-2xl mx-auto mb-6">
               Discover insights in your git history with these carefully crafted command patterns.