From e013f63829a6568cfdb4b18a3af85fe8f6485371 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 14 Nov 2023 18:42:35 -0500
Subject: [PATCH] add scanning animation

---
 frontend/package.json  |  1 +
 frontend/src/App.tsx   | 17 ++++++++++++-----
 frontend/src/index.css | 26 ++++++++++++++++++++++++++
 frontend/yarn.lock     |  5 +++++
 4 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 334fba6..219f0bd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7058bac..4cba2a1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,6 +4,7 @@ import CodePreview from "./components/CodePreview";
 import Preview from "./components/Preview";
 import { generateCode } from "./generateCode";
 import Spinner from "./components/Spinner";
+import classNames from "classnames";
 
 function App() {
   const [appState, setAppState] = useState<"INITIAL" | "CODING" | "CODE_READY">(
@@ -53,11 +54,17 @@ function App() {
       {(appState === "CODING" || appState === "CODE_READY") && (
         <>
           <div className="flex gap-x-2 justify-around">
-            <img
-              className="w-[300px]"
-              src={referenceImages[0]}
-              alt="Reference"
-            />
+            <div
+              className={classNames({
+                "scanning relative": appState === "CODING",
+              })}
+            >
+              <img
+                className="w-[300px]"
+                src={referenceImages[0]}
+                alt="Reference"
+              />
+            </div>
             <div className="bg-gray-400 px-4 py-2 rounded text-sm hidden">
               <h2 className="text-lg mb-4 border-b border-gray-800">Console</h2>
               {console.map((line, index) => (
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f347111..4f6e47a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -5,3 +5,29 @@
 body {
   @apply bg-gray-200;
 }
+
+.scanning::after {
+  content: "";
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 5px;
+  height: 100%;
+  background-image: linear-gradient(
+    to right,
+    rgba(19, 161, 14, 0.2),
+    /* Darker matrix green with full transparency */ rgba(19, 161, 14, 0.8)
+      /* The same green with 80% opacity */
+  );
+  animation: scanning 3s ease-in-out infinite;
+}
+
+@keyframes scanning {
+  0%,
+  100% {
+    transform: translateX(0px);
+  }
+  50% {
+    transform: translateX(300px);
+  }
+}
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 72cd631..c474673 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -775,6 +775,11 @@ chokidar@^3.5.1, chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+classnames@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"