How to use

import { TextBoxReveal } from "@/components/v1/skiper70";

// Basic usage
const DemoSkiper70 = () => {
  return (
    <main>
      <TextBoxReveal>
        Your text content here that will be revealed word by word as you scroll.
      </TextBoxReveal>
    </main>
  );
};

// With highlight feature
const HighlightExample = () => {
  return (
    <TextBoxReveal
      highlight="important"
      highlightTextClass="!text-blue-500"
      highlightBgClass="!bg-blue-500"
    >
      This text contains an important word that will be highlighted.
      <br />
      This text contains an important word that will be highlighted.
    </TextBoxReveal>
  );
};

Additional

use br tag if you want to break the line

Attribution

• Inspired by and adapted from nvg8.io