Reveal Group

import RevealGroup, { RevealNested } from "./index.jsx";
import styles from "./demo.module.css";

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

      {/* Hero */}
      <section className={styles.hero}>
        <p className={styles.heroLabel}>Scroll to reveal</p>
        <h1 className={styles.heroTitle}>Reveal<br />Group</h1>
      </section>

      {/* Basic group — heading, body, image */}
      <section className={styles.section}>
        <p className={styles.sectionLabel}>Basic group</p>
        <RevealGroup stagger={100} distance="2em" start="top 80%">
          <h2 className={styles.heading}>
            Every element reveals in sequence.
          </h2>
          <p className={styles.body}>
            Wrap any block of content in RevealGroup and each direct child
            animates in with a staggered fade-up on scroll. No extra markup needed.
          </p>
          <img
            src="/demo-assets/kickandbass.png"
            alt="Kickandbass"
            className={styles.image}
          />
        </RevealGroup>
      </section>

      {/* Nested group — cards */}
      <section className={styles.section}>
        <p className={styles.sectionLabel}>Nested group</p>
        <RevealGroup stagger={120} distance="2.5em" start="top 80%">
          <h2 className={styles.heading}>
            Nested children stagger independently.
          </h2>
          <RevealNested stagger={80} distance="1.5em" className={styles.grid}>
            <div className={styles.card}>
              <img src="/demo-assets/models/model0.png" alt="" className={styles.cardImg} />
            </div>
            <div className={styles.card}>
              <img src="/demo-assets/models/model1.png" alt="" className={styles.cardImg} />
            </div>
            <div className={styles.card}>
              <img src="/demo-assets/models/model2.png" alt="" className={styles.cardImg} />
            </div>
          </RevealNested>
        </RevealGroup>
      </section>

      {/* includeParent — tags */}
      <section className={styles.section}>
        <p className={styles.sectionLabel}>Include parent</p>
        <RevealGroup stagger={100} distance="2em" start="top 85%">
          <h2 className={styles.heading}>
            The wrapper itself can join the reveal.
          </h2>
          <p className={styles.body}>
            Set includeParent on RevealNested to animate the container in
            before its children cascade out.
          </p>
          <RevealNested includeParent stagger={60} distance="1em" className={styles.tagGroup}>
            <span className={styles.tag}>Motion design</span>
            <span className={styles.tag}>Web animation</span>
            <span className={styles.tag}>GSAP</span>
            <span className={styles.tag}>ScrollTrigger</span>
            <span className={styles.tag}>Next.js</span>
          </RevealNested>
        </RevealGroup>
      </section>

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