BricksLab Catalog

@brickslab/ui-web

Annotation SVG animée sur du texte — soulignement, encadrement, cercle, barré ou surlignage. Animation draw/fill configurable avec déclencheur view, hover ou manual.

Types d'annotation

highlight · underline · box · circle · strike

highlightunderlineboxstrike

Hover

trigger="hover" — survolez le texte

Soulignement hoverSurlignage hover

Props

Prop	Type	Défaut	Requis	Description
`children`	`ReactNode`	—	✓	Texte ou contenu à annoter.
`action`	`"highlight" \| "underline" \| "box" \| "circle" \| "strike"`	`"underline"`	—	Type d'annotation.
`color`	`string`	`"#F59E0B"`	—	Couleur de l'annotation.
`strokeWidth`	`number`	`3`	—	Épaisseur du trait SVG.
`duration`	`number`	`0.6`	—	Durée de l'animation en secondes.
`trigger`	`"view" \| "hover" \| "manual"`	`"view"`	—	Déclencheur de l'animation.
`startOnView`	`boolean`	`true`	—	Déclenche à l'entrée dans le viewport.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Désactive l'animation si réduit.

Utilisation

tsx

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

// Soulignement animé
<TextHighlighter action="underline">
  Mot important
</TextHighlighter>

// Encadrement
<TextHighlighter action="box" color="#CC4A48">
  Encadré en rouge
</TextHighlighter>

// Surlignage au survol
<TextHighlighter action="highlight" trigger="hover" color="#F59E0B">
  Surlignage hover
</TextHighlighter>