Brickslab.Tools

@brickslab./ui-web

Effet "scramble" : les caractères se brouillent avant de se résoudre en texte final. Déclenché par hover, tap, auto ou viewport. Idéal pour les micro-interactions sur CTA et titres.

Hover (défaut)

trigger="hover" — survolez le texte

Automatique au chargement

trigger="auto"

Jeu de caractères binaire

Props

Prop	Type	Défaut	Requis	Description
`children`	`string`	—	✓	Texte à brouiller.
`trigger`	`"hover" \| "tap" \| "auto" \| "view"`	`"hover"`	—	Déclencheur de l'effet scramble.
`duration`	`number`	`0.8`	—	Durée de l'animation en secondes.
`delay`	`number`	`0`	—	Délai initial en secondes.
`characterSet`	`string[]`	—	—	Jeu de caractères utilisé pour le scramble.
`startOnView`	`boolean`	`false`	—	Démarre quand visible dans le viewport.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Affiche le texte directement si réduit.
`onComplete`	`() => void`	—	—	Callback à la fin du scramble.

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="..."
  trigger="hover"
  duration={0.8}
  delay={0}
  characterSet="..."
  startOnView={false}
  reducedMotion="auto"
  onComplete={...}
/>

childrentriggerdurationdelaycharacterSetstartOnViewreducedMotiononComplete

Utilisation

tsx

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

// Scramble au survol (défaut)
<HyperText>Survolez-moi</HyperText>

// Automatique
<HyperText trigger="auto" delay={0.5}>
  Chargement automatique
</HyperText>

// Jeu de caractères custom
<HyperText characterSet={["0", "1"]} duration={1.2}>
  Mode binaire
</HyperText>