Brickslab.Tools

@brickslab./ui-web

Animation multi-segments : découpe un texte par mot, caractère ou ligne et applique un preset d'animation (fade, blur, slide, scale, rise) avec stagger configurable.

Presets

fade · blur · slide · scale · rise — par mot

Par caractère

granularité character — stagger réduit

Props

Prop	Type	Défaut	Requis	Description
`children`	`string`	—	✓	Texte à animer.
`by`	`"text" \| "word" \| "character" \| "line"`	`"word"`	—	Granularité de segmentation.
`preset`	`"fade" \| "blur" \| "slide" \| "scale" \| "rise"`	`"fade"`	—	Preset d'animation par segment.
`delay`	`number`	`0`	—	Délai initial en secondes avant la première animation.
`stagger`	`number`	`0.05`	—	Délai entre chaque segment en secondes.
`duration`	`number`	`0.5`	—	Durée de l'animation par segment.
`startOnView`	`boolean`	`false`	—	Déclenche l'animation à l'entrée dans le viewport.
`once`	`boolean`	`true`	—	N'anime qu'une seule fois si startOnView est actif.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Comportement quand prefers-reduced-motion est actif.
`onStart`	`() => void`	—	—	Callback déclenché au début de l'animation.
`onComplete`	`() => void`	—	—	Callback déclenché à la fin de l'animation.

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
  children="..."
  by="word"
  preset="fade"
  delay={0}
  stagger={0.05}
  duration={0.5}
  startOnView={false}
  once={true}
  // +3 autres props disponibles
/>

childrenbypresetdelaystaggerdurationstartOnViewoncereducedMotiononStartonComplete

Utilisation

tsx

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

<TextAnimate preset="slide" by="word">
  Chaque mot glisse vers le haut.
</TextAnimate>

<TextAnimate preset="blur" by="character" stagger={0.03}>
  Lettre par lettre, avec blur.
</TextAnimate>

<TextAnimate preset="rise" startOnView stagger={0.08}>
  Animé à l'entrée dans le viewport.
</TextAnimate>