Comment ajouter un fond de particules en React (gratuit) — Guide complet 2026

Qu'est-ce qu'un fond de particules et pourquoi l'utiliser ?

Un particles background (fond de particules) est une animation visuelle où des points, des étoiles ou des formes géométriques flottent et se déplacent en arrière-plan d'une interface. Ce type d'effet est devenu incontournable dans le design d'interfaces modernes, notamment pour les pages d'accueil, les sections héros et les dashboards à fort impact visuel.

L'intérêt principal d'un fond de particules est de créer une profondeur visuelle et d'attirer l'attention de l'utilisateur sans surcharger le contenu principal. Associé à des styles comme le glassmorphism ou le dark mode, il donne une impression de sophistication technologique immédiatement mémorisable.

Contrairement à ce que l'on pourrait croire, ajouter un tel effet à une application React ne nécessite ni bibliothèque payante ni configuration complexe. Empire UI propose des composants prêts à l'emploi, entièrement gratuits, qui s'intègrent en quelques lignes de code dans n'importe quel projet React ou Next.js.

Prérequis et installation d'Empire UI

Avant de commencer, assurez-vous de disposer d'un projet React ou Next.js fonctionnel. Empire UI est compatible avec React 18+, Next.js 13+ (App Router inclus) et Tailwind CSS. Si vous n'avez pas encore Tailwind CSS configuré, consultez la documentation officielle pour l'ajouter en quelques minutes.

L'installation d'Empire UI se fait via npm ou yarn. Ouvrez votre terminal et exécutez la commande suivante à la racine de votre projet : ``bash npm install empire-ui # ou yarn add empire-ui ` Une fois l'installation terminée, vérifiez que le package apparaît bien dans votre package.json. Vous avez désormais accès à l'ensemble des composants de la bibliothèque, dont le composant ParticlesBackground`.

Si vous souhaitez explorer toutes les possibilités offertes par Empire UI — curseurs animés, fonds dynamiques, templates par industrie — rendez-vous sur la page des templates ou découvrez les curseurs personnalisés pour enrichir encore davantage votre interface.

Intégrer le composant ParticlesBackground en 5 minutes

Empire UI propose un composant ParticlesBackground clé en main. Il s'utilise comme un wrapper autour de votre contenu ou comme fond absolu positionné derrière vos éléments. Voici un exemple d'intégration basique dans une page Next.js :

import { ParticlesBackground } from 'empire-ui';

export default function HeroSection() {
  return (
    <div className="relative min-h-screen bg-black overflow-hidden">
      {/* Fond de particules en position absolue */}
      <ParticlesBackground
        particleCount={120}
        color="#6366f1"
        speed={0.4}
        opacity={0.7}
        connectLines={true}
        lineColor="rgba(99, 102, 241, 0.3)"
      />

      {/* Contenu de la section */}
      <div className="relative z-10 flex flex-col items-center justify-center min-h-screen text-white">
        <h1 className="text-6xl font-bold tracking-tight">
          Bienvenue sur Empire UI
        </h1>
        <p className="mt-4 text-xl text-gray-300">
          Le fond de particules s'affiche automatiquement en arrière-plan.
        </p>
      </div>
    </div>
  );
}

La prop connectLines est particulièrement appréciée : elle trace des lignes dynamiques entre les particules proches, créant un effet de réseau neuronal très populaire dans les interfaces tech et IA. Pensez à ajouter relative et overflow-hidden au conteneur parent pour éviter que les particules ne débordent hors de la zone souhaitée.

Le composant utilise un <canvas> HTML5 en interne, optimisé avec requestAnimationFrame pour garantir des performances fluides à 60 fps même sur les appareils mobiles. Aucune dépendance externe (comme tsparticles) n'est requise — tout est intégré nativement dans Empire UI.

Personnalisation avancée : couleurs, formes et interactivité

Le composant ParticlesBackground expose de nombreuses props pour une personnalisation fine. Vous pouvez choisir la forme des particules (circle, star, triangle, square), leur taille minimale et maximale, ainsi que leur vitesse de déplacement. Voici un exemple avec des étoiles dorées pour un effet premium :

<ParticlesBackground
  particleCount={80}
  shape="star"
  color="#f59e0b"
  minSize={2}
  maxSize={5}
  speed={0.6}
  interactive={true}
  repulseDistance={100}
  connectLines={false}
/>

La prop interactive active la répulsion au curseur : les particules s'éloignent lorsque l'utilisateur survole la zone, créant une interaction immersive sans aucun JavaScript supplémentaire. C'est idéal pour les pages d'accueil de SaaS, de portfolios ou de landings pages qui cherchent à marquer les esprits.

Pour une cohérence de design, pensez à associer votre fond de particules avec d'autres composants Empire UI comme les curseurs personnalisés ou les effets de spotlight. Explorez également notre serveur MCP pour générer automatiquement des variantes de composants adaptées à votre charte graphique via l'IA.

Optimisation des performances et bonnes pratiques

Un fond de particules mal optimisé peut dégrader les performances de votre application, surtout sur mobile. Quelques règles d'or : limitez le nombre de particules à 80-150 maximum sur desktop, et utilisez la prop reducedMotion pour respecter la préférence système prefers-reduced-motion de vos utilisateurs :

import { useReducedMotion } from 'empire-ui';

export default function Hero() {
  const prefersReducedMotion = useReducedMotion();

  return (
    <div className="relative min-h-screen">
      {!prefersReducedMotion && (
        <ParticlesBackground
          particleCount={100}
          speed={0.5}
        />
      )}
      <div className="relative z-10">
        {/* votre contenu */}
      </div>
    </div>
  );
}

Pour les applications Next.js, il est recommandé d'importer le composant dynamiquement avec next/dynamic et l'option ssr: false, car le composant repose sur l'API Canvas qui n'existe pas côté serveur. Cela évite les erreurs d'hydratation et améliore le temps de chargement initial (LCP).

Enfin, n'oubliez pas de tester vos animations sur un throttling CPU (via les DevTools Chrome) pour vous assurer que l'expérience reste fluide sur des appareils moins puissants. Empire UI optimise déjà le rendu en interne, mais réduire particleCount à 50-60 sur mobile via un hook useIsMobile reste une bonne pratique. Consultez le blog Empire UI pour d'autres conseils d'optimisation.

Exemples d'utilisation créative par style visuel

Les fonds de particules s'associent particulièrement bien avec certains styles visuels. En glassmorphism, combinez des particules blanches semi-transparentes avec des cartes en verre pour un résultat épuré et futuriste — découvrez nos composants glassmorphism pour aller plus loin. En mode dark néo-brutaliste, des particules colorées vives sur fond noir créent un contraste saisissant.

Pour les landing pages IA ou tech, l'effet réseau avec connectLines={true} et une palette de bleus/violets est devenu le standard de l'industrie. Il évoque les réseaux neuronaux et renforce immédiatement la crédibilité technologique de votre produit. Associez-le au composant SpotlightEffect d'Empire UI pour un résultat encore plus impressionnant.

Les agences créatives et portfolios préféreront souvent des particules en forme d'étoiles avec un mouvement lent et une faible opacité, créant un ciel étoilé subtil qui n'entre pas en compétition avec le contenu principal. L'essentiel est toujours que le fond serve le contenu, et non l'inverse.

FAQ

À lire ensuite