SplitText Line Reveal

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

const PARAGRAPHS = [
  "No-5 Studio is a motion-forward design studio. We build websites that communicate confidence, craft, and intention through every interaction.",
  "Our process starts with animation. Every project begins with an animation language — a set of principles that define how your brand moves through the digital world.",
];

export default function SplittextLineRevealDemo() {
  return (
    <div>
      {/* Hero — text component starts below the fold */}
      <section className={styles.hero}>
        <h1 className={styles.heroTitle}>
          <span>No-5</span>
          <span>Studio</span>
        </h1>
        <p className={styles.heroSub}>Motion-forward design</p>
      </section>

      {/* Component — lines reveal as you scroll into this section */}
      <section className={styles.content}>
        <p className={styles.contentLabel}>About</p>
        <SplittextLineReveal paragraphs={PARAGRAPHS} />
      </section>

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