Text Animate

A text animation component that animates text using a variety of different animations.

Blur in by character

import { TextAnimate } from "@/components/vritti/text-animate";

export function TextAnimateExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <TextAnimate animation="blurInUp" by="character" once>
        Blur in by character
      </TextAnimate>
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/text-animate"

Dependencies


pnpm add motion