Looping Words

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

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

      {/* Hero — centered standalone */}
      <section className={styles.hero}>
        <LoopingWords
          words={["GSAP", "LOOPING", "WORDS", "ANIMATE", "CYCLE"]}
          delay={0.5}
          stepDuration={1.75}
          moveDuration={1.2}
          selectorDuration={0.5}
          className={styles.words}
        />
      </section>

      {/* Inline inside a heading */}
      <section className={styles.section}>
        <p className={styles.label}>[ Inline in heading ]</p>
        <h2 className={styles.heading}>
          We create{" "}
          <LoopingWords
            words={["brands", "products", "websites", "experiences"]}
            delay={1}
            stepDuration={2}
            moveDuration={1.2}
            selectorDuration={0.5}
          />
        </h2>
      </section>

    </div>
  );
}