TextRotate

Texto animado que alterna entre múltiplas opções em um loop.

Importação

import { TextRotate } from 'asterui'

Exemplos

Básico

Texto rotativo simples com múltiplos idiomas.

</>

HelloSalutHolaCiaoHallo

import { TextRotate } from 'asterui'

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

export default App

Centralizado

Texto rotativo alinhado ao centro.

</>

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

Itens Estilizados

Cada item pode ter estilo personalizado.

</>

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

Duração Personalizada

Rotação mais rápida com ciclo de 6 segundos.

</>

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

Propriedade	Descrição	Tipo	Padrão
items	Itens de texto para rotacionar (máximo 6)	React.ReactNode[]	-
duration	Duração da animação em ms	6000 | 9000 | 12000 | 15000 | 18000	10000
centered	Centralizar texto horizontalmente	boolean	false
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

Acessibilidade

• Animação pausa ao passar o cursor para leitura mais fácil
• Suporta preferências de movimento reduzido
• Texto permanece legível em todos os estados de animação