Brickslab.Tools

@brickslab./ui-web

Dégradé animé sur du texte. Plus contrôlable qu'AuroraText, pensé pour les titres brandables avec choix du mode (shift/rotate/pulse) et du type (linear/radial).

Modes d'animation

shift · rotate · pulse

Animation « shift »Animation « rotate »Animation « pulse »

Couleurs personnalisées

Palette brand complète

Mode radial

Centre vers bords

Props

Prop	Type	Défaut	Requis	Description
`children`	`ReactNode`	—	✓	Texte à afficher avec le dégradé animé.
`colorStops`	`string[]`	—	—	Couleurs du dégradé. Défaut : palette brand.
`speed`	`number`	`4`	—	Durée d'un cycle en secondes.
`angle`	`number`	`90`	—	Angle du dégradé linéaire.
`mode`	`"linear" \| "radial"`	`"linear"`	—	Type de dégradé.
`animate`	`"shift" \| "rotate" \| "pulse"`	`"shift"`	—	Style d'animation du dégradé.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Désactive l'animation si prefers-reduced-motion.

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>}
  colorStops="..."
  speed={4}
  angle={90}
  mode="linear"
  animate="shift"
  reducedMotion="auto"
/>

childrencolorStopsspeedanglemodeanimatereducedMotion

Utilisation

tsx

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

<AnimatedGradientText>Dégradé animé par défaut</AnimatedGradientText>

// Palette custom + pulse
<AnimatedGradientText
  colorStops={["#CC4A48", "#F59E0B", "#4ADE80"]}
  animate="pulse"
  speed={3}
>
  Pulse coloré
</AnimatedGradientText>

// Mode radial
<AnimatedGradientText mode="radial">
  Centre lumineux
</AnimatedGradientText>