typist,

package.json

@@ -4,15 +4,15 @@
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.4.5",
-    "@react-spring/three": "^9.5.3",
-    "@react-three/drei": "^9.29.1",
-    "@react-three/fiber": "^8.7.3",
+    "@react-spring/three": "^9.5.5",
+    "@react-three/drei": "^9.32.4",
+    "@react-three/fiber": "^8.8.7",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.0.1",
-    "@types/node": "^18.7.16",
-    "@types/react": "^18.0.19",
+    "@types/jest": "^29.1.0",
+    "@types/node": "^18.7.23",
+    "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@types/three": "^0.144.0",
     "react": "^18.2.0",
@@ -21,13 +21,13 @@
     "react-dark-mode-toggle": "^0.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "react-spring": "^9.5.3",
+    "react-spring": "^9.5.5",
     "react-three": "^0.9.7",
-    "react-typist": "^2.0.5",
-    "three": "^0.144.0",
-    "typescript": "^4.8.3",
+    "react-typist-component": "^1.0.5",
+    "three": "^0.145.0",
+    "typescript": "^4.8.4",
     "typewriter-effect": "^2.19.0",
-    "web-vitals": "^3.0.1"
+    "web-vitals": "^3.0.2"
   },
   "resolutions": {
     "@types/react": "17.0.40"
@@ -60,7 +60,7 @@
   "devDependencies": {
     "@tailwindcss/postcss7-compat": "npm:@tailwindcss/postcss7-compat",
     "@types/react-typist": "^2.0.3",
-    "autoprefixer": "^10.4.9",
+    "autoprefixer": "^10.4.12",
     "eslint": "^8.23.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",

src/App.tsx

@@ -5,7 +5,7 @@
 
 import React, { useEffect, useMemo, useState } from 'react';
 import DarkModeToggle from 'react-dark-mode-toggle';
-import Typist from 'react-typist';
+import Typist from 'react-typist-component';
 import { Canvas } from '@react-three/fiber';
 import Experience, { ExperienceDef } from './Components/Experience/Experience';
 import { qualities } from './data';
@@ -65,7 +65,9 @@ function App(): JSX.Element {
             qualities.map((q) => (
                 <span key={q}>
                     <span>{q}</span>
-                    <Typist.Backspace count={q.length} delay={100 * q.length} />
+                    <Typist.Delay ms={1000} />
+                    <Typist.Backspace count={q.length} />
+                    <Typist.Delay ms={300} />
                 </span>
             )),
         [],
@@ -101,11 +103,10 @@ function App(): JSX.Element {
                     <span className="text-lg mt-8 dark:text-gray-200 text-gray-600 font-semibold">
                         {count ? (
                             <Typist
-                                cursor={{
-                                    element: (<span className={textColor}> | </span>) as any,
-                                }}
+                                cursor={<span className={textColor}> | </span>}
                                 onTypingDone={() => setCount(0)}
-                                avgTypingDelay={50}
+                                backspaceDelay={50}
+                                typingDelay={() => 40 + 100 * Math.random()}
                             >
                                 {qualitiesEl}
                             </Typist>
@@ -216,7 +217,16 @@ function App(): JSX.Element {
                 <Canvas linear dpr={window.devicePixelRatio || 1} camera={{ fov: 75, position: [0, 0, 7] }}>
                     <Image url="./marco_full.jpg" width={5} />
                 </Canvas>
-                <p className="text-xl font-bold p-10 pb-0 md:px-40 text-white text-center">Curious?</p>
+                <p className="text-xl font-bold p-10 pb-0 md:px-40 text-white text-center">
+                    Curious?{' '}
+                    <Typist backspaceDelay={50} loop typingDelay={() => 40 + 100 * Math.random()}>
+                        Write me an email
+                        <Typist.Delay ms={5000} />
+                        <Typist.Backspace count={'Write me an email'.length} />
+                        <Typist.Delay ms={1000} />
+                    </Typist>
+                </p>
+
                 <a
                     href="mailto:[email protected]"
                     className="text-lg md:text-2xl font-bold text-gray-100 text-center effect-underline"