astroanimate

Astro-native animation components: AnimatedButton, AnimatedCard, ExpandableCard, FadeInText, GlassCard, Loader, ProgressBar, RevealImage, ScaleIn, Tooltip, and TypewriterText.

Install

npm install @astroanimate/core

Quality Gates

• npm run build builds ESM output into dist/
• npm run typecheck runs astro check and TypeScript validation
• npm run lint validates the package source and tooling config
• npm run test runs the unit and contract test suite

Usage

Important: Due to Astro's component resolution limitations, components must be imported via subpath exports. Named imports from the main barrel (e.g., import { Tooltip } from "@astroanimate/core") will not work.

AnimatedButton

CSS-first button effects with no hydration and a visible no-JS baseline.

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

<AnimatedButton variant="shimmer">Explore</AnimatedButton>

AnimatedCard

Interactive card with lift, scale, shine, and flip effects.

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

<AnimatedCard
  title="Lift Card"
  description="Hover to see the lift effect with ambient glow"
  variant="lift"
  color="rose"
/>

FadeInText

Scroll-triggered fade-in with blur effect (opt-in enhancement).

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

<FadeInText duration={0.6} delay={0} enhance={true}>
  <h3>Fade In Text</h3>
  <p>This text fades in with blur effect on page load.</p>
</FadeInText>

When enhance=true, the element starts hidden and waits for JavaScript to initialise the IntersectionObserver. If JS is slow to load, the element has a built-in 2s CSS fallback animation that fires automatically — ensuring content never stays permanently invisible. This means in slow-JS environments, users may see content appear after roughly 2 seconds before the scroll-trigger behaviour takes over.

Loader

CSS-only loading indicators with multiple variants.

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

<Loader type="spinner" size={40} color="#3b82f6" />
<Loader type="dots" size={40} color="#10b981" />
<Loader type="pulse" size={40} color="#f59e0b" />

Tooltip

Hover-based tooltip with positioning options and optional enhancement.

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

<Tooltip content="Tooltip on top" position="top">
  <button>Hover me</button>
</Tooltip>

ScaleIn

Scale-in animation with optional JS enhancement.

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

<ScaleIn enhance duration={0.6} delay={0}>
  <h3>Scale In Content</h3>
  <p>This content scales in when scrolled into view.</p>
</ScaleIn>

TypewriterText

Typewriter effect with optional JS enhancement.

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

<TypewriterText text="Hello, World!" enhance speed={50} />

GlassCard

Glassmorphism UI with 3D tilt effect and dynamic glare.

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

<GlassCard
  title="Glassmorphism UI"
  subtitle="A New Design Trend"
  description="This card uses the glassmorphism effect to create a sense of depth and transparency."
  enableTilt={true}
  tiltIntensity={10}
/>

ExpandableCard

Expandable/collapsible card with CSS baseline and optional JS enhancement.

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

<ExpandableCard
  title="Expandable Card"
  subtitle="Click to expand"
  initialOpen={false}
  enhance={true}
  duration={300}
>
  <p>This content can be expanded and collapsed.</p>
</ExpandableCard>

ProgressBar

Progress bar with size variants (small, medium, large).

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

<ProgressBar value={75} max={100} label="Loading" size="medium" color="#3b82f6" />

RevealImage

Text with two images that reveal on hover (pure CSS).

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

<RevealImage
  text="Hover Me"
  image1="/path/to/image1.jpg"
  image2="/path/to/image2.jpg"
  alt="Reveal images"
/>

Exports

| Import | Component | | ----------------------------------- | -------------------- | | @astroanimate/core/AnimatedButton | AnimatedButton.astro | | @astroanimate/core/AnimatedCard | AnimatedCard.astro | | @astroanimate/core/ExpandableCard | ExpandableCard.astro | | @astroanimate/core/FadeInText | FadeInText.astro | | @astroanimate/core/GlassCard | GlassCard.astro | | @astroanimate/core/Loader | Loader.astro | | @astroanimate/core/ProgressBar | ProgressBar.astro | | @astroanimate/core/RevealImage | RevealImage.astro | | @astroanimate/core/ScaleIn | ScaleIn.astro | | @astroanimate/core/Tooltip | Tooltip.astro | | @astroanimate/core/TypewriterText | TypewriterText.astro |

Peer dependency

• astro ^4.0.0 || ^5.0.0

License

MIT