feat: add cipher animation

src/components/cipher.tsx

@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react';
+
+interface CipherTextProps {
+  interval?: number;
+  text: string;
+}
+
+const chars = '-_~`!@#$%^&*()+=[]{}|;:,.<>?';
+
+export function CipherText({ interval = 50, text }: CipherTextProps) {
+  const [outputText, setOutputText] = useState('');
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+
+    if (outputText !== text) {
+      timer = setInterval(() => {
+        if (outputText.length < text.length) {
+          setOutputText(prev => prev + text[prev.length]);
+        } else {
+          clearInterval(timer);
+        }
+      }, interval);
+    }
+
+    return () => clearInterval(timer);
+  }, [text, interval, outputText]);
+
+  useEffect(() => {
+    if (outputText === text) {
+      setTimeout(() => setOutputText(''), 6000);
+    }
+  }, [outputText, text]);
+
+  const remainder =
+    outputText.length < text.length
+      ? text
+          .slice(outputText.length)
+          .split('')
+          .map(() => chars[Math.floor(Math.random() * chars.length)])
+          .join('')
+      : '';
+
+  if (!isMounted) {
+    return <span>{text}</span>;
+  }
+
+  return (
+    <span className="text-white">
+      {outputText}
+      {remainder}
+    </span>
+  );
+}

src/components/hero.astro

@@ -2,6 +2,7 @@
 import { BsSoundwave } from 'react-icons/bs/index';
 
 import { Container } from './container';
+import { CipherText } from './cipher';
 
 import { count as soundCount } from '@/lib/sounds';
 
@@ -24,7 +25,9 @@ const count = soundCount();
       <h1 class="title">
         Ambient Sounds<span class="line">For Focus and Calm</span>
       </h1>
-      <h2 class="desc">Free and Open-Source.</h2>
+      <h2 class="desc">
+        Free and <CipherText client:load text="Open-Source" />.
+      </h2>
 
       <p class="sounds">
         <span aria-hidden="true" class="icon">