Highlight Text

Installation

1. Install the dependencies

   $ npm i motion lucide-react

2. Copy the source into components/ui/highlight-text.tsx

   components/ui/highlight-text.tsxCopy

   "use client";
   
   import { motion } from "motion/react";
   import type { ReactNode } from "react";
   
   type HighlightTextProps = {
     children: ReactNode;
     color?: string;
     delay?: number;
   };
   
   /** Draws a marker-style highlight behind words when they scroll into view. */
   export function HighlightText({ children, color = "#fde68a", delay = 0.2 }: HighlightTextProps) {
     return (
       <span className="relative inline-block whitespace-nowrap">
         <motion.span
           aria-hidden
           className="absolute inset-x-[-0.15em] bottom-[0.05em] top-[0.45em] -z-10 origin-left -rotate-1 rounded-sm"
           style={{ backgroundColor: color }}
           initial={{ scaleX: 0 }}
           whileInView={{ scaleX: 1 }}
           viewport={{ once: true, amount: 1 }}
           transition={{ duration: 0.7, delay, ease: [0.65, 0, 0.35, 1] }}
         />
         {children}
       </span>
     );
   }
   
   export default function Demo() {
     return (
       <p className="relative isolate max-w-xl text-center text-3xl font-semibold leading-snug tracking-tight text-zinc-900 sm:text-4xl">
         Ship pages that <HighlightText>convert visitors</HighlightText> into <HighlightText color="#bfdbfe" delay={0.7}>loyal customers</HighlightText>.
       </p>
     );
   }
   

3. Use it

   The file exports the component and a Demo showing typical usage. Import whichever you need.