Text Flip

Rotating text animation that cycles through items with smooth transitions.

text animation flip rotate cycle transform

Build with

React

"use client";

import { TextFlip } from "@/components/vritti/text-flip";

export function TextFlipExample() {
  return (
    <div className="flex items-center justify-center gap-2 p-8 text-2xl font-bold">
      <span>Build with</span>
      <TextFlip className="text-primary">
        {["React", "Next.js", "Tailwind", "Motion"]}
      </TextFlip>
    </div>
  );
}

Installation


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

Dependencies


pnpm add motion