Docs·Text Roll

Text Roll

A compact 3D text rotator that rolls through words while reserving enough width for the longest item.

Installation

$pnpm dlx shadcn@latest add @spiderui/text-roll

Usage

API Reference

PropTypeDefault
itemsWords displayed by the rotating text slot.
readonly string[]—
intervalMilliseconds between item changes.
number1600
durationDuration of each roll transition, in seconds.
number0.45
initialIndexItem shown when the component first mounts.
number0
autoPlayAdvance through the items automatically.
booleantrue
loopReturn to the first item after the last one.
booleantrue
perspectiveCSS perspective used by the 3D roll.
number420
itemClassNameClasses applied to the animated item.
string—
onIndexChangeCalled after the visible item advances.
(index: number) => void—
classNameAdditional classes applied to the root span.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
$ npx shadcn addtabstabsbuttondialogtooltiptabs
import { TextRoll } from "@/components/ui/text-roll"
const components = ["tabs", "button", "dialog", "tooltip"]

export function Demo() {
  return (
    <div className="flex items-baseline gap-3 font-mono text-3xl">
      <span className="text-muted-foreground">$ npx shadcn add</span>
      <TextRoll items={components} interval={1500} />
    </div>
  )
}