Add stephenjamesada's typewriter effect (#2966)

stephenjamesada · web-flow · commit 014842c9ac22 · 2025-07-24T11:33:05.000+02:00
* Add stephenjamesada's typewriter effect

* Moved contribution folder to Art
diff --git a/Art/stephenjamesada-typewriter/index.html b/Art/stephenjamesada-typewriter/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Typewriter Animation</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="typewriter-container">
+    <h1 class="typewriter">Hi, this is my typewriter animation!</h1>
+    </div>
+</body>
+</html>
diff --git a/Art/stephenjamesada-typewriter/meta.json b/Art/stephenjamesada-typewriter/meta.json
@@ -0,0 +1,4 @@
+{
+  "artName": "typewriter effect",
+  "githubHandle": "stephenjamesada"
+}
diff --git a/Art/stephenjamesada-typewriter/styles.css b/Art/stephenjamesada-typewriter/styles.css
@@ -0,0 +1,36 @@
+body {
+  background: #fff;
+  color: #000;
+  margin: 0;
+  padding: 0;
+  font-family: monospace;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.typewriter-container {
+  border-right: 4px solid #a9a9a9;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 0;
+  animation:
+    typing 3s steps(30, end) forwards,
+    blink 0.75s step-end infinite;
+}
+
+@keyframes typing {
+  from {
+    width: 0;
+  }
+  to {
+    width: 72ch;
+  }
+}
+
+@keyframes blink {
+  50% {
+    border-color: transparent;
+  }
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "artName": "typewriter effect",
 +  "githubHandle": "stephenjamesada"
 +}