Brickslab.Tools

@brickslab./ui-web

Dégradé de couleurs animé appliqué directement sur le texte via background-clip. Idéal pour les héros et titres premium.

Défaut

palette brand — animation shift continue

Brickslab Design System

Couleurs personnalisées

colors[] — palette entièrement configurable

Chaud — rouge, ambre, blancFroid — bleu, violet, vert

Vitesse

speed — cycles lents ou rapides

Rapide (1.5s)Lent (8s)

Props

Prop	Type	Défaut	Requis	Description
`children`	`ReactNode`	—	✓	Texte à afficher avec l'effet aurora.
`colors`	`string[]`	—	—	Tableau de couleurs du dégradé. Défaut : brand palette.
`speed`	`number`	`4`	—	Durée d'un cycle d'animation en secondes.
`angle`	`number`	`135`	—	Angle du dégradé en degrés.
`intensity`	`number`	`1`	—	Opacité globale (0–1).
`blendMode`	`"normal" \| "screen" \| "overlay"`	`"normal"`	—	Mode de fusion CSS.
`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>}
  colors="..."
  speed={4}
  angle={135}
  intensity={1}
  blendMode="normal"
  reducedMotion="auto"
/>

childrencolorsspeedangleintensityblendModereducedMotion

Utilisation

tsx

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

<AuroraText>Design System Aurora</AuroraText>

// Couleurs personnalisées
<AuroraText colors={["#CC4A48", "#F59E0B", "#4ADE80"]}>
  Palette sur mesure
</AuroraText>

// Vitesse et angle
<AuroraText speed={8} angle={45}>
  Dégradé lent à 45°
</AuroraText>