TextRotate

Animated text that cycles through multiple options in a loop.

Import

import { TextRotate } from 'asterui'

Examples

Basic

Simple rotating text with multiple languages.

</>

HelloSalutHolaCiaoHallo

import { TextRotate } from 'asterui'

function App() {
  return (
      <TextRotate
        items={['Hello', 'Salut', 'Hola', 'Ciao', 'Hallo']}
        className="text-4xl font-bold"
      />
    )
}

export default App

Centered

Center-aligned rotating text.

</>

Build fasterShip soonerScale easilySleep better

import { TextRotate } from 'asterui'

function App() {
  return (
      <TextRotate
        items={[
          'Build faster',
          'Ship sooner',
          'Scale easily',
          'Sleep better',
        ]}
        centered
        className="text-3xl font-semibold text-primary"
      />
    )
}

export default App

Styled Items

Each item can have custom styling.

</>

CreativeInnovativeDynamicPowerful

import { TextRotate } from 'asterui'

function App() {
  return (
      <TextRotate
        items={[
          <span className="text-primary">Creative</span>,
          <span className="text-secondary">Innovative</span>,
          <span className="text-accent">Dynamic</span>,
          <span className="text-success">Powerful</span>,
        ]}
        className="text-5xl font-black"
      />
    )
}

export default App

Custom Duration

Faster rotation with 6 second cycle.

</>

BLAZINGFAST ▶︎▶︎

import { TextRotate } from 'asterui'

function App() {
  return (
      <TextRotate
        items={[
          'BLAZING',
          <span className="font-bold italic px-2">FAST ▶︎▶︎</span>,
        ]}
        duration={6000}
        centered
        className="text-7xl"
      />
    )
}

export default App

API

Property	Description	Type	Default
items	Text items to rotate through (max 6)	React.ReactNode[]	-
duration	Animation duration in ms	6000 | 9000 | 12000 | 15000 | 18000	10000
centered	Center text horizontally	boolean	false
className	Additional CSS classes	string	-
data-testid	Test ID for testing	string	-

Accessibility

• Animation pauses on hover for easier reading
• Supports reduced motion preferences
• Text remains readable at all animation states