Brickslab.Tools

@brickslab./ui-web

Révélation progressive de texte au scroll. Chaque mot, caractère ou ligne apparaît avec fondu et/ou flou, idéal pour guider la lecture.

Par mot (défaut)

fade + blur — déclenchement au viewport

Par caractère

Fade seulement

Props

Prop	Type	Défaut	Requis	Description
`children`	`string`	—	✓	Texte à révéler.
`by`	`"word" \| "character" \| "line"`	`"word"`	—	Granularité de révélation.
`fade`	`boolean`	`true`	—	Applique un effet de fondu.
`blur`	`boolean`	`true`	—	Applique un effet de flou à la révélation.
`duration`	`number`	`0.6`	—	Durée par segment en secondes.
`stagger`	`number`	`0.04`	—	Décalage entre segments en secondes.
`startOnView`	`boolean`	`true`	—	Déclenche quand l'élément entre dans le viewport.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Désactive le flou/fade si réduit.

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"
  fade={true}
  blur={true}
  duration={0.6}
  stagger={0.04}
  startOnView={true}
  reducedMotion="auto"
/>

childrenbyfadeblurdurationstaggerstartOnViewreducedMotion

Utilisation

tsx

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

// Révélation par mot au viewport
<TextReveal startOnView>
  Ce texte se révèle mot par mot en scrollant.
</TextReveal>

// Par caractère avec flou uniquement
<TextReveal by="character" blur fade={false} stagger={0.02}>
  Caractères avec blur
</TextReveal>