BricksLab Catalog

@brickslab/ui-web

Texte avec contour animé (stroke) et reflet shimmer glissant. Effet très design system — idéal pour les titres hero et les états vides.

Transparent (contour seul)

fillMode="transparent" — stroke + shimmer

Remplissage solide

fillMode="solid" — texte plein avec shimmer overlay

Design System

Couleurs brand

Props

Prop	Type	Défaut	Requis	Description
`children`	`string`	—	✓	Texte à afficher avec l'effet shimmer.
`strokeWidth`	`number`	`1`	—	Épaisseur du contour du texte (-webkit-text-stroke).
`strokeColor`	`string`	`"var(--color-fg)"`	—	Couleur du contour.
`shimmerColor`	`string`	`"#FBFBFB"`	—	Couleur du reflet shimmer.
`speed`	`number`	`2`	—	Durée d'un cycle shimmer en secondes.
`fillMode`	`"solid" \| "transparent"`	`"transparent"`	—	Remplissage du texte — transparent = contour seul.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Désactive le shimmer si réduit.

Utilisation

tsx

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

// Contour shimmer transparent
<ShimmerBorderText>
  Outline shimmer
</ShimmerBorderText>

// Remplissage solide
<ShimmerBorderText fillMode="solid" strokeColor="#CC4A48" shimmerColor="#F59E0B">
  Texte plein + shimmer
</ShimmerBorderText>