Text Animations

All text animations require GSAP to be installed first. No global CSS setup required - the component is fully self-contained and inherits styles automatically.

Install GSAP

npm install gsap

Add the component

npx shadcn@latest add https://glsilk.vercel.app/r/split-text-animation.json

Quick Start

app/page.tsx

import { SplitTextAnimation } from "@/components/ui/split-text-animation";

export default function Home() {
  return (
    <SplitTextAnimation
      text="Hello World"
      animationType="fade"
      duration={0.8}
      stagger={0.03}
    />
  );
}

Examples

Default

Open in

<SplitTextAnimation
  text="Beautiful Fade In Animation"
  animationType="fade"
  duration={0.8}
  stagger={0.03}
/>

Animation Types

Explore different animation types:

The component automatically inherits all font properties (size, weight, family, color) from its container. Apply any Tailwind classes or custom CSS to the component and all styles will be applied to each animated character:

<SplitTextAnimation
  text="Custom Styled Text"
  className="text-2xl text-green-500"
  animationType="fade"
/>

Supported CSS classes:

Text sizing: text-sm, text-lg, text-4xl, etc.
Font weight: font-normal, font-bold, font-black, etc.
Colors: text-blue-500, text-red-600, etc.
Custom styles: font-mono, tracking-wider, italic, etc.
Gradients: bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent