From 60482616860a0caaa2912b206ed569f79c1c0f00 Mon Sep 17 00:00:00 2001
From: ridhozhr10 <azharridho42@gmail.com>
Date: Tue, 14 May 2024 11:48:44 +0700
Subject: [PATCH] animation css dynamic step

---
 src/app/_components/layout/Header/index.tsx         | 12 +++++++++++-
 src/app/_components/layout/Header/style.module.scss |  2 +-
 tailwind.config.ts                                  |  2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/app/_components/layout/Header/index.tsx b/src/app/_components/layout/Header/index.tsx
index f49155a..7040dad 100644
--- a/src/app/_components/layout/Header/index.tsx
+++ b/src/app/_components/layout/Header/index.tsx
@@ -17,7 +17,17 @@ const Logo = ({ text }: { text?: string }) => (
     <div>
       <span>&gt;</span>
       <span>$</span>
-      {text ? <span>{text}</span> : <span>echo &quot;Hi&quot;</span>}
+      {text ? (
+        <span
+          style={{ animationTimingFunction: `steps(${text.length + 3}, end)` }}
+        >
+          {text}
+        </span>
+      ) : (
+        <span style={{ animationTimingFunction: `steps(12, end)` }}>
+          echo &quot;Hi&quot;
+        </span>
+      )}
       <span className="animate-cursor"></span>
     </div>
   </Link>
diff --git a/src/app/_components/layout/Header/style.module.scss b/src/app/_components/layout/Header/style.module.scss
index b55f252..e2083f7 100644
--- a/src/app/_components/layout/Header/style.module.scss
+++ b/src/app/_components/layout/Header/style.module.scss
@@ -17,7 +17,7 @@
       @apply mr-[5px];
     }
     & span:nth-child(3) {
-      @apply animate-typing overflow-hidden whitespace-nowrap tracking-widest w-0;
+      @apply animate-typing overflow-hidden whitespace-nowrap w-0;
     }
     & span:nth-child(4) {
       @apply inline-block w-2 h-4 bg-red-400 ml-[5px] rounded-[1px];
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ce64cf1..71137b6 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -21,7 +21,7 @@ const config: Config = {
       },
       animation: {
         'cursor': 'cursor 1s infinite',
-        'typing': 'typing 15s steps(25, end) infinite'
+        'typing': 'typing 15s infinite'
       },
       keyframes: {
         cursor: {