Brickslab.Tools

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

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  children="..."
  axes={...}
  trigger="hover"
  duration={0.4}
  easing="ease"
  reducedMotion="auto"
/>

childrenaxestriggerdurationeasingreducedMotion

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>