StaggerTextButton NEW

A zero-JS, CSS-only button that animates its text character-by-character on hover for a playful micro-interaction.

Installation

npm install @astroanimate/core

Usage

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

<StaggerTextButton />

Renders the StaggerTextButton component with AstroAnimate defaults.

Props

Use When

• Building high-impact primary calls to action (CTAs)
• Adding engaging micro-interactions to navigation links
• Creating modern, playful landing page aesthetics

Avoid When

• The button label is excessively long (staggering more than a few words becomes visually chaotic and the built-in transition delays cap at 10 characters)
• The button contains icons or complex HTML (this component strictly splits plain strings into characters)

Accessibility

• Renders the full label safely to screen readers using aria-label on the parent container
• Uses aria-hidden="true" on the animated character spans to prevent screen readers from announcing fragmented, individual letters
• Implements focus-visible states for clear keyboard navigation
• Fully respects prefers-reduced-motion: reduce by disabling the staggered roll animations entirely

Performance

• Zero Hydration: Operates without any JavaScript; the string splitting ([...label]) runs entirely on the Astro server during build
• Hardware Accelerated: Animations solely use the GPU-friendly transform: translateY property, avoiding expensive layout repaints

Credits

• Credit to @Prashanth