¿Qué es Generador de efectos de partículas?

Diseña y previsualiza animaciones de partículas para tu sitio web o aplicación. Configura la cantidad, velocidad, tamaño, color, forma, interacción y física para crear efectos como nieve, confeti, luciérnagas o patrones de galaxia. Exporta la configuración como código listo para usar.

Usa el motor tsParticles por debajo, así que el JSON que copies se puede pegar tal cual en un proyecto React, Vue o JavaScript puro. Las interacciones de ratón y clic (repulse, grab, bubble, push, remove), el fundido de opacidad y la animación de color (tono) funcionan sin configurar nada, y el export HTML incluye el motor por CDN para pegarlo en una página estática sin un paso de build. También puedes grabar la vista previa como un GIF animado para compartir el efecto donde quieras.

Cómo usar

1. Elige un efecto preestablecido (nieve, confeti, luciérnagas, burbujas, galaxia, red, fuegos artificiales, fuego, humo) o comienza desde cero.
2. Ajusta las propiedades de las partículas: cantidad, velocidad, rango de tamaño, colores, formas, opacidad y físicas como gravedad y rebote.
3. Previsualiza la animación en vivo, luego copia la configuración JSON de tsParticles, expórtala como un fragmento HTML independiente o captura la vista previa como un GIF animado.

Cuándo usar

• Añadir una capa de nieve o confeti a una landing de campaña navideña o lanzamiento.
• Prototipar un fondo para el hero de una web SaaS antes de pasarlo al diseñador.
• Crear un fondo de galaxia o luciérnagas para un portafolio o un menú de videojuego.

Resultado

Un desarrollador web selecciona el preestablecido de nieve, aumenta la cantidad de partículas a 200, añade una ligera deriva de viento y copia el JSON de configuración para agregar un efecto invernal a su página de aterrizaje navideña.

Preguntas frecuentes

¿El JSON exportado funciona en cualquier framework?

Sí. La configuración es compatible con tsParticles, que tiene bindings oficiales para React, Vue, Svelte, Angular y JS vanilla. Instala el wrapper correspondiente, pasa el JSON como prop options y verás el mismo efecto que aquí.

¿Cuántas partículas puedo poner antes de que vaya a tirones?

En un portátil moderno, entre 200 y 400 partículas se mueven a 60 fps. A partir de 500 los móviles de gama media empiezan a notarse. Las estrellas y polígonos cuestan más que los círculos. Para móvil quédate entre 100 y 150 con interacción desactivada.

¿Por qué la animación se ve distinta cuando exporto el HTML?

El snippet HTML estira el canvas al tamaño del contenedor padre. Si lo pegas en un div pequeño, las partículas se apelotonan. Dale al contenedor una altura fija (por ejemplo 100vh o 400px) y el canvas se ajusta solo.

¿Puedo usar una imagen propia como forma de partícula?

Desde la interfaz no, pero el motor sí lo permite. Exporta el JSON y modifica shape.options.image para apuntar a tu PNG o SVG. La imagen se renderiza con el tamaño y la opacidad que la simulación asigna a cada partícula.

¿La animación afecta a los Core Web Vitals?

Suma unos 30 a 80 KB gzipped por el motor más el repintado continuo del canvas. Para no bajar la nota de Lighthouse, reduce partículas e interacción en móvil. Cargar el motor de forma diferida tras el hero deja el LCP intacto.

Herramientas relacionadas