069ca8f7f7
Create a minimal, high-end landing page with a chatbot-like interface, including dark/light mode, prewritten prompts, and animated sidebar. Design should be black and white with glassmorphism and subtle gradients.
35 lines
817 B
TypeScript
35 lines
817 B
TypeScript
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
interface TypingAnimationProps {
|
|
text: string;
|
|
speed?: number;
|
|
}
|
|
|
|
const TypingAnimation: React.FC<TypingAnimationProps> = ({ text, speed = 50 }) => {
|
|
const [displayedText, setDisplayedText] = useState('');
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (currentIndex < text.length) {
|
|
const timer = setTimeout(() => {
|
|
setDisplayedText(prev => prev + text[currentIndex]);
|
|
setCurrentIndex(prev => prev + 1);
|
|
}, speed);
|
|
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [currentIndex, text, speed]);
|
|
|
|
return (
|
|
<span>
|
|
{displayedText}
|
|
{currentIndex < text.length && (
|
|
<span className="animate-pulse">|</span>
|
|
)}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export default TypingAnimation;
|