@animx-jaya/animations

A collection of 14+ ready-to-use animation components for React — powered by GSAP, Framer Motion, CSS, and Tailwind.

✨ What's New in v0.1.1

100% Fully Customizable Components: All 14 components have been entirely refactored to support full customizability through comprehesive TypeScript-safe React props! You can now freely configure colors, spacing, typography, motion curves, sizing and content directly via inline props without touching their core code.

Part of the AnimX framework.

Installation

npm install @animx-jaya/animations @animx-jaya/core

Peer Dependencies

Install the peer dependencies for the animation engines you plan to use:

# For GSAP animations
npm install gsap

# For Framer Motion animations
npm install framer-motion

# All peer dependencies
npm install react react-dom gsap framer-motion lucide-react

Included Animations

GSAP Animations

| Component | Description | |-----------|-------------| | CounterAnimation | Animated number counter with easing | | InfiniteTextMarquee | Infinite scrolling text marquee | | MagneticCursor | Cursor that magnetically attracts elements | | PaperFoldScroll | Paper folding effect on scroll | | ParallaxHero | Parallax scrolling hero section | | HorizontalScrollText | Horizontally scrolling text on scroll | | ScrollExpandMedia | Media that expands as you scroll | | SvgPathDrawing | Animated SVG path drawing | | TextScramble | Text scramble / decode effect | | TestimonialStackCards | Stacked card testimonials |

Framer Motion Animations

| Component | Description | |-----------|-------------| | CardFlip3D | 3D card flip interaction | | FullscreenCardSwipe | Fullscreen swipeable cards |

CSS Animations

| Component | Description | |-----------|-------------| | NeonGlow | Neon glow text effect |

Tailwind Animations

| Component | Description | |-----------|-------------| | StaggerPulse | Staggered pulse animation |

Usage

Individual Components

import { TextScramble, ParallaxHero } from '@animx-jaya/animations'

function App() {
  return (
    <div>
      <ParallaxHero />
      <TextScramble />
    </div>
  )
}

Animation Registry

Access all animations programmatically:

import { ANIMATION_REGISTRY } from '@animx-jaya/animations'

// Iterate over all animations
ANIMATION_REGISTRY.forEach(({ id, component: Component, metadata }) => {
  console.log(`${metadata.name} — ${metadata.description}`)
})

With Metadata

Each animation exports its metadata for programmatic use:

import { TextScramble, TextScrambleMeta } from '@animx-jaya/animations'

console.log(TextScrambleMeta.name)        // "Text Scramble"
console.log(TextScrambleMeta.engine)      // "gsap"
console.log(TextScrambleMeta.difficulty)  // "intermediate"

Related Packages

• @animx-jaya/core — Core engine and type system

License

MIT © Jayavardhan Reddy