AuroraBackground

Stable

Fond aurora du design system — position:fixed, plein écran, z-index:-1. Thème sombre : quad WebGL + shader plasma Simplex. Thème clair : 3 orbes CSS animées. Zéro prop, zéro coût GPU hors famille aurora.

import { AuroraBackground } from "@lyra/tokens/components";

Playground

Aperçu bornée — fond réel = position:fixed

AuroraBackground est monté une seule fois dans le layout (position:fixed, z-index:-1). Thème "aurora" sombre → quad WebGL + shader plasma. Thème "aurora-light" → orbes CSS animées. Aucune prop — primitive auto-contenue. Zéro coût GPU hors famille aurora.

Démo interactive — réglages du playground (props ajustables en direct) à venir.

// Monter une seule fois dans le layout (avant tout contenu)
<AuroraBackground />

// Fonctionne avec ThemeProvider (déjà monté par le layout Lyra)
// Thème "aurora" (sombre)  → WebGL plasma (fallback CSS orbes si reduced-motion)
// Thème "aurora-light"     → 3 orbes CSS animées
// Thème neutre             → null (aucun rendu, aucun coût GPU)

Documentation

Aperçu unique — pas de variantes documentées.

— (aucune prop — primitive auto-contenue)

// Monter une seule fois dans le layout (avant tout contenu)
<AuroraBackground />

// Fonctionne avec ThemeProvider (déjà monté par le layout Lyra)
// Thème "aurora" (sombre)  → WebGL plasma (fallback CSS orbes si reduced-motion)
// Thème "aurora-light"     → 3 orbes CSS animées
// Thème neutre             → null (aucun rendu, aucun coût GPU)