63 lines
1.5 KiB
JavaScript
63 lines
1.5 KiB
JavaScript
// Quote.js
|
|
import "./style.css";
|
|
import { motion } from "framer-motion";
|
|
import { useIntersectionObserver } from "./useIntersectionObserver";
|
|
|
|
export default function Quote() {
|
|
const text1 = '"There are no limits to what you can accomplish'.split(" ");
|
|
const text2 = 'except the limits you place on your own thinking."'.split(
|
|
" "
|
|
);
|
|
const [ref, isIntersecting] = useIntersectionObserver();
|
|
|
|
return (
|
|
<div ref={ref} className="text-center">
|
|
<h3 className="text-[2rem]">
|
|
{text1.map((word, index) => (
|
|
<motion.span
|
|
key={index}
|
|
initial={{
|
|
opacity: 0,
|
|
filter: "blur(4px)",
|
|
scale: 0.92,
|
|
}}
|
|
animate={{
|
|
opacity: isIntersecting ? 1 : 0,
|
|
filter: isIntersecting ? "blur(0px)" : "blur(4px)",
|
|
scale: isIntersecting ? 1 : 0.92,
|
|
}}
|
|
transition={{
|
|
delay: isIntersecting ? index * 0.1 : 0,
|
|
duration: 0.5,
|
|
}}>
|
|
{word}{" "}
|
|
</motion.span>
|
|
))}
|
|
</h3>
|
|
<h3 className="text-xl">
|
|
{text2.map((word, index) => (
|
|
<motion.span
|
|
key={index + text1.length}
|
|
initial={{
|
|
opacity: 0,
|
|
filter: "blur(4px)",
|
|
scale: 0.92,
|
|
}}
|
|
animate={{
|
|
opacity: isIntersecting ? 1 : 0,
|
|
filter: isIntersecting ? "blur(0px)" : "blur(4px)",
|
|
scale: isIntersecting ? 1 : 0.92,
|
|
}}
|
|
transition={{
|
|
delay: isIntersecting
|
|
? (text1.length + index) * 0.1
|
|
: 0,
|
|
duration: 0.5,
|
|
}}>
|
|
{word}{" "}
|
|
</motion.span>
|
|
))}
|
|
</h3>
|
|
</div>
|
|
);
|
|
}
|