AstroAnimate Docs — Installation, Components & API

What You’ll Achieve

This page helps you learn AstroAnimate by running practical example code.

By the end of this page, you will:

Find official example project locations
Understand what each example demonstrates
Reuse proven implementation patterns in your app
Validate setup before broader rollout

Prerequisites / Requirements

Before using example projects:

bash

npm install @astroanimate/core

You completed:
- /docs/installation/
- /docs/quick-start/
Your Astro version is compatible (^4.0.0 || ^5.0.0)

Step-by-Step Guide

Step 1: Start with the official basic example

Use the project example located at:

→ astroanimate/examples/basic/src/pages/index.astro

This example demonstrates:

TextRotate with enhancement
FadeIn with entry props
Reveal with opt-in enhancement

Step 2: Reproduce the same pattern in your app

Create or edit your local page:

---
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 advance direction="up" distance=20>
    <p>FadeIn stays visible without JavaScript and enhances when active (v2.x.y)</p>
  </FadeIn>

  <Reveal advance effect="fade-up" delay=200>
    <p>Reveal follows the same opt-in enhancement pattern.</p>
  </Reveal>
</main>

Step 3: Validate expected outcome

Run:

npm run dev

Expected result:

page renders without import errors
rotating text updates as configured
reveal/fade effects respond to enhancement behavior

Related Resources

FAQ (Developer Questions)

Is AstroAnimate only for Astro?

Yes. It is fully built for the Astro ecosystem.

How many official examples are available right now?

At minimum, a basic official example is present and suitable for initial onboarding.

Should I copy the example code as-is?

Use it as a baseline, then adapt spacing, content, and props to your product context.

Is this page meant to replace API docs?

No. This page is for runnable usage patterns; API details should live in component/API docs.

What should I do after running the basic example?

Move to API/component docs and establish team-level reusable patterns.

Example Projects