Brickslab.Tools

@brickslab./ui-web

Effet machine à écrire — tape et efface un texte ou une séquence de mots avec curseur clignotant configurable.

Texte unique

text — frappe jusqu'à la fin et s'arrête

Séquence en boucle

words[] + loop — alterne entre plusieurs mots

Je suis

Variantes curseur

line · block · underscore

Props

Prop	Type	Défaut	Requis	Description
`text`	`string`	—	—	Texte unique à taper.
`words`	`string[]`	—	—	Séquence de mots à alterner.
`typeSpeed`	`number`	`60`	—	Vitesse de frappe en ms par caractère.
`deleteSpeed`	`number`	`40`	—	Vitesse de suppression en ms par caractère.
`loop`	`boolean`	`false`	—	Boucle infinie sur la séquence de mots.
`showCursor`	`boolean`	`true`	—	Affiche le curseur clignotant.
`cursor`	`"line" \| "block" \| "underscore"`	`"line"`	—	Forme du curseur.
`startOnView`	`boolean`	`false`	—	Démarre quand l'élément entre dans le viewport.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Désactive l'animation si prefers-reduced-motion.

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
  text="..."
  words="..."
  typeSpeed={60}
  deleteSpeed={40}
  loop={false}
  showCursor={true}
  cursor="line"
  startOnView={false}
  // +1 autres props disponibles
/>

textwordstypeSpeeddeleteSpeedloopshowCursorcursorstartOnViewreducedMotion

Utilisation

tsx

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

// Texte unique
<TypingAnimation text="Bonjour, je suis une machine à écrire." />

// Séquence avec boucle
<TypingAnimation
  words={["Designer", "Développeur", "Créateur"]}
  loop
  typeSpeed={80}
  wordPause={1200}
/>

// Curseur bloc
<TypingAnimation text="Curseur bloc" cursor="block" />