Highlighted Text

1"use client";
2 
3import { motion } from "motion/react";
4import { cn } from "@/lib/utils";
5 
6type From = "left" | "right" | "top" | "bottom";
7 
8interface HighlightedTextProps {
9  children: React.ReactNode;
10  className?: string;
11  from?: From;
12  delay?: number;
13  inView?: boolean;
14  once?: boolean;
15}
16 
17const fromVariants = {
18  left: {
19    hidden: { x: "-100%" },
20    visible: { x: "0%" },
21  },
22  right: {
23    hidden: { x: "100%" },
24    visible: { x: "0%" },
25  },
26  top: {
27    hidden: { y: "-100%" },
28    visible: { y: "0%" },
29  },
30  bottom: {
31    hidden: { y: "100%" },
32    visible: { y: "0%" },
33  },
34};
35 
36export function HighlightedText({
37  children,
38  className,
39  from = "bottom",
40  delay = 0,
41  inView = false,
42  once = true,
43}: HighlightedTextProps) {
44  const variants = fromVariants[from];
45 
46  return (
47    <motion.span
48      className={cn(
49        "relative inline-flex overflow-hidden align-baseline",
50        className,
51      )}
52      initial="hidden"
53      whileInView={inView ? "visible" : undefined}
54      animate={inView ? undefined : "visible"}
55      viewport={{ once }}
56    >
57      <motion.span
58        className="absolute inset-0 -left-[0.15em] -right-[0.18em] bg-black dark:bg-white z-0"
59        variants={variants}
60        transition={{
61          type: "spring",
62          damping: 30,
63          stiffness: 300,
64          delay,
65        }}
66      />
67      <span className="relative z-10 mix-blend-difference text-white pl-[0.15em] pr-[0.18em]">
68        {children}
69      </span>
70    </motion.span>
71  );
72}
73 
74export default HighlightedText;