From d2456b3012db681e5e87944c9456f21a550a5922 Mon Sep 17 00:00:00 2001
From: SultokTheF <sultok.003@gmail.com>
Date: Wed, 18 Feb 2026 12:25:18 +0500
Subject: [PATCH] fix(website): prevent hydration mismatch in terminal demo

---
 .gitignore                                   |  6 +++++-
 packages/website/.gitignore                  |  3 +++
 packages/website/src/components/terminal.tsx | 12 ++++++++----
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index 13fc18b..2ee7d75 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,8 @@ dist
 *.log
 .DS_Store
 .agents
-.cursor
\ No newline at end of file
+.cursor
+
+
+# MARK: You have ignore this
+package-lock.json 
\ No newline at end of file
diff --git a/packages/website/.gitignore b/packages/website/.gitignore
index 5ef6a52..70f07cd 100644
--- a/packages/website/.gitignore
+++ b/packages/website/.gitignore
@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# MARK: You have ignore this
+package-lock.json 
diff --git a/packages/website/src/components/terminal.tsx b/packages/website/src/components/terminal.tsx
index 1bf9da3..ec7f5c8 100644
--- a/packages/website/src/components/terminal.tsx
+++ b/packages/website/src/components/terminal.tsx
@@ -301,12 +301,16 @@ const markAnimationCompleted = () => {
 };
 
 const Terminal = () => {
-  const [state, setState] = useState<AnimationState>(
-    didAnimationComplete() ? COMPLETED_STATE : INITIAL_STATE,
-  );
+  // #MARK: Before this fix, we read localStorage during render and could start from COMPLETED_STATE on the client.
+  // #MARK: That produced different first HTML on server vs client and triggered hydration mismatch.
+  const [state, setState] = useState<AnimationState>(INITIAL_STATE);
 
   useEffect(() => {
-    if (didAnimationComplete()) return;
+    // #MARK: Read persisted completion only after mount so the first client render matches SSR output.
+    if (didAnimationComplete()) {
+      setState(COMPLETED_STATE);
+      return;
+    }
 
     let cancelled = false;