Brickslab.Tools

@brickslab./ui-web

Chaque mot passe progressivement de flou à net avec un stagger, créant un effet de focus guidé. Idéal pour les textes de présentation et les blocs de contenu hero.

Défaut

blur 12px → 0 — mot par mot

Flou intense

maxBlur=24 — effet dramatique

Props

Prop	Type	Défaut	Requis	Description
`children`	`string`	—	✓	Texte à révéler progressivement.
`maxBlur`	`number`	`12`	—	Flou de départ en px.
`duration`	`number`	`0.6`	—	Durée de la transition par mot en secondes.
`trigger`	`"scroll" \| "view"`	`"view"`	—	Mode de déclenchement.
`startOnView`	`boolean`	`true`	—	Déclenche à l'entrée dans le viewport.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Affiche directement si réduit.
`onComplete`	`() => void`	—	—	Callback à la fin de la révélation.

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="..."
  maxBlur={12}
  duration={0.6}
  trigger="view"
  startOnView={true}
  reducedMotion="auto"
  onComplete={...}
/>

childrenmaxBlurdurationtriggerstartOnViewreducedMotiononComplete

Utilisation

tsx

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

// Révélation au viewport
<ProgressiveBlurText startOnView>
  Ce texte passe de flou à net mot par mot.
</ProgressiveBlurText>

// Flou intense + durée longue
<ProgressiveBlurText maxBlur={24} duration={0.8}>
  Révélation dramatique
</ProgressiveBlurText>