Brickslab.Tools

@brickslab./ui-web

Halo lumineux pulsant sur du texte via text-shadow animé. Déclenché en permanence, au hover ou au viewport. Utile pour les états actifs, succès ou alertes visuelles.

Glow permanent

trigger="always" — couleurs brand

Glow brand rougeGlow vert succèsGlow bleu info

Hover

trigger="hover" — survolez le texte

Survolez pour activer le glow

Intensité

Intensité 5Intensité 15Intensité 30

Props

Prop	Type	Défaut	Requis	Description
`children`	`ReactNode`	—	✓	Texte ou contenu à illuminer.
`glowColor`	`string`	`"#CC4A48"`	—	Couleur du halo.
`intensity`	`number`	`10`	—	Intensité (spread) du text-shadow en px.
`pulse`	`boolean`	`true`	—	Active l'animation de pulsation.
`pulseRate`	`number`	`2`	—	Durée d'un cycle de pulse en secondes.
`trigger`	`"always" \| "hover" \| "view"`	`"always"`	—	Déclencheur du glow.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Désactive le pulse 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>}
  glowColor="#CC4A48"
  intensity={10}
  pulse={true}
  pulseRate={2}
  trigger="always"
  reducedMotion="auto"
/>

childrenglowColorintensitypulsepulseRatetriggerreducedMotion

Utilisation

tsx

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

// Glow permanent
<GlowPulseText glowColor="#CC4A48">
  Titre en glow continu
</GlowPulseText>

// Glow au hover
<GlowPulseText trigger="hover" glowColor="#4ADE80" intensity={15}>
  Hover pour glow
</GlowPulseText>

// Glow sans pulse (statique)
<GlowPulseText pulse={false} glowColor="#60A5FA">
  Halo fixe
</GlowPulseText>