Brickslab.Lib

@brickslab./ui-web

Mise en avant intelligente de mots clés dans un texte avec des effets raise, glow, underline ou gradient. Les correspondances sont définies par string ou RegExp.

Effets par mot

raise · glow · underline · gradient

Glow sur mots clés

Props

Prop	Type	Défaut	Requis	Description
`children`	`string`	—	✓	Texte à analyser et mettre en emphase.
`highlights`	`SegmentHighlight[]`	—	✓	Règles de mise en emphase avec match et effet.
`by`	`"word" \| "match"`	`"word"`	—	Stratégie de correspondance.
`duration`	`number`	`0.4`	—	Durée de l'animation par segment.
`stagger`	`number`	`0.05`	—	Décalage entre segments.
`startOnView`	`boolean`	`true`	—	Déclenche au viewport.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Désactive les animations 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="..."
  highlights={[]}
  by="word"
  duration={0.4}
  stagger={0.05}
  startOnView={true}
  reducedMotion="auto"
/>

childrenhighlightsbydurationstaggerstartOnViewreducedMotion

Utilisation

tsx

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

<SegmentEmphasisText
  highlights={[
    { match: "rapide", effect: "raise" },
    { match: "accessible", effect: "glow" },
    { match: "moderne", effect: "gradient" },
  ]}
>
  Un design system rapide accessible et moderne.
</SegmentEmphasisText>