BricksLab Catalog

@brickslab/ui-web

Underline cinétique qui s'étend depuis le centre au hover, focus ou active. Idéal pour les liens et CTAs texte avec une touche moderne.

Hover (défaut)

S'étend depuis le centre vers les bords

Survolez ce texte pour voir l'underline cinétiqueTrait épais (3px) — transition 0.5s

Dans une navigation

Props

Prop	Type	Défaut	Requis	Description
`children`	`ReactNode`	—	✓	Texte à souligner.
`trigger`	`"hover" \| "focus" \| "active"`	`"hover"`	—	Déclencheur de l'animation de l'underline.
`thickness`	`number`	`2`	—	Épaisseur du trait en px.
`offset`	`number`	`2`	—	Décalage vertical sous le texte en px.
`duration`	`number`	`0.3`	—	Durée de la transition en secondes.
`easing`	`string \| number[]`	`"ease"`	—	Timing function CSS.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Affiche l'underline directement si réduit.

Utilisation

tsx

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

// Lien avec underline cinétique
<KineticUnderlineText>
  Survolez pour voir l'underline
</KineticUnderlineText>

// Épaisseur et couleur custom
<KineticUnderlineText thickness={3} duration={0.5}>
  Underline épais
</KineticUnderlineText>