From 699f49bfa33420698962b56db23b49c8e14bb354 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Fri, 14 Feb 2025 15:20:17 +0330
Subject: [PATCH] feat: add binary animation

---
 src/components/binary.tsx   | 17 +++++++++++++++++
 src/components/source.astro |  7 ++-----
 2 files changed, 19 insertions(+), 5 deletions(-)
 create mode 100644 src/components/binary.tsx

diff --git a/src/components/binary.tsx b/src/components/binary.tsx
new file mode 100644
index 0000000..2976906
--- /dev/null
+++ b/src/components/binary.tsx
@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+import { generateRandomBinaryString } from '@/helpers/binary';
+
+export function Binary() {
+  const [binary, setBinary] = useState('');
+
+  useEffect(() => {
+    setBinary(generateRandomBinaryString(1000));
+
+    setInterval(() => {
+      setBinary(generateRandomBinaryString(1000));
+    }, 200);
+  }, []);
+
+  return <span>{binary}</span>;
+}
diff --git a/src/components/source.astro b/src/components/source.astro
index 29ab5e0..3a99113 100644
--- a/src/components/source.astro
+++ b/src/components/source.astro
@@ -3,10 +3,7 @@ import { FaGithub } from 'react-icons/fa/index';
 
 import { SpecialButton } from './special-button';
 import { Container } from './container';
-
-import { generateRandomBinaryString } from '@/helpers/binary';
-
-const binary = generateRandomBinaryString(1000);
+import { Binary } from './binary';
 ---
 
 <div class="source">
@@ -28,7 +25,7 @@ const binary = generateRandomBinaryString(1000);
         </SpecialButton>
       </div>
 
-      <div class="binary">{binary}</div>
+      <div class="binary"><Binary client:load /></div>
     </div>
   </Container>
 </div>