Brickslab.Tools

@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.

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="..."
  direction="left"
  duration={1.2}
  intensity={20}
  noiseScale={0.05}
  startOnView={true}
  reducedMotion="auto"
  onComplete={...}
/>

childrendirectiondurationintensitynoiseScalestartOnViewreducedMotiononComplete

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>