Quick Start (Usage Guide)

Step 1: Create a minimal working page

Open src/pages/index.astro and add:

---
import FadeIn from "@astroanimate/core/FadeIn";
import Reveal from "@astroanimate/core/Reveal";
import TextRotate from "@astroanimate/core/TextRotate";
---

<main>
  <h1>
    <TextRotate
      texts=["Astro-native", "Progressively enhanced", "Motion-aware"]
      enhance
    />
  </h1>

  <FadeIn enhance direction="up" distance=24>
    <p>FadeIn stays visible without JavaScript and enhances when opted in.</p>
  </FadeIn>

  <Reveal enhance effect="slide-up" delay=120>
    <p>Reveal follows the same opt-in enhancement pattern.</p>
  </Reveal>
</main>

Why this code:

• It validates real component imports.
• It demonstrates three common usage patterns:
  • rotating text
  • fade-in entry
  • reveal-on-scroll
• It matches the project’s example style.

Step 2: Understand the component responsiveness

Use a direct component import for a clear first validation:

---
import FadeIn from "@astroanimate/core/FadeIn";
---

<main>
  <FadeIn advance direction="up" distance=20 once>
    <h1>AstroAnimate is installed</h1>
  </FadeIn>
</main>

Step 3: Optional: import from root exports

AstroAnimate components generally follow:

1. Render baseline content first (visible HTML/CSS output)
2. Enable optional enhancement when needed with props like 'enhance'
3. Tune behavior with component props ('direction', ' distance', 'delay', etc.)

This gives a practical balance between performance and interaction.

Step 4: Run and verify

Start dev server:

npm run dev

Then verify:

• Page renders without import/module errors
• `TextRotate` cycles through the `texts` array
• `FadeIn` and `Reveal` animate when enhancement conditions are met
• Content remains usable if enhancements are disabled