Tiles background

Candidate

Tiles background affiche une matrice decoratrice inspiree des logos produits Sirdata. La V1 reste volontairement simple : une seule matrice de huit grands losanges en neutral-50, avec des ombres qui pulsent de facon desynchronisee.

Preview Light

Dark

Densities

Density	Usage
low	Matrice plus petite, contexte secondaire
medium	Taille standard pour hero ou panneau de preview
high	Matrice plus grande, usage editorial ou fond de marque

Astro

---
import TilesBackground from '@sirdata/pixel/astro/TilesBackground';
---

<section class="hero">
  <TilesBackground density="medium" tone="light" />
  <h1>Activez vos audiences</h1>
</section>

Le parent doit etre positionne (position: relative) car le fond est place en absolute sur toute la surface.

Tokens

Les losanges utilisent --colors-neutral-50. Les shadows s’appuient sur --colors-neutral-300 et restent les seuls elements animes.

Motion

L’animation est limitee a l’ombre des pixels. Les pixels visibles restent fixes pour conserver une texture stable. prefers-reduced-motion supprime l’animation.

Do / Don’t

Do	Don’t
Utiliser le motif comme fond de contexte.	L’utiliser comme remplacement d’un logo officiel.
Garder le contenu principal au-dessus avec un contraste suffisant.	Placer du texte dense directement sur un motif trop visible.
Choisir tone="dark" sur une surface sombre.	Changer la couleur des losanges selon le produit.
Garder une seule matrice en fond calme.	Transformer ce composant en pattern complexe sans validation design.

Accessibility

Le fond est masque aux technologies d’assistance par defaut avec aria-hidden. Le motif ne doit jamais porter une information essentielle.

Status

Candidate. La V1 couvre une matrice unique, trois tailles, tones light/dark et reduction de mouvement.