From 7eab880bbc5c1fde1bbae9726c20e6946e9e7fae Mon Sep 17 00:00:00 2001
From: Mufeed VH <mufeedvh@gmail.com>
Date: Mon, 23 Jun 2025 00:30:58 +0530
Subject: [PATCH] style: enhance UI animations and feedback

- Improve rotating symbol animation with scaling effects
- Add fade-in transitions for smoother UI
- Update animation timing for better visual feedback
- Optimize loading indicator appearance
---
 src/styles.css | 71 +++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 64 insertions(+), 7 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index 65a6146..ea5fd55 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -378,26 +378,46 @@ button:disabled,
 
 /* Rotating symbol animation */
 @keyframes rotate-symbol {
-  0% { content: "◐"; }
-  25% { content: "◓"; }
-  50% { content: "◑"; }
-  75% { content: "◒"; }
-  100% { content: "◐"; }
+  0%   { content: "◐"; transform: scale(1); }
+  25%  { content: "◓"; transform: scale(10); }
+  50%  { content: "◑"; transform: scale(1); }
+  75%  { content: "◒"; transform: scale(10); }
+  100% { content: "◐"; transform: scale(1); }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 
 .rotating-symbol {
   display: inline-block;
   vertical-align: text-bottom;
   line-height: 1;
+  animation: fade-in 0.2s ease-out;
+  font-weight: normal;
 }
 
 .rotating-symbol::before {
   content: "◐";
-  animation: rotate-symbol 2s linear infinite;
+  animation: rotate-symbol 1.6s steps(4, end) infinite;
   display: inline-block;
   font-size: inherit;
-  line-height: inherit;
+  line-height: 1;
   vertical-align: baseline;
+  transform-origin: center;
+}
+
+/* Make the rotating symbol more prominent at larger sizes */
+.rotating-symbol.text-xl::before,
+.rotating-symbol.text-2xl::before {
+  font-weight: 900;
 }
 
 /* Shimmer hover effect */
@@ -559,4 +579,41 @@ code::-webkit-scrollbar-thumb:hover,
 
 .animate-scanlines {
   animation: scanlines 8s linear infinite;
+}
+
+/* Screenshot Shutter Animation */
+@keyframes shutterFlash {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.shutter-flash {
+  animation: shutterFlash 0.5s ease-in-out;
+}
+
+/* Image Move to Input Animation */
+@keyframes moveToInput {
+  0% {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(0.3) translateY(50%);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(0.1) translateY(100vh);
+    opacity: 0;
+  }
+}
+
+.image-move-to-input {
+  animation: moveToInput 0.8s ease-in-out forwards;
 } 
\ No newline at end of file