Brickslab.Tools

@brickslab./ui-web

Texte aimanté qui suit le curseur dans un rayon défini. Effet parallax ultra moderne pour CTA et titres hero. Lerp fluide avec friction configurable.

Défaut

Déplacez le curseur au-dessus du texte

BrickslabForce 0.6Rayon étroit

Sur un CTA

Découvrir la bibliothèque

Props

Prop	Type	Défaut	Requis	Description
`children`	`ReactNode`	—	✓	Contenu à aimanter.
`strength`	`number`	`0.4`	—	Force du déplacement (0–1).
`radius`	`number`	`120`	—	Rayon d'attraction du curseur en px.
`friction`	`number`	`0.15`	—	Friction du lerp — plus petit = plus fluide.
`trigger`	`"pointer" \| "tilt"`	`"pointer"`	—	Mode de déclenchement (pointeur souris ou inclinaison).
`disabledOnTouch`	`boolean`	`true`	—	Désactive l'effet sur les écrans tactiles.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Désactive le déplacement 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={<span>...</span>}
  strength={0.4}
  radius={120}
  friction={0.15}
  trigger="pointer"
  disabledOnTouch={true}
  reducedMotion="auto"
/>

childrenstrengthradiusfrictiontriggerdisabledOnTouchreducedMotion

Utilisation

tsx

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

// CTA aimanté
<MagneticText strength={0.5} radius={150}>
  <Button variant="primary">Découvrir</Button>
</MagneticText>

// Titre hero léger
<MagneticText strength={0.2} radius={200}>
  <h1>Brickslab</h1>
</MagneticText>