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>
);
}