animated cursor

Fixes #18

Author: elpddev

src/components/LetterCard.tsx

@@ -31,19 +31,45 @@ function styleLetterCard(
 ): Record<string, any> {
   const color = styleColor(letter);
   const backgroundColor = styleBackgroundColor(letter, isHighlight, isCurrent);
+  /*
   let borderLeft = "";
 
   if (isCurrent) {
     borderLeft = "1px solid white";
   }
+  */
+
+  let before = {};
+
+  if (isCurrent) {
+    before = {
+      content: "''",
+      width: "2px",
+      height: "100%",
+      background: "#ec7fff",
+      position: "absolute",
+      left: "0px",
+      animation: "cursor-blink 0.8s infinite",
+    };
+  }
 
   return {
+    position: "relative",
     color,
-    borderLeft,
+    // borderLeft,
     backgroundColor,
     fontSize: "28px",
     fontFamily: "monospace",
     whiteSpace: "pre",
+    padding: "0 3px",
+    "::before": {
+      ...before,
+    },
+    "@keyframes cursor-blink": {
+      "0%": { background: "transparent" },
+      "50%": { background: "#ff963a" },
+      "100%": { background: "transparent" },
+    },
   };
 }