Roll Text

Buttons

About

An animated text component whose characters roll upward to reveal a copy of themselves on hover or keyboard focus, used as a hover flourish for links and buttons.

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

Code

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

Usage.tsx

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

export default function RollTextDemo() {
  return (
    <div className="flex min-h-[400px] w-full items-center justify-center">
      <a
        href="#"
        className="group text-2xl font-medium underline-offset-4 hover:underline"
      >
        <RollText>Hover to roll this text</RollText>
      </a>
    </div>
  );
}