✨ feat: Add TypewriterEffect

Author: canisminor1990

src/awesome/TypewriterEffect/TypewriterEffect.tsx

@@ -0,0 +1,233 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { useStyles } from './style';
+import type { TypewriterEffectProps } from './type';
+
+const TypewriterEffect = memo<TypewriterEffectProps>(
+  ({
+    sentences,
+    as: Component = 'div',
+    typingSpeed = 100,
+    initialDelay = 0,
+    pauseDuration = 2000,
+    deletingSpeed = 50,
+    loop = true,
+    className = '',
+    color,
+    showCursor = true,
+    hideCursorWhileTyping = false,
+    cursorCharacter,
+    cursorClassName = '',
+    cursorColor,
+    cursorBlinkDuration = 0.8,
+    cursorStyle = 'pipe',
+    textColors = [],
+    variableSpeed,
+    onSentenceComplete,
+    startOnVisible = false,
+    reverseMode = false,
+    ...props
+  }: TypewriterEffectProps) => {
+    const { styles, cx } = useStyles();
+    const [displayedText, setDisplayedText] = useState('');
+    const [currentCharIndex, setCurrentCharIndex] = useState(0);
+    const [isDeleting, setIsDeleting] = useState(false);
+    const [currentTextIndex, setCurrentTextIndex] = useState(0);
+    const [isVisible, setIsVisible] = useState(!startOnVisible);
+    const containerRef = useRef<HTMLElement>(null);
+
+    const textArray = useMemo(
+      () => (Array.isArray(sentences) ? sentences : [sentences]),
+      [sentences],
+    );
+
+    const getRandomSpeed = useCallback(() => {
+      if (!variableSpeed) return typingSpeed;
+      const { min, max } = variableSpeed;
+      return Math.random() * (max - min) + min;
+    }, [variableSpeed, typingSpeed]);
+
+    const getCurrentTextColor = () => {
+      if (textColors.length > 0) {
+        return textColors[currentTextIndex % textColors.length];
+      }
+      return color;
+    };
+
+    const getCurrentCursorColor = () => {
+      return cursorColor || color;
+    };
+
+    useEffect(() => {
+      if (!startOnVisible || !containerRef.current) return;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              setIsVisible(true);
+            }
+          });
+        },
+        { threshold: 0.1 },
+      );
+
+      observer.observe(containerRef.current);
+
+      return () => observer.disconnect();
+    }, [startOnVisible]);
+
+    useEffect(() => {
+      if (!isVisible) return;
+
+      let timeout: ReturnType<typeof setTimeout>;
+
+      const currentText = textArray[currentTextIndex];
+      const processedText = reverseMode ? currentText.split('').reverse().join('') : currentText;
+
+      const executeTypingAnimation = () => {
+        if (isDeleting) {
+          if (displayedText === '') {
+            setIsDeleting(false);
+            if (currentTextIndex === textArray.length - 1 && !loop) {
+              return;
+            }
+            if (onSentenceComplete) {
+              onSentenceComplete(textArray[currentTextIndex], currentTextIndex);
+            }
+            setCurrentTextIndex((prev) => (prev + 1) % textArray.length);
+            setCurrentCharIndex(0);
+            timeout = setTimeout(() => {}, pauseDuration);
+          } else {
+            timeout = setTimeout(() => {
+              setDisplayedText((prev) => prev.slice(0, -1));
+            }, deletingSpeed);
+          }
+        } else {
+          if (currentCharIndex < processedText.length) {
+            timeout = setTimeout(
+              () => {
+                setDisplayedText((prev) => prev + processedText[currentCharIndex]);
+                setCurrentCharIndex((prev) => prev + 1);
+              },
+              variableSpeed ? getRandomSpeed() : typingSpeed,
+            );
+          } else if (textArray.length >= 1) {
+            if (!loop && currentTextIndex === textArray.length - 1) return;
+
+            timeout = setTimeout(() => {
+              setIsDeleting(true);
+            }, pauseDuration);
+          }
+        }
+      };
+
+      if (currentCharIndex === 0 && !isDeleting && displayedText === '') {
+        timeout = setTimeout(executeTypingAnimation, initialDelay);
+      } else {
+        executeTypingAnimation();
+      }
+
+      return () => clearTimeout(timeout);
+    }, [
+      currentCharIndex,
+      displayedText,
+      isDeleting,
+      typingSpeed,
+      deletingSpeed,
+      pauseDuration,
+      textArray,
+      currentTextIndex,
+      loop,
+      initialDelay,
+      isVisible,
+      reverseMode,
+      variableSpeed,
+      onSentenceComplete,
+      getRandomSpeed,
+    ]);
+
+    const getCursorStyle = () => {
+      if (cursorCharacter) return styles.cursorCustom;
+
+      switch (cursorStyle) {
+        case 'block': {
+          return styles.cursorBlock;
+        }
+        case 'dot': {
+          return styles.cursorDot;
+        }
+        case 'underscore': {
+          return styles.cursorUnderscore;
+        }
+        case 'pipe': {
+          return styles.cursor;
+        }
+      }
+    };
+
+    const shouldHideCursor =
+      hideCursorWhileTyping &&
+      (currentCharIndex < textArray[currentTextIndex].length || isDeleting);
+
+    const textColor = getCurrentTextColor();
+    const finalCursorColor = getCurrentCursorColor();
+
+    // Split displayed text into characters for animation
+    const characters = displayedText.split('');
+
+    return createElement(
+      Component,
+      {
+        className: cx(styles.container, className),
+        ref: containerRef,
+        ...props,
+      },
+      <>
+        <span className={styles.text} style={textColor ? { color: textColor } : undefined}>
+          {characters.map((char, index) => (
+            <motion.span
+              animate={{ opacity: 1 }}
+              initial={{ opacity: 0 }}
+              key={`${currentTextIndex}-${index}`}
+              style={{ display: 'inline-block' }}
+              transition={{
+                duration: typingSpeed / 500,
+                ease: 'easeInOut',
+              }}
+            >
+              {char === ' ' ? '\u00A0' : char}
+            </motion.span>
+          ))}
+        </span>
+        {showCursor && (
+          <motion.span
+            animate={{ opacity: 1 }}
+            className={cx(
+              getCursorStyle(),
+              cursorClassName,
+              shouldHideCursor && styles.cursorHidden,
+            )}
+            initial={{ opacity: 0 }}
+            style={finalCursorColor ? { backgroundColor: finalCursorColor } : undefined}
+            transition={{
+              duration: cursorBlinkDuration,
+              ease: 'easeInOut',
+              repeat: Number.POSITIVE_INFINITY,
+              repeatType: 'reverse',
+            }}
+          >
+            {cursorCharacter}
+          </motion.span>
+        )}
+      </>,
+    );
+  },
+);
+
+TypewriterEffect.displayName = 'TypewriterEffect';
+
+export default TypewriterEffect;

