Cómo crear un logo de partículas que responde al cursor con IA

Mueves el cursor, una parte del logo se dispersa y los puntos regresan a su sitio cuando lo apartas. Para crear un logo de partículas interactivo con IA, puedes pedir a un asistente que te entregue todo dentro de un único archivo HTML. Después cargas tu PNG, ajustas el efecto y guardas el resultado.

La ruta de esta guía es copiar un prompt → obtener tu HTML → cargar tu logo → probar → guardar o insertar en tu web. No necesitas instalar un editor de programación, crear una carpeta de archivos ni aprender Three.js para este ejemplo básico.

He preparado también un ejemplo para comparar el resultado. Lo importante es que sepas crear y conservar tu propio archivo: el ejemplo te sirve para reconocer los botones y comprobar qué debes pedir a la IA. Los tres prompts completos están al final, en «Prompts listos para usar».

Qué vas a conseguir: un logo que responde al ratón y al tacto

Este ejemplo convierte los píxeles de un PNG en puntos de un lienzo web. Conserva la proporción y los colores del archivo; no le pide a la IA que dibuje una marca parecida. Con el ratón, el dedo o las flechas puedes apartar las partículas y ver cómo regresan.

El ejemplo utiliza WebGL y Three.js para dibujar puntos de luz: redondos, nítidos y con un núcleo luminoso, en lugar de una rejilla de cuadrados. Conserva las 12000 partículas, la distribución irregular y el tratamiento de color de la demo original. Three.js ya va integrado dentro del HTML; tú no instalas la librería, no compilas nada ni dependes de una CDN para usar la descarga.

El editor preparado arranca con Simón como referencia. Al crear tu archivo con el prompt puedes empezar con LUNA y cargar después tu PNG. La demo completa con más formaciones y grabación sigue al final como ampliación; no es necesaria para seguir estos pasos.

Qué necesitas antes de empezar

• Un asistente que genere código: puedes utilizar el que ya tengas. Si permite descargar archivos HTML, te ahorrará el paso de guardarlo desde el texto. Sus límites y funciones dependen de tu cuenta.
• Un ordenador y un navegador actualizado para guardar el archivo y probarlo. El ejemplo se adapta también a una pantalla móvil.
• Tu logo en PNG, preferiblemente transparente. El transparente deja visibles solo sus formas. Un PNG con fondo blanco seguirá teniendo ese fondo; cambiarle el nombre no lo elimina. Para seguir el primer paso puedes empezar con el texto LUNA y cargar el logo después.
• Para insertarlo en una web: acceso a un editor que permita HTML y JavaScript, o alojamiento para el HTML final. Puedes hacer todas las pruebas anteriores sin contratar un dominio.

El efecto es una sección de una página. Necesita un navegador compatible con WebGL y aceleración gráfica disponible. Si no puede iniciar el motor, el ejemplo muestra un aviso; no lo cambia silenciosamente por una versión de menor calidad. No es un nuevo archivo de logo para impresión. Conserva también tu PNG original para los usos normales de tu marca.

Paso 1. Copia el prompt y pide un único archivo HTML

1. Baja a Prompts listos para usar y copia «Crear un logo de partículas en un único HTML».
2. Abre una conversación nueva con tu asistente y pega el prompt completo. Puedes dejar LUNA como texto de prueba; no necesitas adjuntar el logo al chat porque lo cargarás dentro del HTML.
3. Envía el mensaje. El entregable debe ser un archivo llamado logo-particulas-editor.html, con los estilos y el código de movimiento dentro. Si el asistente te devuelve tres archivos separados o exige instalar paquetes, pídele que cumpla el formato de archivo único indicado.
4. Descarga el archivo cuando esté disponible. Si solo recibes un bloque de código, usa su opción de copiar código y guárdalo como explico a continuación. Si la respuesta se corta, pide el archivo completo: no uses una versión con partes omitidas.

Paso 2. Guarda el HTML y ábrelo en el navegador

Si ya has descargado un archivo terminado en .html, localízalo en Descargas y ábrelo con tu navegador. El archivo básico está diseñado para abrirse directamente, porque no utiliza módulos ni archivos externos. Si la vista previa de tu asistente restringe archivos o descargas, prueba la copia descargada en tu navegador habitual.

Si la IA ha entregado solo código, en Windows puedes guardarlo así:

1. Abre Bloc de notas y pega el código completo, sin las líneas de tres comillas invertidas que a veces lo rodean en el chat.
2. Elige Archivo → Guardar como.
3. En el nombre escribe logo-particulas-editor.html. En el tipo de archivo selecciona Todos los archivos y, si aparece la codificación, UTF-8.
4. Guárdalo en una carpeta que puedas encontrar y ábrelo con Chrome, Edge, Firefox u otro navegador compatible con WebGL.

