Brickslab.

@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

PropTypeDéfautRequisDescription
childrenReactNode—✓Texte à afficher avec l'effet aurora.
colorsstring[]——Tableau de couleurs du dégradé. Défaut : brand palette.
speednumber4—Durée d'un cycle d'animation en secondes.
anglenumber135—Angle du dégradé en degrés.
intensitynumber1—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.

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>