Initial id verification animation test

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
 }

components/IdScan.js

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import styles from '../styles/Scantest.module.css';
+
+const IdScan = () => {
+  const [mouseDown, setMouseDown] = useState(false);
+  const [scanComplete, setScanComplete] = useState(false);
+
+  const playScan = () => {
+    setMouseDown(true);
+  }
+
+  const pauseScan = () => {
+    setMouseDown(false);
+  }
+
+  const validate = () => {
+    setScanComplete(true);
+  }
+
+  return (
+    <div className={styles.container} onMouseDown={playScan} onTouchStart={playScan} onMouseUp={pauseScan} onTouchEnd={pauseScan}>
+      <div className={styles.idScan}>
+        <div className={styles.fingerprint}>
+          <div className={styles.printUnverified + (scanComplete ? `${styles.hide}` : '')}></div>
+          <div className={styles.printVerified} id={scanComplete ? `` : (styles.scanPaused + (mouseDown ? `${styles.scan}` : ''))} onAnimationEnd={validate}></div>
+        </div>
+        <div className={styles.idCard}>
+          <div className={styles.cardUnverified}></div>
+          <div className={styles.cardVerified} id={scanComplete ? `` : (styles.scanPaused + (mouseDown ? `${styles.scan}` : ''))} onAnimationEnd={validate}></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default IdScan;

pages/scantest.js

@@ -0,0 +1,9 @@
+import IdScan from '../components/IdScan';
+
+const scantest = () => {
+  return (
+    <IdScan />
+  );
+}
+
+export default scantest;