Text Roll

Text 2

About

Characters roll in and out with a 3D perspective flip — each letter animates independently for a mechanical, tactile reveal effect.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Roll to your project and fits it to your theme.

Code

How Text Roll is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { TextRoll } from "@/components/ui/text-roll";

const links = ["Home", "About", "Work", "Blog", "Contact"];

export default function TextRollNav() {
  return (
    <div className="flex min-h-50 items-center justify-center px-6">
      <nav className="flex items-center gap-6">
        {links.map((link, i) => (
          <a
            className="group cursor-pointer font-medium text-muted-foreground text-sm hover:text-foreground"
            href="#"
            key={link}
            onClick={(e) => e.preventDefault()}
          >
            <TextRoll
              className="block"
              duration={0.35}
              getEnterDelay={(j) => i * 0.05 + j * 0.025}
              transition={{ ease: "easeOut" }}
            >
              {link}
            </TextRoll>
          </a>
        ))}
      </nav>
    </div>
  );
}