particles.js Playground: editor y generador de configuraciones en vivo
Edita una configuración de particles.js con controles o en JSON, mírala funcionar en vivo y copia el JSON o un fragmento HTML listo para pegar.
¿Encontraste un problema o algo que podría mejorar? Leemos todos los mensajes y lo arreglamos rápido.
Este playground de particles.js es un editor y generador en vivo de configuraciones de particles.js. Cambia con los controles el número de partículas, sus colores y formas, las líneas de enlace, el movimiento y los efectos al pasar el cursor y al hacer clic, o edita directamente la configuración JSON completa, y la vista previa se vuelve a ejecutar mientras escribes. Ambas vistas editan la misma configuración, así que puedes esbozarla con los deslizadores y afinarla en JSON. Cuando te guste, copia el JSON o un fragmento HTML completo con la etiqueta script y la llamada a particlesJS().
La vista previa ejecuta la biblioteca real particles.js 2.0.0, no una imitación, así que lo que ves es lo que mostrará tu página, con sus particularidades: solo acepta colores hexadecimales, el número de partículas se ajusta al tamaño del canvas cuando la densidad está activada y las líneas de enlace se vuelven costosas enseguida. El indicador de FPS te ayuda a valorar una configuración antes de llevarla a los móviles. particles.js no se ha actualizado desde la versión 2.0.0 de 2015; sigue funcionando en los navegadores actuales, y las notas de abajo explican cuándo es mejor opción tsParticles, su sucesor con mantenimiento.
Cómo usarla
- Elige un ajuste predefinido como punto de partida o pega tu propia configuración en el editor JSON (sirven un particlesjs-config.json, una llamada particlesJS("particles-js", {...}) o un objeto simple). También puedes arrastrar un archivo .json a la herramienta.
- Ajusta la configuración en la pestaña Controles: número y densidad de partículas, colores, forma, opacidad, tamaño, líneas de enlace, movimiento e interactividad. O edita el JSON directamente; los errores aparecen bajo el editor y la vista previa mantiene la última configuración válida.
- Fija el color o la imagen de fondo de la vista previa para que coincida con tu página, y pasa el cursor y haz clic sobre la vista previa para probar la interactividad. Usa Ampliar o Pantalla completa para verla a tamaño real y vigila el indicador de FPS.
- Elige una salida: el fragmento HTML, la variante con particlesJS.load, un componente React o la configuración JSON. Elige si el contenedor es un fondo de página completa o si rellena un elemento padre.
- Cópialo o descárgalo, y pega el fragmento HTML justo antes de la etiqueta de cierre </body> de tu página.
Preguntas frecuentes
¿Cómo añado particles.js a mi sitio web?
Añade un elemento vacío con un id, como <div id="particles-js"></div>, dale un tamaño con CSS, carga la biblioteca con una etiqueta script (jsDelivr la sirve en cdn.jsdelivr.net/npm/ seguido de particles.js@2.0.0/particles.min.js) y llama a particlesJS("particles-js", { ...config }) con ese id y tu configuración. El script tiene que ejecutarse cuando el elemento ya existe, así que ponlo justo antes de </body>. El motivo más habitual de que no se vea nada es un contenedor sin altura: particles.js dimensiona su canvas a partir del elemento, así que un div con altura 0 da un canvas con altura 0. El fragmento HTML de esta herramienta incluye el CSS para un fondo de página completa o para rellenar un elemento padre.
¿Cómo uso particles.js en React o Next.js?
Instálalo con npm install particles.js e impórtalo dentro de useEffect para que solo se ejecute en el navegador (usa window, así que importarlo en el nivel superior rompe el renderizado en el servidor de Next.js). Llama a window.particlesJS("particles-js", config) cuando el elemento se haya renderizado, y haz limpieza cuando el componente se desmonte: llama a pJS.fn.vendors.destroypJS() en cada entrada de window.pJSDom y restablece window.pJSDom a un array vacío; si no, el bucle de animación sigue en marcha y el siguiente montaje falla. La salida React / Next.js de esta herramienta es un componente que hace esto. Para un proyecto React nuevo, el paquete @tsparticles/react, que sí tiene mantenimiento, encaja de forma más natural.
¿Sigue teniendo mantenimiento particles.js? particles.js frente a tsParticles
No. particles.js, de Vincent Garreau, se quedó en la versión 2.0.0, publicada en 2015, y su repositorio no ha tenido nuevas versiones desde entonces. Sigue funcionando en los navegadores actuales porque solo usa canvas y requestAnimationFrame, y muchos sitios lo usan. tsParticles, de Matteo Bruni, empezó como una adaptación a TypeScript y es su sucesor con mantenimiento activo: tiene más formas y efectos, componentes oficiales para React, Vue, Angular y Svelte, mejores opciones de rendimiento, y puede leer la mayoría de las opciones de particles.js. Usa particles.js para un fondo rápido y sin dependencias en una página estática; elige tsParticles para una app con framework o para cualquier cosa que vayas a mantener durante años.
¿particles.js ralentiza un sitio web en el móvil?
Puede hacerlo. Cada partícula se redibuja en cada fotograma y, con las líneas de enlace activadas, se comprueba la distancia de cada partícula con todas las demás, así que el coste crece con el cuadrado del número de partículas. retina_detect duplica o triplica los píxeles dibujados en los teléfonos de alta densidad. Para que vaya fluido: mantén la densidad activada para que las pantallas pequeñas tengan menos partículas, no pases de unas 100 partículas con las líneas activadas, desactiva las líneas o retina_detect si bajan los FPS y no inicialices particles.js cuando el visitante tenga configurado prefers-reduced-motion. Los navegadores pausan requestAnimationFrame en las pestañas en segundo plano, así que no consume nada cuando la pestaña está oculta.
¿Por qué no se ve mi fondo de particles.js?
Comprueba esto por orden: que el contenedor tiene una altura real (height: 100% solo funciona si su padre también tiene altura, por eso el fragmento usa position: fixed o absolute); que la llamada a particlesJS se ejecuta cuando el elemento ya existe; que el color de las partículas es distinto del fondo; que ningún otro contenido lo tapa con un fondo opaco, y que la consola del navegador no muestra errores. Con particlesJS.load, la página debe servirse por http(s), ya que la carga del archivo JSON desde file:// está bloqueada. Un color escrito como nombre o como rgb() en lugar de en hexadecimal también impide que particles.js dibuje; esta herramienta lo señala.
¿Puede particles.js usar una imagen o una forma personalizada?
Sí. Pon shape.type en "image" y shape.image.src con la URL de la imagen; width y height fijan su relación de aspecto, y la opción size, el tamaño con que se dibuja. PNG, JPG, GIF y WebP se cargan como imágenes normales. Los archivos SVG se descargan con XMLHttpRequest para poder sustituir su color, lo que significa que el servidor que aloja el SVG debe permitir solicitudes entre orígenes. Además de imágenes, las formas integradas son circle, edge (un cuadrado), triangle, polygon y star, y polygon.nb_sides fija el número de lados o de puntas de la estrella. Un array de formas asigna a cada partícula una al azar.
Referencia de configuración de particles.js: las opciones que importan
Una configuración de particles.js tiene tres claves de nivel superior: particles (qué se dibuja y cómo se mueve), interactivity (cómo reacciona al ratón) y retina_detect. Cualquier clave que omitas toma el valor por defecto de la biblioteca, y esos valores son pesados: 400 partículas de radio 20 con líneas activadas. Por eso una configuración que solo fija un color no se parece a la demo.
• particles.number.value y density: con density.enable activado, value es la cantidad para un área de value_area × 1000 píxeles cuadrados, y la cantidad real se ajusta al canvas. 80 partículas con value_area 800 dan unas 200 en una pantalla de 1920×1080 y unas pocas decenas en un móvil.
• particles.color.value: una cadena hexadecimal, un array de cadenas hexadecimales (cada partícula elige una), "random" o un objeto {r, g, b}. Los colores por nombre y las cadenas rgb() no se admiten y detienen la animación.
• particles.shape.type: circle, edge, triangle, polygon, star o image, o un array de ellas. stroke añade un contorno; polygon.nb_sides fija los lados de polygon y las puntas de star.
• opacity y size: value es el máximo, random elige para cada partícula un valor entre 0 y ese máximo, y anim lo hace latir entre opacity_min / size_min y el valor a la velocidad indicada.
• line_linked: líneas entre las partículas que están a menos de distance píxeles, que se desvanecen con la distancia. Su color debe ser un único valor hexadecimal.
• move: speed, direction (none o una de las ocho direcciones), random (velocidades variadas), straight (sin deriva), out_mode (out reaparece por el otro lado, bounce rebota en los bordes), bounce (las partículas chocan entre sí) y attract.
• interactivity.events: modos de onhover grab (dibuja líneas hasta el cursor), bubble (crece o se desvanece cerca de él) y repulse (aparta); modos de onclick push (añade partículas), remove, bubble y repulse. Su intensidad se fija en interactivity.modes. detect_on es canvas por defecto; window hace que reaccione aunque haya contenido encima del canvas, usando coordenadas del viewport.
Instalar particles.js: CDN, npm o alojamiento propio
Desde un CDN: una etiqueta script cuyo src es cdn.jsdelivr.net/npm/ seguido de particles.js@2.0.0/particles.min.js (el fragmento HTML de arriba tiene la etiqueta completa). Fija la versión así en lugar de usar @latest. El paquete npm solo contiene el particles.js sin minificar; jsDelivr genera el archivo .min.js (unos 23 KB) bajo demanda y, como es generado, jsDelivr desaconseja añadirle un hash de integridad SRI.
Con npm: npm install particles.js@2.0.0 y luego import "particles.js" en el código del lado del cliente. El paquete no exporta nada; al importarlo se definen window.particlesJS y window.pJSDom. No incluye tipos de TypeScript, así que los proyectos TypeScript necesitan una línea declare module "particles.js" y deben llamarlo a través de window.
Alojamiento propio: copia particles.js del paquete npm (o el archivo minificado de jsDelivr) en tus archivos estáticos y apunta la etiqueta script hacia él. La biblioteca no usa eval, así que funciona con una Content-Security-Policy estricta que permita tus propios scripts; una forma de imagen necesita su host en img-src, y las imágenes SVG o particlesJS.load necesitan además el host en connect-src.
particles.js tiene licencia MIT, así que puedes usarlo en proyectos comerciales siempre que el aviso de licencia se mantenga en el archivo.
Cómo hacer un fondo de partículas rápido y accesible
Un fondo en movimiento es decoración, así que nunca debería estorbar. Respeta la preferencia de movimiento reducido iniciándolo solo cuando el visitante no haya pedido menos movimiento: if (!matchMedia("(prefers-reduced-motion: reduce)").matches) particlesJS("particles-js", config). Otra opción es mantenerlo pero poner move.enable en false, lo que dibuja un único fotograma fijo.
Mantén el texto legible: comprueba el color del texto con el fondo y con los colores de las partículas y las líneas, y añade una capa semitransparente bajo el texto si hace falta. Coloca el contenido por encima del canvas con position: relative y un z-index mayor y, si el canvas no debe captar los clics, ponle pointer-events: none y usa detect_on: "window" para los efectos al pasar el cursor.
Prueba en un teléfono real. El indicador de FPS de este playground mide tu ordenador, y un teléfono de gama media puede rendir un tercio de eso. Bajar el número de partículas, subir value_area, desactivar retina_detect y desactivar las líneas de enlace son, por ese orden, los cambios que más ayudan.
Herramientas gratis relacionadas
- Generador de degradados CSS — Crea degradados lineales, radiales y cónicos con paradas de color arrastrables, un selector de ángulo y plantillas. Copia el CSS o una clase de Tailwind.
- Generador de box-shadow — Diseña efectos box-shadow y text-shadow en capas con vista previa en vivo y ajustes predefinidos de elevación, neumorfismo y resplandor, y copia el CSS.
- Formateador JSON — Formatea, minifica y valida JSON, con los errores de análisis localizados por línea y columna. En tu navegador, sin subir nada.
- Generador de paletas de colores — Pulsa la barra espaciadora para obtener una paleta nueva, bloquea los colores que te gusten, elige una armonía o saca la paleta de una foto. Exporta a CSS, Tailwind, SCSS, JSON o PNG.
- Editor SVG — Dibuja formas, flechas, trazos a mano alzada y texto en un lienzo, y descarga un SVG o PNG limpio. Gratis, en tu navegador y sin registro.