gamma logo

1

Text Roll

PreviousNext

An animated text component that reveals letters with a smooth vertical roll effect on hover.

Installation

pnpm dlx shadcn@latest add @gammaui/text-roll

Usage

import { TextRoll } from "@/components/ui/text-roll"
 
export default function Example() {
  return <TextRoll className="text-4xl font-semibold">Gamma UI</TextRoll>
}

This will create a letter-by-letter animated roll effect when hovering.

Props

PropTypeDefaultDescription
childrenstring—The text that will animate letter by letter.
classNamestring—Extra Tailwind classes applied to the wrapper.
centerbooleanfalseIf true, animation timing staggers from the center instead of left-to-right

Component Features

  • Smooth vertical roll animation on hover
  • Letter-by-letter stagger timing
  • Center stagger mode for symmetrical animations
  • Fully customizable with Tailwind CSS
  • “use client” compatible for Next.js App Router
  • Built using Motion One (motion/react)

Example: Centered Stagger Animation

import { TextRoll } from "@/components/ui/text-roll"
 
export default function Example() {
  return (
    <TextRoll center className="text-5xl font-bold">
      Gamma UI
    </TextRoll>
  )
}

Example: Animated Headline

export default function HeroSection() {
  return (
    <h1 className="text-6xl leading-tight font-extrabold">
      <TextRoll className="text-indigo-500">Build Fast</TextRoll>
      <br />
      <TextRoll center className="text-gray-800">
        Ship Beautiful
      </TextRoll>
    </h1>
  )
}

Tips

  • Best used for headlines, logos, or interactive hover reveals.
  • Combine with gradients for premium effect.
  • Increase the font weight to make the slide animation more satisfying.
  • Works great inside hero sections or call-to-action banners.