Text Roll

Text roll hover effect with staggered character animations that reveal text from below

text roll hover animation stagger navigation

Hello

World

"use client";

import TextRoll from "@/components/vritti/text-roll";

export function TextRollExample() {
  return (
    <div className="flex flex-col items-center justify-center gap-4 p-8">
      <TextRoll className="text-4xl font-extrabold uppercase tracking-tight">
        Hello
      </TextRoll>
      <TextRoll center className="text-4xl font-extrabold uppercase tracking-tight">
        World
      </TextRoll>
    </div>
  );
}

Installation


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

Dependencies


pnpm add motion