Tween UITween UI
7

Components

Text Roll Button

A pill button whose label rolls up character by character on hover.

Hover or focus the button and the label rolls up character by character — the current text lifts out the top while a fresh copy rolls in from below, with a fine per-character stagger. It is a real <button>, so onClick, type, disabled, and refs all work. Driven by GSAP.

New tab

Installation

pnpm dlx shadcn@latest add @tween-ui/text-roll-button

Usage

app/page.tsx
app/page.tsx
import TextRollButton from '@/components/tweenui/button/text-roll-button';
 
export default function Page() {
  return <TextRollButton onClick={() => console.log('clicked')}>Try now</TextRollButton>;
}

Props

Extends every native <button> attribute (onClick, type, disabled, ref, …).

PropTypeDefaultDescription
childrenstring—Button label (a string — it is duplicated and split).
type'button' | 'submit' | 'reset''button'Native button type.
classNamestring—Merged with the base styles.

Accessibility

It renders a native <button>; the visible label supplies its accessible name and the rolled-in duplicate is aria-hidden. Hover and keyboard focus both trigger the roll, and a focus ring is included. Under prefers-reduced-motion: reduce the label stays put with no roll.