Animated Quote Block

1"use client";
2 
3import { AnimatePresence, motion } from "framer-motion";
4import { useEffect, useState } from "react";
5 
6type AnimatedQuoteBlockProps = {
7  quote?: string;
8  author?: string;
9  typingSpeed?: number;
10};
11 
12export function AnimatedQuoteBlock({
13  quote = "The only way to do great work is to love what you do.",
14  author = "Steve Jobs",
15  typingSpeed = 50,
16}: AnimatedQuoteBlockProps) {
17  const [displayedText, setDisplayedText] = useState("");
18  const [isTyping, setIsTyping] = useState(true);
19  const [showPulse, setShowPulse] = useState(false);
20 
21  useEffect(() => {
22    let index = 0;
23    const timer = setInterval(() => {
24      if (index < quote.length) {
25        setDisplayedText(quote.slice(0, index + 1));
26        index++;
27      } else {
28        setIsTyping(false);
29        setShowPulse(true);
30        clearInterval(timer);
31      }
32    }, typingSpeed);
33 
34    return () => clearInterval(timer);
35  }, [quote, typingSpeed]);
36 
37  return (
38    <div className="w-full max-w-2xl rounded-2xl border border-border bg-card p-8">
39      <motion.div
40        animate={{
41          scale: showPulse ? [1, 1.02, 1] : 1,
42        }}
43        transition={{
44          duration: 2,
45          repeat: showPulse ? Infinity : 0,
46          ease: "easeInOut",
47        }}
48        className="relative"
49      >
50        <div className="text-4xl font-bold text-primary">"</div>
51 
52        <div className="py-4 text-xl leading-relaxed">
53          <AnimatePresence mode="wait">
54            {isTyping ? (
55              <motion.span
56                key="typing"
57                initial={{ opacity: 0 }}
58                animate={{ opacity: 1 }}
59                exit={{ opacity: 0 }}
60              >
61                {displayedText}
62                <motion.span
63                  animate={{ opacity: [1, 0, 1] }}
64                  transition={{ duration: 0.8, repeat: Infinity }}
65                  className="inline-block w-0.5 bg-current"
66                />
67              </motion.span>
68            ) : (
69              <motion.span
70                key="complete"
71                initial={{ opacity: 0 }}
72                animate={{ opacity: 1 }}
73              >
74                {quote}
75              </motion.span>
76            )}
77          </AnimatePresence>
78        </div>
79 
80        <div className="mt-4 text-right text-sm text-muted-foreground">
81          - {author}
82        </div>
83      </motion.div>
84    </div>
85  );
86}