SightAnimText

High-performance, configurable text animations for React, powered by GSAP. Drop-in components for stunning reveal effects.

Installation

npm install sight-anim-text gsap @gsap/react
# or
yarn add sight-anim-text gsap @gsap/react
# or
pnpm add sight-anim-text gsap @gsap/react

Note: This library requires gsap and @gsap/react as peer dependencies.

Usage

AdvancedSplitText

The primary component for text reveal animations (Fade, Slide, Blur, Flip, Zoom, Elastic, Wave, Glow).

import { AdvancedSplitText } from 'sight-anim-text';

export default function Hero() {
  return (
    <AdvancedSplitText
      text="Hello World"
      variant="flip"
      className="text-4xl font-bold"
      duration={0.8}
      stagger={0.05}
      triggerStart="top bottom"
    />
  );
}

Variants

• fade
• slide
• blur
• flip
• zoom
• elastic
• wave
• glow

TextScramble

A futuristic text scrambling effect.

import { TextScramble } from 'sight-anim-text';

export default function MyComponent() {
  return (
    <TextScramble 
      text="ACCESS GRANTED" 
      className="font-mono text-green-500" 
      duration={1.2}
    />
  );
}

Setup (Next.js / SSR)

If you are using Next.js, these components are client-side only. The library handles "use client" directives automatically, so you can import them directly into your Client Components. For Server Components, you may need to wrap them in a client component or ensure the parent is a client component.

License

MIT