BricksLab Catalog

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

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>