Replace TypeCursor with CyclingBlurText component

site/package.json

@@ -28,6 +28,7 @@
     "@flock/black-sun": "^0.2.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "motion": "^12.33.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

site/src/components/CyclingBlurText.module.css

@@ -0,0 +1,42 @@
+.prefixText {
+  margin-bottom: 0;
+  line-height: 1.1;
+}
+
+.suffixText {
+  margin-top: 0;
+  line-height: 1.1;
+}
+
+.dynamicContainer {
+  margin-top: 0.75rem;
+  margin-bottom: 0.25rem;
+  line-height: 1.1;
+}
+
+.highlightedText {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  color: #101010 !important;
+  background-color: var(--ifm-color-primary);
+  min-height: 1.2em;
+  font-weight: bold;
+  letter-spacing: 0.02em;
+  box-shadow: 0 4px 14px rgba(255, 223, 0, 0.3);
+}
+
+
+@media (max-width: 767px) {
+  .highlightedText {
+    padding: 0.375rem 0.75rem;
+    box-shadow: 0 3px 10px rgba(255, 223, 0, 0.25);
+  }
+}
+
+@media (max-width: 480px) {
+  .highlightedText {
+    padding: 0.3rem 0.6rem;
+    box-shadow: 0 2px 8px rgba(255, 223, 0, 0.2);
+  }
+}

site/src/components/CyclingBlurText.tsx

@@ -0,0 +1,68 @@
+import { AnimatePresence, motion } from 'motion/react';
+import { useEffect, useState, useRef } from 'react';
+import styles from './CyclingBlurText.module.css';
+
+type CyclingBlurTextProps = {
+  phrases: string[];
+  prefix?: string;
+  suffix?: string;
+  className?: string;
+};
+
+const BLUR_IN_DURATION = 0.8;
+const VISIBLE_PAUSE = 2500;
+const BLUR_OUT_DURATION = 0.4;
+const CYCLE_INTERVAL = BLUR_IN_DURATION * 1000 + VISIBLE_PAUSE + BLUR_OUT_DURATION * 1000;
+
+const CyclingBlurText: React.FC<CyclingBlurTextProps> = ({
+  phrases,
+  prefix = '',
+  suffix = '',
+  className = '',
+}) => {
+  const [phraseIndex, setPhraseIndex] = useState(0);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  useEffect(() => {
+    timerRef.current = setTimeout(() => {
+      setPhraseIndex((prev) => (prev + 1) % phrases.length);
+    }, CYCLE_INTERVAL);
+
+    return () => clearTimeout(timerRef.current);
+  }, [phraseIndex, phrases.length]);
+
+  const currentPhrase = phrases[phraseIndex];
+  const words = currentPhrase.split(' ');
+
+  return (
+    <div className={className}>
+      <div className={styles.prefixText}>{prefix}</div>
+      <div className={styles.dynamicContainer}>
+        <AnimatePresence mode="wait">
+          <motion.span
+            key={phraseIndex}
+            className={styles.highlightedText}
+            initial={{ filter: 'blur(10px)', opacity: 0, y: -50 }}
+            animate={{ filter: 'blur(0px)', opacity: 1, y: 0 }}
+            exit={{ opacity: 0, transition: { duration: BLUR_OUT_DURATION } }}
+            transition={{
+              duration: BLUR_IN_DURATION,
+              ease: 'easeOut',
+            }}
+            style={{ display: 'inline-flex', flexWrap: 'wrap', justifyContent: 'center' }}
+          >
+            {words.map((word, index) => (
+              <span key={index} style={{ color: '#101010' }}>
+                {word}
+                {index < words.length - 1 && '\u00A0'}
+              </span>
+            ))}
+          </motion.span>
+        </AnimatePresence>
+      </div>
+      <div className={styles.suffixText}>{suffix}</div>
+    </div>
+  );
+};
+
+export default CyclingBlurText;