Texte rotatif

Texte animé qui alterne entre plusieurs options en boucle.

Importation

import { TextRotate } from 'asterui'

Exemples

Basique

Texte rotatif simple avec plusieurs langues.

</>

HelloSalutHolaCiaoHallo

import { TextRotate } from 'asterui'

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

export default App

Centré

Texte rotatif aligné au centre.

</>

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

Éléments stylisés

Chaque élément peut avoir un style personnalisé.

</>

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

Durée personnalisée

Rotation plus rapide avec un cycle de 6 secondes.

</>

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

Propriété	Description	Type	Défaut
items	Éléments de texte à faire tourner (max 6)	React.ReactNode[]	-
duration	Durée de l’animation en ms	6000 | 9000 | 12000 | 15000 | 18000	10000
centered	Centrer le texte horizontalement	boolean	false
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

Accessibilité

• L’animation se met en pause au survol pour faciliter la lecture
• Supporte les préférences de mouvement réduit
• Le texte reste lisible à tous les états de l’animation