BricksLab Catalog

@brickslab/ui-web

Déformation subtile via les axes d'une variable font (wght, wdth, slnt). Transitions fluides sur hover, scroll ou viewport. Nécessite une police variable dans la page.

Axe wght (poids)

hover — de 300 à 900

Survolez — poids variable

Axe wdth (largeur)

hover — de condensé à étendu

Condensé → Étendu

Combinaison d'axes

Gras + inclinaison combinés

Props

Prop	Type	Défaut	Requis	Description
`children`	`string`	—	✓	Texte à déformer via les axes variable font.
`axes`	`FontAxes`	—	—	Axes à animer : wght, wdth, slnt — chacun avec [valeurMin, valeurMax].
`trigger`	`"hover" \| "scroll" \| "view"`	`"hover"`	—	Déclencheur de la déformation.
`duration`	`number`	`0.4`	—	Durée de la transition en secondes.
`easing`	`string \| number[]`	`"ease"`	—	Timing function CSS ou cubic-bezier.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Désactive l'animation si réduit.

Utilisation

tsx

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

// Poids au survol
<VariableFontWarpText axes={{ wght: [300, 900] }}>
  De léger à bold au survol
</VariableFontWarpText>

// Largeur + inclinaison
<VariableFontWarpText axes={{ wdth: [75, 125], slnt: [0, -10] }}>
  Élargi et incliné
</VariableFontWarpText>