src/awesome/TypewriterEffect/demos/advanced.tsx

@@ -0,0 +1,16 @@
+import { TypewriterEffect } from '@lobehub/ui/awesome';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => {
+  return (
+    <Flexbox gap={16}>
+      <TypewriterEffect cursorCharacter="▋" sentences={['Custom cursor character']} />
+      <TypewriterEffect hideCursorWhileTyping sentences={['Hide cursor while typing']} />
+      <TypewriterEffect
+        sentences={['Blue text', 'Green text', 'Red text']}
+        textColors={['#1677ff', '#52c41a', '#ff4d4f']}
+      />
+      <TypewriterEffect loop={false} sentences={['First', 'Last (stops here)']} />
+    </Flexbox>
+  );
+};

src/awesome/TypewriterEffect/demos/callback.tsx

@@ -0,0 +1,18 @@
+import { TypewriterEffect } from '@lobehub/ui/awesome';
+import { useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <Flexbox gap={16}>
+      <TypewriterEffect
+        onSentenceComplete={() => setCount((c) => c + 1)}
+        pauseDuration={1500}
+        sentences={['First sentence', 'Second sentence', 'Third sentence']}
+      />
+      <div style={{ color: '#888', fontSize: 14 }}>Completed: {count} times</div>
+    </Flexbox>
+  );
+};

src/awesome/TypewriterEffect/demos/colors.tsx

@@ -0,0 +1,21 @@
+import { TypewriterEffect } from '@lobehub/ui/awesome';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => {
+  return (
+    <Flexbox gap={16}>
+      <TypewriterEffect color="#1677ff" sentences={['Blue text with blue cursor']} />
+      <TypewriterEffect color="#52c41a" sentences={['Green text with green cursor']} />
+      <TypewriterEffect
+        color="#ff4d4f"
+        cursorColor="#1677ff"
+        sentences={['Red text with blue cursor']}
+      />
+      <TypewriterEffect
+        color="#722ed1"
+        cursorColor="#52c41a"
+        sentences={['Purple text with green cursor']}
+      />
+    </Flexbox>
+  );
+};

src/awesome/TypewriterEffect/demos/cursorStyles.tsx

@@ -0,0 +1,15 @@
+import { TypewriterEffect } from '@lobehub/ui/awesome';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => {
+  const sentences = ['Different cursor styles'];
+
+  return (
+    <Flexbox gap={16}>
+      <TypewriterEffect cursorStyle="pipe" sentences={sentences} />
+      <TypewriterEffect cursorStyle="block" sentences={sentences} />
+      <TypewriterEffect cursorStyle="underscore" sentences={sentences} />
+      <TypewriterEffect cursorStyle="dot" sentences={sentences} />
+    </Flexbox>
+  );
+};

src/awesome/TypewriterEffect/demos/customSpeed.tsx

@@ -0,0 +1,22 @@
+import { TypewriterEffect } from '@lobehub/ui/awesome';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => {
+  return (
+    <Flexbox gap={16}>
+      <TypewriterEffect
+        deletingSpeed={30}
+        pauseDuration={1000}
+        sentences={['Fast typing speed']}
+        typingSpeed={50}
+      />
+      <TypewriterEffect sentences={['Normal typing speed']} />
+      <TypewriterEffect
+        deletingSpeed={100}
+        pauseDuration={3000}
+        sentences={['Slow typing speed']}
+        typingSpeed={200}
+      />
+    </Flexbox>
+  );
+};