Pixel wall background

Candidate

Pixel wall background est un fond decoratif pour les heroes marketing et les surfaces editoriales Sirdata. Il reprend la logique de matrice des logos produits avec des carres orientes a 45 degres, animes uniquement en opacite.

Preview

Densities

Density	Usage
low	Fond aerien pour un hero calme ou une grande surface.
medium	Densite par defaut pour les heroes marketing.
high	Texture plus presente, a reserver aux zones sans contenu dense.

Tone dark

Le tone dark utilise ses propres valeurs CSS pour rester lisible sur fond sombre sans reprendre les intensites du tone light.

Astro

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

<section class="hero">
  <PixelWallBackground density="medium" />
  <div class="hero-content">
    <p class="pixel-eyebrow">Plateforme Sirdata</p>
    <h1>Performance powered by privacy.</h1>
  </div>
</section>

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

Pour une surface sombre :

<section class="hero hero--dark">
  <PixelWallBackground density="low" tone="dark" />
  <div class="hero-content">
    ...
  </div>
</section>

Tokens

Le fill des losanges est controle par des variables de tone. Elles peuvent etre surchargees au niveau du parent ou du composant.

.hero--dark .pixel-wall-background {
  --pixel-wall-dark-color: var(--color-neutral-100);
  --pixel-wall-dark-border-color: color-mix(in srgb, var(--color-neutral-100) 20%, transparent);
  --pixel-wall-dark-rest-opacity: 0;
  --pixel-wall-dark-intensity: 0.24;
  --pixel-wall-dark-blend-mode: screen;
}

Variables disponibles :

Variable	Role
--pixel-wall-light-color	Fill des losanges en tone light.
--pixel-wall-light-border-color	Contour des losanges en tone light.
--pixel-wall-light-intensity	Opacite maximale du fill en tone light.
--pixel-wall-dark-color	Fill des losanges en tone dark.
--pixel-wall-dark-border-color	Contour des losanges en tone dark.
--pixel-wall-dark-intensity	Opacite maximale du fill en tone dark.
--pixel-wall-duration	Duree du cycle d’animation.
--pixel-wall-easing	Courbe d’animation.

Motion

Tous les losanges partagent la meme animation d’opacite. Les delays sont deterministes par cellule pour creer une sensation organique sans JavaScript runtime.

prefers-reduced-motion supprime l’animation et conserve uniquement la trame de contours.

Do / Don’t

Do	Don’t
Utiliser le fond derriere un contenu court et fortement hierarchise.	Placer du texte dense ou des tableaux directement dessus.
Garder l’animation lente et ton sur ton.	Ajouter des mouvements, rotations ou changements de taille.
Ajuster la densite selon la surface disponible.	Utiliser le motif comme un element porteur d’information.
Le laisser decoratif avec aria-hidden.	Le rendre interactif ou focusable.

Accessibility

Le composant est decoratif et rendu avec aria-hidden="true". Il ne doit jamais etre le seul support d’une information.

Status

Candidate. La V1 couvre les densites low, medium, high, les tones light / dark, et la reduction de mouvement.