BricksLab Catalog

@brickslab/ui-web

Révélation cinématique combinant un masque clip-path directionnel et un filtre SVG feTurbulence/feDisplacementMap pour un effet grain/noise premium.

Directions

left · right · up · down

Titre hero

Props

Prop	Type	Défaut	Requis	Description
`children`	`string`	—	✓	Texte à révéler.
`direction`	`"left" \| "right" \| "up" \| "down"`	`"left"`	—	Direction de la révélation.
`duration`	`number`	`1.2`	—	Durée de la révélation en secondes.
`intensity`	`number`	`20`	—	Intensité du filtre de déplacement noise.
`noiseScale`	`number`	`0.05`	—	Fréquence du bruit (feTurbulence baseFrequency).
`startOnView`	`boolean`	`true`	—	Déclenche à l'entrée dans le viewport.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Affiche immédiatement si réduit.
`onComplete`	`() => void`	—	—	Callback à la fin de la révélation.

Utilisation

tsx

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

// Révélation de gauche à droite
<NoiseRevealText direction="left" startOnView>
  Révélation cinématique
</NoiseRevealText>

// Révélation du bas vers le haut
<NoiseRevealText direction="up" duration={1.5} intensity={30}>
  Montée progressive
</NoiseRevealText>