Heading Scroll Parallax

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

export default function HeadingScrollParallaxDemo() {
  return (
    <div>
      {/* Intro — pushes the parallax section below the fold */}
      <section className={styles.intro}>
        <p className={styles.introLabel}>Scroll animation</p>
        <h2 className={styles.introTitle}>Each heading moves at a different speed as you scroll through the section.</h2>
      </section>

      {/* The component — scroll into this to see the parallax */}
      <HeadingScrollParallax headings={["Motion", "Design", "Studio"]} />

      {/* Trailing space — lets you scroll past the section */}
      <section className={styles.outro}>
        <p className={styles.outroText}>Keep scrolling to see the full effect.</p>
      </section>
    </div>
  );
}