add scanning animation

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",

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
+            <div
-              className="w-[300px]"
+              className={classNames({
-              src={referenceImages[0]}
+                "scanning relative": appState === "CODING",
-              alt="Reference"
+              })}
-            />
+            >
+              <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) => (

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);
+  }
+}

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"