Vista previa del efecto de cursor
Mas bajo = las particulas duran mas
Copia y pega este codigo antes de </body> en tu sitio web.
| Efecto | Visual | Ideal Para | Comportamiento |
|---|---|---|---|
| Destello | ✦ Puntos de colores | Uso general, paginas de destino SaaS | Las particulas estallan radialmente desde el cursor con gravedad ligera |
| Burbuja | 🫧 Anillos expansivos | Portafolios creativos, sitios infantiles | Las burbujas flotan hacia arriba con un brillo lustroso |
| Estrella | ⭐ Estrellas de 5 puntas | Sitios de juegos, entretenimiento | Las estrellas giran mientras se alejan del cursor |
| Corazon | ❤️ Formas de corazon | Sitios de citas, paginas de bodas, San Valentin | Los corazones giran y caen, reduciendose al desvanecerse |
| Rastro de Neon | 💫 Anillos brillantes | Startups tecnologicas, sitios en modo oscuro | Los anillos se expanden con sombra difuminada, dejando un brillo de neon |
| Copo de Nieve | ❄️ Cristales de 6 brazos | Temas de invierno/festivos, paginas de temporada | Los copos giran suavemente mientras flotan en direcciones aleatorias |
El codigo crea un elemento <canvas> fijado a la ventana grafica con pointer-events: none — lo que significa que renderiza particulas visuales sobre tu contenido sin bloquear clics, enlaces ni interacciones. Con cada evento mousemove, genera una cantidad configurable de particulas en la posicion del cursor con vectores de velocidad aleatorios. El bucle requestAnimationFrame actualiza las posiciones de las particulas (agregando gravedad ligera para los efectos de destello/rastro), reduce la opacidad segun la velocidad de desvanecimiento y elimina las particulas muertas. Un limite de 300 particulas previene el crecimiento de memoria. El canvas se redimensiona automaticamente al cambiar el tamano de la ventana, manteniendose siempre a pantalla completa.
| Plataforma | Metodo de Instalacion | Dificultad |
|---|---|---|
| WordPress | Apariencia → Editor de Archivos del Tema → footer.php, o usa el plugin "Insert Headers and Footers" | Facil |
| Shopify | Tienda Online → Temas → Editar Codigo → theme.liquid, pegar antes de </body> | Facil |
| Wix | Configuracion → Codigo Personalizado → Agregar Codigo, pegar en la seccion Body - End | Facil |
| Squarespace | Configuracion → Avanzado → Inyeccion de Codigo → Footer | Facil |
| Webflow | Configuracion del Sitio → Codigo Personalizado → Antes de la etiqueta </body> | Facil |
| HTML Estatico | Pegar directamente antes de </body> en cualquier archivo .html | Facil |
El efecto esta construido para el rendimiento: todo el renderizado usa un unico elemento <canvas> con contexto 2D — sin sobrecarga de WebGL, sin manipulacion DOM por particula. Con la configuracion predeterminada (3 particulas por cuadro, limite de 300), el efecto agrega aproximadamente 1-2% de uso de CPU en hardware moderno. Reducir la Cantidad de Particulas a 1 y aumentar la Velocidad de Desvanecimiento al maximo produce la configuracion mas ligera. El script mide aproximadamente 2KB minificado — mas pequeno que la mayoria de los fragmentos de seguimiento analitico.
Despues de pegar el codigo, puedes personalizarlo aun mas directamente: cambia el valor cfg.type para alternar entre efectos sin regenerar, ajusta cfg.count para mas o menos particulas, o modifica el parametro cfg.spread para cambiar la distancia que recorren las particulas. El codigo es JavaScript vanilla — sin paso de compilacion, sin necesidad de minificacion. Los usuarios avanzados pueden extender la declaracion switch para agregar formas personalizadas: el contexto 2D del canvas admite arcos, curvas Bezier, lineas y sprites de imagenes.
Selecciona tu efecto preferido (destello, burbuja, estrella, corazon, rastro de neon o copo de nieve), personaliza los colores y la dinamica en los controles, luego haz clic en Copiar Codigo. Pega el script generado antes de la etiqueta </body> de cualquier pagina HTML. El codigo es completamente autonomo — crea un elemento canvas, escucha el movimiento del raton y renderiza particulas. No se requieren dependencias externas ni enlaces CDN.
El efecto escucha eventos mousemove, que no se activan en dispositivos tactiles. En moviles, la capa del canvas permanece presente pero es invisible (debido a pointer-events: none), por lo que no interfiere con toques, desplazamientos ni ninguna interaccion de la pagina. El efecto es puramente decorativo y se degrada correctamente — tu sitio funciona normalmente en movil sin el rastro del cursor.
El efecto usa requestAnimationFrame y un limite de 300 objetos de particulas, lo que lo hace muy ligero. Cada particula es una sola llamada de dibujo en canvas. En dispositivos modernos, el impacto en el rendimiento es insignificante (aproximadamente 1-2% de CPU). Puedes reducir la Cantidad de Particulas y el Tamano en los controles para un uso de recursos aun menor en hardware antiguo.
Si — el codigo generado es JavaScript vanilla sin dependencias. WordPress: pegalo en footer.php o usa un plugin "Insert Headers and Footers". Shopify: agregalo en Tema → Editar Codigo → theme.liquid antes de </body>. Wix: usa Configuracion → Codigo Personalizado. Squarespace: Configuracion → Inyeccion de Codigo → Footer. Funciona en cualquier plataforma que permita JavaScript personalizado. Consulta la tabla de compatibilidad arriba para instrucciones detalladas.
Usa los selectores de Color Primario y Color Secundario en el panel del generador. Cada particula selecciona aleatoriamente uno de los dos colores, creando un efecto dinamico y combinado. Para un aspecto monocromatico, establece ambos colores con el mismo valor. El codigo generado incorpora directamente los colores elegidos — no necesitas editar el script despues de pegarlo.