Function startTypingAnimation

web/src/components/IDEDemo.tsx:309–351

()

    }

    const startTypingAnimation = () => {
      let currentPhraseIndex = 0
      setIsTyping(true)

      const typePhrase = (phrase: string, callback: () => void) => {
        let index = 0

        const typeNextChar = () => {
          if (index < phrase.length) {
            setTypingText(phrase.substring(0, index + 1))
            index++

            // Random typing speed between 50ms and 150ms for realistic effect
            const typingSpeed = Math.floor(Math.random() * 100) + 50
            setTimeout(typeNextChar, typingSpeed)
          } else {
            // Phrase is fully typed, wait before moving to next phrase
            setTimeout(callback, 1500)
          }
        }

        typeNextChar()
      }

      const startNextPhrase = () => {
        const phrase = PHRASES_TO_TYPE[currentPhraseIndex]

        // Reset text before starting new phrase
        setTypingText('')

        // Small delay before starting to type the next phrase
        setTimeout(() => {
          typePhrase(phrase, () => {
            // Move to next phrase (cycle back to beginning if needed)
            currentPhraseIndex =
              (currentPhraseIndex + 1) % PHRASES_TO_TYPE.length
            startNextPhrase()
          })
        }, 300)
      }

      startNextPhrase()
    }

    setTimeout(processNextMessage, 500)
  }, [showIDE])