Si utilizas TextEdit en Mac, cambia primero a texto sin formato y conserva la extensión .html al guardar. No lo guardes como documento Word, texto enriquecido o .html.txt. Si al abrirlo ves código en lugar de la interfaz, comprueba la extensión y la aplicación con la que lo has abierto.

Resultado esperado: un lienzo con tu logo o el texto LUNA y un panel con Cargar mi logo PNG, controles de color y botones para guardar el HTML o copiar el bloque. Puedes comparar con el editor preparado si tu resultado no se parece.

Paso 3. Carga tu logo y prueba el efecto

1. Pulsa 1. Cargar mi logo PNG y selecciona tu PNG. En el ejemplo se admiten archivos de hasta 5 MB y 4096 píxeles por lado.
2. Debes ver el logo formado por puntos y el mensaje «PNG cargado. Ya puedes guardar el HTML con tu logo». El nombre del archivo aparece debajo del botón. Esa es la comprobación de que estás usando tu imagen.
3. Pasa el ratón por la forma y retíralo. En una pantalla táctil, toca y arrastra dentro del lienzo; levanta el dedo para soltar.
4. Pulsa Pausar y después Continuar para comprobar ambos estados. Movimiento reducido deja la formación estática y desactiva la interacción animada.
5. Para probar con teclado, llega al lienzo con Tab, usa las flechas y pulsa Esc para soltar. Los botones también se pueden recorrer con Tab.

En el ejemplo, el PNG se lee localmente mediante FileReader; el editor no lo envía a un servidor. Eso describe el ejemplo preparado aquí. Si usas otro HTML, pide al asistente que confirme que no añade llamadas externas y revisa esa condición antes de cargar material privado.

Un logo muy oscuro puede perder contraste sobre un fondo oscuro. Cambia el selector Fondo o utiliza una versión de tu marca adecuada para ese fondo. Si el PNG contiene mucho espacio transparente alrededor, recórtalo en tu editor habitual para que la forma ocupe más área.

Paso 4. Cambia colores, nombre o intensidad sin rehacerlo todo

Empieza por los controles del propio HTML. Fondo cambia el lienzo; Color del texto afecta al nombre escrito, no recolorea el PNG. El deslizador Intensidad del movimiento controla cuánto se apartan las partículas. Al pedir cambios al asistente, conserva el render WebGL: hacer más sencillo el uso no requiere quitar brillo, densidad o nitidez.

1. Para un nombre, escribe por ejemplo LUNA en Nombre de ejemplo y pulsa Ver texto. El ejemplo conserva un máximo de diez caracteres.
2. Para volver a tu marca, pulsa Ver logo. Si todavía no has cargado un PNG, te lo indicará.
3. Si quieres un cambio que los controles no permiten, vuelve a la conversación y utiliza «Personalizar el HTML de partículas conservando la exportación», la tercera tarjeta. Adjunta tu archivo actual si abres otro chat.
4. Pide un cambio concreto, guarda una copia nueva y compárala con la anterior. No aceptes una respuesta que haya perdido la carga de PNG, el retorno de los puntos o los botones de exportación.

Paso 5. Guarda el resultado con tu logo dentro

Hay una diferencia entre cargar un logo y conservarlo. Si cierras el editor sin exportar, el archivo inicial no habrá cambiado. Para llevarte tu versión:

1. Deja seleccionada la formación que quieras guardar: Ver logo o Ver texto.
2. Pulsa 2. Guardar HTML final. Se descarga mi-logo-particulas.html.
3. Abre esa descarga por separado. Debe mostrar tu logo y los ajustes elegidos, con los controles de pausa y movimiento reducido, pero sin el panel de edición.
4. Conserva el editor inicial y tu PNG para hacer más versiones. El HTML final es el resultado para mostrar; para cambiarlo de nuevo puedes volver al editor y repetir la carga.

El logo queda integrado como data URL: una forma de guardar los datos de la imagen dentro del HTML. El motor de partículas también viaja dentro del archivo, de modo que la descarga conserva el mismo brillo y la misma forma de dibujar los puntos. No tienes que subir además una carpeta assets. A cambio, un PNG grande hará más pesado el HTML; utiliza una versión del logo del tamaño necesario para pantalla.

Paso 6. Copia el bloque adecuado para tu web

Un documento HTML completo y un bloque de inserción son dos cosas distintas. El primero se abre como una página. El segundo se coloca dentro de una página que ya tiene su cabecera, su contenido y su pie.

1. Vuelve al editor con tu configuración y pulsa 3. Copiar bloque para mi web.
2. Se prepara el fragmento con tu logo integrado. Si tu navegador permite copiar automáticamente, verás el mensaje de confirmación. También aparece un cuadro con el código: si el portapapeles no funciona, selecciona su contenido y pulsa Ctrl+C o Cmd+C.
3. Como alternativa, pulsa Descargar bloque de inserción. Guarda el archivo como código para consultar o copiar; no lo confundas con el HTML completo del paso 5.
4. Pega ese fragmento en la zona HTML de tu editor, guarda un borrador y revisa la vista previa antes de publicar. Comprueba ancho, contraste e interacción también en móvil.

