Anatomie

La div racine est en position:relative avec overflow:hidden. Deux divs en position:absolute se superposent à l'intérieur : d'abord le fond de dégradé animé (linear-gradient à 200% de largeur, décalé par keyframe) ; ensuite une superposition radiale subtile qui ajoute de la profondeur lumineuse. Par-dessus les deux vient la rangée de contenu : une icône Sparkles, un court paragraphe avec lien inline optionnel, et un bouton de fermeture ancré au bord droit en position:absolute.

Comment ça marche

L'effet dégradé ne demande que deux keyframes CSS injectées via une balise `<style>` dans le composant. `banner-gradient-shift` déplace le background-position de `0% 50%` à `100% 50%` et retour en 6 secondes avec ease-in-out, créant un balayage de couleur fluide. `banner-gradient-in` translate toute la bannière de `translateY(-100%)` à `translateY(0)` avec ease-out sur 0.4s au montage. La fermeture repose sur un simple `useState(true)` : passé à false, le composant retourne null et React le démonte proprement.

Comment le coder en React

1. Mettre en place la structure en couches

   Crée une div relative avec overflow:hidden comme racine. À l'intérieur, ajoute deux divs en position absolute : une pour le fond de dégradé, une pour la superposition radiale. Toutes deux couvrent la racine avec `inset-0`. La rangée de contenu vient en dernier, en position relative pour se placer au-dessus des couches de fond.

2. Injecter les keyframes CSS

   Place une balise `<style>` à la fin du JSX pour définir les deux keyframes. L'animation de dégradé nécessite que backgroundSize soit à `200% 200%` sur l'élément cible pour que le décalage de position produise un mouvement visible. Garde l'animation d'entrée sur l'élément racine via la prop style `animation`.

   @keyframes banner-gradient-shift {
     0%, 100% { background-position: 0% 50%; }
     50%       { background-position: 100% 50%; }
   }
   @keyframes banner-gradient-in {
     from { opacity: 0; transform: translateY(-100%); }
     to   { opacity: 1; transform: translateY(0); }
   }

3. Connecter la fermeture avec useState

   Garde un seul flag booléen. Quand il vaut false, retourne null en amont pour que React retire complètement l'élément du DOM. Le bouton de fermeture appelle setVisible(false) via onClick. Pas d'animation de sortie obligatoire, mais tu peux envelopper la racine dans un AnimatePresence Framer Motion si tu veux un fondu à la fermeture.

   const [visible, setVisible] = useState(true);
   if (!visible) return null;

4. Utiliser les tokens CSS pour le thème

   Évite les valeurs hex codées en dur. Utilise `var(--color-accent)` pour le dégradé et `var(--color-background)` pour les couleurs de texte et d'icône. La bannière respecte ainsi automatiquement le preset de thème actif sans logique JavaScript supplémentaire.

Quand l'utiliser

À utiliser pour les annonces limitées dans le temps : une remise de lancement, une fenêtre de maintenance planifiée, le déploiement d'une nouvelle fonctionnalité. Elle fonctionne mieux comme opener en haut de page, placée avant la navbar ou le hero. À éviter sur les pages où le CTA principal doit être la première chose lue par le visiteur ; la bannière entre en compétition pour l'attention. Ne pas non plus empiler plusieurs bannières simultanément : un message, une bannière.

Utilisé par

• GitHub, Utilise des bannières dégradées en haut pour les alertes de statut plateforme et les annonces de nouvelles fonctionnalités.
• Vercel, Affiche des barres d'annonce à dégradé dismissables pour les lancements produit et les événements.
• Stripe, Déploie des bannières hautes avec fond changeant pour Stripe Sessions et les mises à jour majeures.

FAQ