File size: 1,751 Bytes
2992997 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | "use client";
import { motion, useInView } from "framer-motion";
import { useRef, type ReactNode } from "react";
type Props = {
text: string;
className?: string;
delayOffset?: number;
suffix?: ReactNode;
suffixClassName?: string;
};
export function WordsPullUp({ text, className, delayOffset = 0, suffix, suffixClassName }: Props) {
const ref = useRef<HTMLSpanElement>(null);
const isInView = useInView(ref, { once: true, margin: "0px 0px -10% 0px" });
const words = text.split(" ");
return (
<span ref={ref} className={`inline-flex flex-wrap ${className ?? ""}`}>
{words.map((word, i) => (
<span key={i} className="relative mr-[0.18em] inline-block last:mr-0">
<span className="inline-block overflow-hidden align-bottom">
<motion.span
className="inline-block"
initial={{ y: 20, opacity: 0 }}
animate={isInView ? { y: 0, opacity: 1 } : { y: 20, opacity: 0 }}
transition={{
duration: 0.8,
delay: delayOffset + i * 0.08,
ease: [0.16, 1, 0.3, 1],
}}
>
{word}
</motion.span>
</span>
{suffix && i === words.length - 1 ? (
<motion.span
className={suffixClassName}
initial={{ y: 20, opacity: 0 }}
animate={isInView ? { y: 0, opacity: 1 } : { y: 20, opacity: 0 }}
transition={{
duration: 0.8,
delay: delayOffset + i * 0.08 + 0.06,
ease: [0.16, 1, 0.3, 1],
}}
>
{suffix}
</motion.span>
) : null}
</span>
))}
</span>
);
}
|