Text Roll

Text 117

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";

export default function TextRollHero() {
  return (
    <div className="flex min-h-50 flex-col items-center justify-center gap-3 px-6">
      <p className="font-medium text-muted-foreground text-sm uppercase tracking-widest">
        Introducing
      </p>
      <h1 className="text-center font-bold text-4xl text-foreground tracking-tight sm:text-5xl">
        <TextRoll duration={0.5} getEnterDelay={(i) => i * 0.04}>
          Design with motion
        </TextRoll>
      </h1>
    </div>
  );
}