Merge pull request #28 from shaswatcodes28/typing-effect

feat: typing animation for hero page

Author: MD-IRFAN-RAJ

bihar-culture-landing/style.css

@@ -78,7 +78,16 @@ header::before {
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
   opacity: 0.3;
 }
+@keyframes typing {
+  from { width: 0 }
+  to { width: 100% }
+}
 
+/* The typewriter cursor effect */
+@keyframes blink-caret {
+  from, to { border-color: transparent }
+  50% { border-color: orange; }
+}
 .header-content {
   position: relative;
   z-index: 2;
@@ -87,19 +96,26 @@ header::before {
 }
 
 .header-content h1 {
-  font-size: clamp(2.5rem, 6vw, 4.5rem);
-  font-weight: 700;
-  margin: 0 auto;
-  
-  /*margin-bottom: 0.5rem;*/
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+   overflow: hidden;
+  border-right: .15em solid orange; 
+  white-space: nowrap; 
+  margin: 0 auto; 
+  letter-spacing: .15em;
+  animation: 
+    typing 3.5s steps(40, end),
+    blink-caret .75s step-end infinite;
+
 }
 
 .header-content h2 {
-  font-size: clamp(1.5rem, 3vw, 2.5rem);
-  font-weight: 400;
-  margin-bottom: 1rem;
-  opacity: 0.9;
+   overflow: hidden;
+  border-right: .15em solid orange; 
+  white-space: nowrap; 
+  margin: 0 auto; 
+  letter-spacing: .15em;
+  animation: 
+    typing 3.5s steps(40, end),
+    blink-caret .75s step-end infinite;
 }
 
 .tagline {