Highlight Text

import HighlightText from "./index.jsx";
import styles from "./demo.module.css";

export default function HighlightTextDemo() {
  return (
    <div className={styles.page}>

      {/* Hero — scroll down to see the effect */}
      <section className={styles.hero}>
        <p className={styles.heroLabel}>Scroll to reveal</p>
        <h1 className={styles.heroTitle}>
          Highlight<br />Text
        </h1>
      </section>

      {/* Highlight section */}
      <section className={styles.section}>
        <p className={styles.sectionLabel}>Manifesto</p>

        <HighlightText
          as="h2"
          scrollStart="top 85%"
          scrollEnd="center 35%"
          fade={0.15}
          stagger={0.08}
          className={styles.heading}
        >
          We build websites that move people — not just pixels.
        </HighlightText>

        <HighlightText
          as="p"
          scrollStart="top 90%"
          scrollEnd="center 40%"
          fade={0.2}
          stagger={0.05}
          className={styles.body}
        >
          Every project starts with an animation language. A set of principles that
          define how your brand communicates through motion, timing, and space.
        </HighlightText>
      </section>

      <div className={styles.spacer} />
    </div>
  );
}