TextRotate

Texto animado que rota a través de múltiples opciones en un bucle.

Importación

import { TextRotate } from 'asterui'

Ejemplos

Básico

Texto rotativo simple con múltiples idiomas.

</>

HelloSalutHolaCiaoHallo

import { TextRotate } from 'asterui'

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

export default App

Centrado

Texto rotativo alineado al 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

Elementos Estilizados

Cada elemento puede tener 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

Duración Personalizada

Rotación más rápida con 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

Propiedad	Descripción	Tipo	Predeterminado
items	Elementos de texto a rotar (máximo 6)	React.ReactNode[]	-
duration	Duración de la animación en ms	6000 | 9000 | 12000 | 15000 | 18000	10000
centered	Centrar texto horizontalmente	boolean	false
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• La animación se pausa al pasar el cursor para facilitar la lectura
• Soporta preferencias de movimiento reducido
• El texto permanece legible en todos los estados de animación