En WordPress, añade un bloque de HTML personalizado, pega el fragmento y revisa la vista previa de la página. En Elementor, la vía habitual es el widget HTML. La ubicación y los controles concretos pueden variar con la versión; pide al asistente que lo adapte a tu editor con la segunda tarjeta.

Si tu editor filtra los scripts, puedes alojar mi-logo-particulas.html en una dirección HTTPS e insertarlo mediante un iframe, si tu plataforma lo permite. Un iframe muestra una página dentro de otra. La segunda tarjeta te ayuda a preparar esa inserción con un título descriptivo y una altura adecuada a tu caso. Una dirección localhost solo sirve en tu ordenador: no es la URL que verán tus visitantes.

No cargues varios efectos por decoración. Empieza con una sección y comprueba que no dificulte leer, navegar ni contactar contigo. El logo normal sigue siendo una buena alternativa en zonas pequeñas o dispositivos limitados.

Si algo falla, comprueba esto antes de pedir otro HTML

• Veo solo código: comprueba que el archivo termina en .html y que lo abres con el navegador, no con el editor de texto.
• La página está vacía: vuelve a copiar el HTML completo. Si el asistente lo entregó cortado o con partes pendientes, pide el archivo entero.
• El logo se ve dentro de un cuadrado blanco: ese fondo pertenece al PNG. Usa una versión transparente para que solo se convierta la forma.
• El archivo no se acepta: usa un PNG auténtico, de hasta 5 MB y 4096 píxeles por lado en el ejemplo. Renombrar un JPG como PNG no lo convierte.
• No hay movimiento: revisa pausa y Movimiento reducido. El ejemplo también respeta la preferencia de reducir movimiento del dispositivo; no es un fallo si está activada.
• El HTML exportado me vuelve a pedir el logo: falta integrarlo al guardar. Regresa al mismo chat, adjunta ese HTML y pide que se conserve el PNG en el archivo, como indica el primer prompt.
• Funciona solo, pero no en mi web: comprueba que has pegado el bloque de inserción y que tu plataforma conserva el JavaScript. Usa la tarjeta de adaptación al editor, en lugar de pegar todo el documento.

La comprobación final antes de enseñarlo

• La marca corresponde a tu PNG y no está deformada.
• Las partículas se apartan y vuelven; pausa, teclado y movimiento reducido responden.
• La descarga conserva el logo sin pedirlo otra vez.
• En móvil no aparece una barra horizontal y los controles se pueden leer.
• En tu web sigue funcionando el contenido de alrededor y la vista previa no muestra errores.

En el ejemplo se comprobó una carga real, su exportación y apertura independiente, la identidad del PNG integrado y dos bloques con controles separados dentro de otra página. También se revisó el editor a 375 píxeles. Eso no equivale a probar todas las combinaciones de navegadores, dispositivos y constructores.

Descargas para seguir la guía o comparar tu resultado

El ZIP logo-particulas-webgl-v8.zip contiene el editor autónomo, un HTML final de ejemplo, el bloque de inserción de ejemplo, los tres prompts y un LEEME. Extrae el ZIP para acceder a los archivos. El ZIP es un modo de agrupar los recursos; para usar el editor solo necesitas su HTML. Los logos de ejemplo no sustituyen tu marca ni dan permiso para presentarlos como propios.

Si quieres seguir construyendo con ayuda de tu asistente, El Vibe Coder de Invokard puede ayudarte a convertir una idea en pasos y comprobaciones. Puedes conocerlo en las cartas gratuitas de Invokard y explorar más casos en la biblioteca de prompts. Para este ejercicio no es una instalación obligatoria.

Opcional: la demo completa con más formaciones

Si prefieres explorar una escena más compleja, conserva esta otra versión: incluye Simón, el pulpo de Octonove, nombre en partículas y un fénix que cambia de formación. Este vídeo corresponde a esa versión avanzada, no al editor HTML único de los pasos anteriores.

Ese ZIP contiene varios archivos y módulos de Three.js. Sigue su LEEME y ábrelo con un servidor local, por ejemplo Live Server desde Visual Studio Code. La instrucción de abrir un HTML directamente pertenece al ejemplo autónomo; no se aplica al proyecto avanzado con módulos. Sus opciones de grabación tampoco se incluyen en el ejemplo básico.

Ahora tienes el recorrido completo: generar tu archivo con el primer prompt, cargar tu imagen, guardar la versión que funciona y utilizar el bloque correcto si vas a insertarla en una web. Las tarjetas siguientes te permiten repetirlo con tu marca.