Brickslab.Tools

@brickslab./ui-web

Rotation de mots pour titres dynamiques. Alterne une liste de mots avec des transitions slide, fade ou flip à intervalle configurable.

Transitions

slide · fade · flip

Transition « Moderne » (slide)

Transition « Moderne » (fade)

Transition « Moderne » (flip)

Dans un titre hero

Construire des interfaces rapides

Props

Prop	Type	Défaut	Requis	Description
`words`	`string[]`	—	✓	Liste de mots à alterner.
`interval`	`number`	`2500`	—	Temps d'affichage par mot en ms.
`transition`	`"slide" \| "fade" \| "flip"`	`"slide"`	—	Effet de transition entre les mots.
`duration`	`number`	`0.4`	—	Durée de la transition en secondes.
`pauseOnHover`	`boolean`	`false`	—	Met en pause la rotation au survol.
`loop`	`boolean`	`true`	—	Boucle infinie ou arrêt au dernier mot.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Affiche statiquement si réduit.
`onChange`	`(index: number) => void`	—	—	Callback appelé à chaque changement de mot.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  words="..."
  interval={2500}
  transition="slide"
  duration={0.4}
  pauseOnHover={false}
  loop={true}
  reducedMotion="auto"
  onChange={0}
/>

wordsintervaltransitiondurationpauseOnHoverloopreducedMotiononChange

Utilisation

tsx

import { WordRotate } from "@brickslab./ui-web";

// Headline dynamique
<h1>
  Je suis{" "}
  <WordRotate
    words={["Designer", "Développeur", "Créateur"]}
    transition="slide"
    interval={2000}
  />
</h1>

// Transition fade
<WordRotate
  words={["Rapide", "Fiable", "Accessible"]}
  transition="fade"
  pauseOnHover
/>