Brickslab.Tools

@brickslab./ui-web

Particules sparkle flottantes autour du texte. Idéal pour les CTA hero et les mises en avant premium sans être kitsch.

Défaut

palette brand — 8 sparkles

Nouveau dans la bibliothèque

Densité et taille

Léger (4 sparkles, taille 8)Dense (15 sparkles, taille 14)

Couleurs personnalisées

Palette chaleureuse

Props

Prop	Type	Défaut	Requis	Description
`children`	`string`	—	✓	Texte affiché avec les sparkles.
`count`	`number`	`8`	—	Nombre de sparkles générés.
`size`	`number`	`10`	—	Taille de base des sparkles en px.
`speed`	`number`	`1.2`	—	Durée d'un cycle de sparkle en secondes.
`colors`	`string[]`	—	—	Couleurs des sparkles. Défaut : palette brand.
`area`	`"text" \| "bounds"`	`"bounds"`	—	Zone de distribution des sparkles.
`reducedMotion`	`"auto" \| "always" \| "never"`	`"auto"`	—	Désactive les sparkles 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="..."
  count={8}
  size={10}
  speed={1.2}
  colors="..."
  area="bounds"
  reducedMotion="auto"
/>

childrencountsizespeedcolorsareareducedMotion

Utilisation

tsx

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

// CTA avec sparkles
<SparklesText count={10} size={12}>
  Nouveau composant ✨
</SparklesText>

// Couleurs custom
<SparklesText colors={["#F59E0B", "#FBFBFB"]} count={6}>
  Doré et blanc
</SparklesText>