Crear un logo de partículas en un único HTML
Quiero crear un logo de partículas interactivo con un acabado luminoso y nítido, pero estoy aprendiendo. Necesito un único archivo logo-particulas-editor.html completo, con HTML, CSS y JavaScript incluidos. Si puedes crear archivos, entrégalo para descargar; si no, da todo el código en un solo bloque, sin omisiones, y explica cómo guardarlo como .html.

ACABADO VISUAL
Utiliza WebGL nativo o Three.js integrado dentro del HTML. Puntos circulares con núcleo brillante y halo suave, colores bien definidos y conversión de color correcta. Distribución irregular con pequeñas variaciones, nunca una rejilla de cuadrados. Objetivo de 12000 partículas en escritorio, con tamaño de punto ajustado a resolución y densidad de pantalla. Fondo #020e22, acentos #fd554c y #84e7ed. Mantén el contraste y la silueta al dispersar y regresar. No simplifiques el render a Canvas2D para reducir instrucciones. Canvas2D sí puede servir para leer los píxeles del PNG, pero los puntos se dibujan con WebGL.

ARCHIVO AUTÓNOMO
Nada de CDN, módulos externos, fuentes remotas, APIs, analítica o solicitudes de red para usarlo. Si eliges Three.js, incluye su código y licencia MIT en el propio HTML; no exijas al lector instalar ni compilar nada. Si esa opción no cabe en tu entorno, utiliza WebGL nativo. Todo debe quedar dentro del único archivo y poder funcionar sin conexión. Empieza con LUNA como texto de prueba, editable hasta 10 caracteres.

CONTROLES
«1. Cargar mi logo PNG»: lee localmente un PNG mediante FileReader, conserva proporción y colores, no inventes ni redibujes la marca. Recomienda transparencia. Valida PNG real, máximo 5 MB y 4096 píxeles por lado; rechaza archivos inválidos o vacíos con un aviso claro y conserva el resultado anterior. No envíes la imagen a servidores.
Incluye Ver logo/Ver texto, nombre, fondo, color del texto e intensidad. Repulsión suave bajo ratón o dedo y retorno estable al retirarlo. Pausar/Continuar, Movimiento reducido y respeto de prefers-reduced-motion. Permite flechas y Escape en el lienzo. Etiquetas, foco visibles y sin desbordamiento a 375 px. Si WebGL no está disponible, muestra un aviso honesto; no sustituyas el efecto por otro más apagado.

EXPORTAR EL MISMO RESULTADO
«2. Guardar HTML final» descarga mi-logo-particulas.html con PNG, ajustes y todo el motor integrados, sin el panel editor y conservando pausa y movimiento reducido. Al abrirlo no debe pedir de nuevo el PNG ni cambiar el acabado.
«3. Copiar bloque para mi web» prepara un fragmento con CSS/JS acotados, sin html/head/body y con el mismo PNG, render y controles de accesibilidad. Dos copias deben funcionar por separado. Incluye descarga del bloque y un cuadro seleccionable para copiar manualmente con Ctrl+C/Cmd+C si falla el portapapeles. Escapa JSON y cierres de script al exportar.

COMPROBACIÓN
Si tienes navegador, prueba PNG, dispersión/retorno, exportación y apertura independiente, dos bloques y375 px. Di qué has probado y qué no. Explica los pasos para alguien que no programa y advierte de que el editor de su web debe permitir JavaScript.

Adaptar el bloque del logo para insertarlo en mi web
Tengo el HTML de partículas creado en esta conversación o adjunto mi archivo actual. Quiero insertar su resultado en una página que ya existe.

Mi editor es: [WordPress con bloque HTML / Elementor con widget HTML / archivo HTML propio / otro: indica cuál]. El objetivo es: [cabecera / sección intermedia]. Conserva mi PNG integrado, sus colores y el movimiento actual. Mantén el mismo render WebGL: puntos redondos y luminosos, densidad y nitidez. No lo conviertas a Canvas2D al insertar ni dejes el motor en un archivo externo.

1. Revisa el archivo que te doy; si no puedes leerlo o falta, dilo y pídemelo antes de inventar una versión.
2. Si mi archivo ya incluye «Copiar bloque para mi web», comprueba ese exportador y explícame cómo usarlo. Si debo corregir algo, entrega el fragmento completo, sin html/head/body, con CSS acotado y JavaScript por instancia. Elimina solo el panel de edición y exportación: conserva pausa, movimiento reducido, etiquetas y uso con teclado. No cambies el estilo del resto de la página ni uses librerías externas.
3. Explica dónde pegarlo en MI editor, cómo guardar un borrador y abrir la vista previa. Distingue el editor de la página publicada; no des por hecho que la animación se ejecutará dentro del editor. No inventes nombres de botones: señala lo que dependa de versión o de permisos.
4. WordPress y algunos constructores filtran scripts. No me digas que cambie permisos o desactive seguridad para forzarlo. Si no admite JavaScript, explica cómo alojar el HTML final en una URLHTTPS y preparar un iframe con título descriptivo, ancho adaptable y una altura que podamos comprobar; deja la URL como marcador si aún no existe. No presentes localhost como una dirección pública. Si el CMS también bloquea iframe, indica que debo consultar la vía de inserción permitida por el administrador.
5. Comprueba, si tienes navegador, que dos instancias funcionen por separado, que el estilo externo se conserve y que no haya desbordamiento a 375 px. Di qué probaste realmente. Entrega instrucciones para una persona que no programa.

Personalizar el HTML de partículas conservando la exportación
Continúa sobre el HTML que ya funciona en esta conversación o sobre el archivo que adjunto. No empieces otro proyecto ni añadas dependencias externas. Conserva el motor WebGL integrado y el acabado: puntos circulares nítidos, brillo y densidad, con el mismo tratamiento de color. No reduzcas la calidad gráfica por simplificar el uso ni lo reemplaces por Canvas2D.

Quiero hacer este cambio: [describe SOLO el ajuste que quieras: nombre LUNA, fondo #0b2039, texto #8be6e8, interacción más suave, etc.]. Si el cambio se consigue con los controles actuales, explícame primero dónde pulsar; no reescribas el código sin necesidad. Para sustituir la marca, conserva el botón de cargar mi propio PNG, sin dibujar una marca parecida.

Si hace falta editar código, conserva todas las demás funciones: PNG local, proporción y colores, retorno de partículas, pausa, movimiento reducido, teclado, diseño móvil, exportar HTML con el PNG integrado y copiar/descargar un fragmento independiente para la web. Entrega el archivo HTML completo actualizado o un único bloque de código completo si no puedes adjuntar archivos.

Explica qué cambió y cómo comprobarlo con tres acciones sencillas. Si puedes probarlo, verifica también una exportación y su apertura por separado; si no tienes navegador, dilo y dame la comprobación manual sin afirmar éxito. Si falta mi archivo, pídemelo antes de sustituirlo por una versión inventada.