De Wix a un concepto en HTML, y de ahí a una plataforma viva, bilingüe y editable, con su propio motor 3D. Un año de aprendizaje dentro de Conqr convertido en producto.
En Conqr, la agencia donde trabajo, llevé su sitio de un concepto en HTML cerrado a WordPress + Elementor Pro + Polylang, con un motor 3D propio, en 9 días. Lo lancé en conqr.mx el 30 de octubre de 2026: bilingüe, editable por el equipo y de 3.99 a 766 peticiones por segundo en la Home.
El sitio vivía en Wix. Cuando el dominio se movió, ya no respondía, y su mapa de URLs hubo que reconstruirlo desde el Wayback Machine.
El Wayback Machine guardó el texto y la maqueta, no las imágenes ni los vídeos de Wix: por eso salen como cuadros vacíos.
Un prototipo precioso y cerrado: un solo archivo de lógica, una hoja de 57 KB y los medios en base64. Se veía como el sitio que Conqr quería ser, pero nadie del equipo podía cambiarle una coma.
Su peso real no se pudo medir: sus archivos de datos en base64 nunca llegaron. Los medios que sí llegaron suman ~1 MB en base64, sin contar el vídeo.
WordPress + Elementor Pro + Polylang, con un motor 3D propio: bilingüe, editable con clic y en producción en conqr.mx.
151 URLs en dos idiomas, todas en 200 e indexables.
Intro → hero → manifiesto. A la izquierda, el concepto HTML (en la reconstrucción que usó la QA, sin el vídeo cromado que nunca llegó); a la derecha, conqr.mx.
La primera regla del proyecto cabe en una línea: si hay duda, el original manda. No se trataba de «parecerse»: cada sección se midió contra el original servido en local, en 1440×900 y en 390×844, en inglés y en español.
Medir así también destapó errores del propio original: un footer que desbordaba 7 px en español móvil y un pin que en móvil se alargaba porque la página se salía de lado. Esos errores no se copiaron. El original manda, pero se mide.
Original a la izquierda, WordPress a la derecha. Toca una para verla completa.
Los 40 frames del vídeo cromado original junto a la figura 3D en vivo, con el IoU de silueta de cada uno (media 0.96).
Intro de la Home en frames deterministas a 0.5, 2, 3.5, 4.3 y 5 s: 0 px distintos.
Apertura del menú a 0.2, 0.5 y 1.1 s y menú abierto. Geometría ∆ 0.00 px; la vista previa cromada es la figura en vivo.La gota líquida de «we are a digital, creative & btl agency.» en tres momentos del pin, a 1440 y a 390 px.
About completo en 1440: hero, con·quer, manifiesto, three reasons why, IA, mapa, clientes y CTA.
Nosotros en español en un móvil de 390 px, sección por sección.
Expertise: hero, lista de servicios con la fila clara al hover, CTA y footer.
Caso Formula 1: hero, «the challenge.», datos, servicios y «Next project».La figura cromada que respira y cambia de forma era un vídeo. Ahora es un objeto vivo: se abulta hacia el cursor, rebota si la tocas, gira si la arrastras, salta a su siguiente forma con doble clic y en el iPhone responde al dedo. Sigue el mismo ciclo del vídeo original, cada 10 segundos: esfera, toro, toro triangular, cruz, trébol, esfera ondulada y de vuelta a la esfera.
Un solo WebGLRenderer para toda la página. Cada figura se dibuja en su recuadro y se copia a su propio canvas 2D: un único contexto WebGL sin importar cuántas figuras haya, y cada una conserva su lugar en el DOM.
La forma vive en el vertex shader, con ruido simplex en dos octavas que hace «líquida» la superficie.
Metal físico con un entorno de paneles azules generado en código, sin descargar ningún HDR.
Abultamiento al cursor, rebote al clic y giro al arrastrar, con física amortiguada.
El ciclo se midió en 40 frames reales del vídeo: IoU de silueta 40/40 con la meta de la QA en ≥ 0.90, media 0.960 y mínimo 0.932 (antes del ajuste: 29/40, media 0.919).
JavaScript por frame: 1.75 ms en escritorio, 8.62 ms con la CPU 4× más lenta y 3.77 ms en un móvil emulado con CPU 4×. Todo cabe en los 16.7 ms de un frame a 60 fps. Los fps del servidor de pruebas no cuentan: no tiene GPU y dibuja el WebGL por software.
Un solo requestAnimationFrame que se detiene fuera de pantalla o con la pestaña oculta, calidad baja automática en equipos modestos y, sin WebGL, una imagen fija que renderizó el propio motor.
Un sitio bonito que nadie puede tocar envejece en semanas. La segunda regla fue: todo lo que pueda vivir en Elementor vive en Elementor. Cada pieza del original se clasificó en tres tipos:
Elementor puro.
Contenedores normales con una clase cq-* que les da movimiento. Por ejemplo, cq-hscroll convierte una fila de contenedores en el carrusel horizontal pinneado.
Solo lo que Elementor no sabe hacer, siempre con sus controles en el panel.
136 secciones se editan con clic directo y 26 desde el editor de WordPress o solas. El equipo recibió una guía de 6 páginas con capturas reales.
El inglés es la base, en /, y el español vive en /es/, con slugs propios: /about/ ↔ /es/nosotros/ y /work/ ↔ /es/portafolio/. Polylang gratis no permite el mismo slug en dos idiomas; el plugin propio lo resuelve con filtros y reglas de reescritura, y manda un 301 cuando se entra por el idioma equivocado. El botón EN/ES navega a la traducción y vuelve al mismo punto del scroll, sin repetir la intro.
PHP-FPM, OPcache de 256 MB, Redis propio y caché de página en la que Apache entrega el HTML sin pasar por PHP. La Home pasó de 3.99 a 766 peticiones por segundo con 10 usuarios.
Sale firmado con DKIM, con SPF, DKIM y DMARC en pass. Se envía solo desde un dominio que pasa las tres revisiones.
Una meta description única por URL, Open Graph, datos estructurados, hreflang y un sitemap con Yoast sin perder los títulos de antes.
Formularios con el embed oficial de Jotform en Contact, vacantes y el portal interno.
4 páginas internas noindex, fuera del sitemap y de la caché.
341 redirecciones desde las URLs viejas de Wix, con el inventario reconstruido desde el Wayback Machine.
9 días naturales y 6 jornadas de trabajo. El 24 y el 25 no hay entradas en la bitácora; la jornada del 27 terminó en la madrugada del 28.
22 oct
Inventario de cada sección del original y clasificación NATIVO / NATIVO + BEHAVIOR / WIDGET.
22 oct
Tema hijo, Polylang, plugin propio, tipos de contenido y contenido sembrado en EN y ES.
22 → 27 oct
La figura en vivo reemplaza al vídeo; el 26 se midió contra 40 frames (IoU 40/40).
22 → 23 oct
∆ 0.00 px en header y menú; 0 px distintos en la intro.
26 → 27 oct
Hero, manifiesto, con·quer, Expertise, footer, cortinilla y cursor cromado.
27 oct
About, Expertise, Work, Careers, Blog, Contact y 404, de 01:00 a 01:50.
27 → 28 oct
162 secciones revisadas, ninguna sin poder editarse, y la guía del equipo.
27 → 30 oct
URLs finales por idioma con 301 y el nuevo servicio SEO & GEO (8 en total).
29 oct
Tres fotos convertidas en escenas por capas.
27 → 29 oct
20 pares EN↔ES enlazados y 152 URLs viejas con 301.
29 oct
4 páginas internas noindex, fuera de la caché.
26 → 30 oct
PHP-FPM, OPcache, caché de página y Redis propio: de 3.99 a 766 req/s.
27 → 30 oct
hreflang, meta descriptions únicas, OG, JSON-LD y Yoast con 151 URLs.
30 oct, 00:24–00:40
16 minutos, compuerta 503 de 00:30 a 00:39 y 341 reglas 301 desde Wix.
30 oct
Scroll suave, cortinilla, SVG seguro, favicon adaptable, redes y Yoast.
El concepto mostraba su figura cromada como un vídeo de 10 s incrustado en base64, en el hero, en las letras de con·quer, en el menú, en el cursor y en los heroes interiores. Y la regla fue no cargar nunca los archivos en base64 del original.
El concepto se hizo como un prototipo autocontenido: el vídeo era la forma más rápida de mostrar la figura, pero no se podía editar, pesaba en el HTML y no reaccionaba al usuario.
El vídeo se reemplazó por una figura 3D en vivo (Three.js r160, local). El ciclo se midió en 40 frames reales, uno cada 0.25 s: de 29/40 frames con IoU ≥ 0.90 (media 0.919) a 40/40 (media 0.960, mínimo 0.932).
El original manda, pero se mide: cada parecido se valida con números contra la referencia, y nada se carga en base64.
Matiz. La meta de la QA fue IoU ≥ 0.90. Que los 40 frames también pasen de 0.93 se desprende del mínimo, pero 0.93 no fue la meta declarada.
La figura aparece a la vez en el cursor, el menú, el hero, flotantes, miniaturas y escenas de About, y cada aparición necesita su propio lugar en el DOM: encima del menú, detrás de las letras con multiply, con máscaras y flotación.
Un canvas WebGL por vista multiplica los contextos, y los navegadores limitan cuántos contextos activos puede tener una página. Un canvas fijo a pantalla completa obliga a que todo vaya encima o debajo del contenido.
Un solo WebGLRenderer fuera del DOM: cada vista se dibuja en su recuadro y se copia con drawImage a su canvas 2D. Un solo requestAnimationFrame, pausa fuera de pantalla o con la pestaña oculta, y una imagen fija si no hay WebGL.
Los widgets consumen el motor y no lo duplican: una sola API y un solo contexto.
Matiz. La bitácora justifica la decisión con el contexto único y el orden de las capas; no cita un número concreto de límite de contextos.
El equipo tenía que cambiar textos, imágenes, colores y orden sin tocar código, y el sitio debía conservar pins de scroll, timelines de GSAP, cursor magnético, efectos líquidos y la figura 3D.
Elementor no hace de forma nativa canvas, WebGL, scroll pinneado ni efectos líquidos, y convertir cada sección en un widget cerrado mata la edición con clic.
Clasificar cada pieza en NATIVO, NATIVO + BEHAVIOR o WIDGET: 23 widgets y 14 behaviors. 162 secciones revisadas, 136 con clic directo, 26 desde el editor de WordPress o automáticas y 0 sin poder editarse.
Todo lo que pueda vivir en Elementor vive en Elementor. Lo que no, es un widget con controles, nunca código suelto.
El 26 de octubre, al activar la caché de página, el sitio de staging dio error 500 durante unos 5 minutos.
Con PHP-FPM, PHP corre como el usuario de la cuenta. WP-CLI se ejecutó como root y el plugin reescribió la configuración con root como dueño; PHP-FPM ya no pudo leerla.
Se devolvieron el dueño y los permisos correctos. Fue en staging, no en producción.
WP-CLI siempre como el usuario de la cuenta, nunca como root. Es la primera regla del documento del sitio de producción.
Había que pasar a conqr.mx sin que nadie viera un sitio a medias, con el DNS del dominio ya apuntando al servidor nuevo y el sitio de Wix sin responder.
No había un sitio viejo que conservar en paralelo: el dominio ya estaba en el servidor nuevo.
Respaldo completo, copia y cambio de URLs, caché armada de nuevo y una compuerta 503 de «próximamente» con Retry-After y noindex de 00:30 a 00:39. Se abrió con el OK del cliente y a las 00:54 ya estaban las 341 reglas 301 desde Wix.
Publicar detrás de una compuerta y verificar desde fuera antes de abrir. Cada URL vieja tiene destino.
Matiz. «Cero caída» se sostiene como «sin ventana de sitio roto»: durante 9 minutos los visitantes vieron un 503 de «próximamente», que es lo correcto para buscadores.
Al publicar, el DNS de conqr.mx quedó sin registros MX ni SPF, y los buzones de Google Workspace dejaron de recibir.
Al mover el DNS hacia el servidor nuevo desaparecieron los registros de correo, y el servidor tenía en caché el DNS viejo, que lo escondía.
Se avisó al momento y el cliente repuso MX, SPF, DKIM y DMARC cerca de las 02:00. Una prueba de entrega a las 01:59 quedó completada.
Revisar los MX contra un DNS público, nunca contra el resolver local, y enviar solo desde un dominio con SPF, DKIM y DMARC en pass.
Matiz. No hubo correos en spam por DMARC: se documentaron el riesgo y la regla que lo evita. El «spam» real fue el relay que rechazó 3 reportes por su contenido; se reescribió el texto y pasó.
En el carrusel de Expertise, el último panel quedaba corrido, la luz del fondo se apagaba al regresar y la salida al footer se sentía como un golpe.
El pin terminaba justo donde terminaba la pista, el script del footer guardaba la opacidad «de la carga» y la rueda movía el scroll a saltos.
Un tramo final de reposo del 30 % en el pin, la luz guarda su opacidad al llegar al footer y scroll suave con Lenis sincronizado con ScrollTrigger. Sin Lenis con reduced-motion ni en el editor.
Ninguna animación ligada al scroll guarda estado «de la carga».
El logo en SVG no se pudo subir a la Biblioteca y, después, el logo negro casi desaparecía en las pestañas oscuras.
WordPress no admite SVG por defecto, y un ícono de un solo color no se ve bien a la vez sobre pestañas claras y oscuras.
SVG con limpieza al subir y solo para administradores. El favicon final es adaptable: negro en pestañas claras y blanco en oscuras.
SVG solo con limpieza y solo para administradores; el ícono del sitio lo imprime un solo lugar del código.
Matiz. WebKit de pruebas no cambia el SVG a blanco en modo oscuro (Chromium sí). Falta revisarlo en Safari real.
Fases, reglas y qué decide el cliente, antes de tocar el servidor.
Al terminar cada una: parar, reportar, esperar.
En el servidor, con WP-CLI como el usuario de la cuenta, scripts que se pueden repetir y nada en el núcleo de WordPress ni de Elementor.
135 momentos de respaldo en 6 jornadas.
Chrome, Safari y móvil, en inglés y en español. Medidas, no impresiones.
122 reportes de trabajo en 9 días: qué se hizo, qué cambió, el respaldo y lo pendiente.
Reglas, decisiones y comandos exactos, para que cada sesión empiece donde terminó la anterior.
La IA acelera; yo dirijo, decido y verifico. La IA escribió mucho código. El criterio, las reglas y la decisión de qué no hacer fueron humanos.
Peticiones por segundo en la Home con 10 usuarios
p95 de respuesta de la Home
CLS (desplazamiento de diseño) frente al concepto
SEO de la Home en Lighthouse
Lighthouse en producción, mediana de 3 corridas: SEO 100 y CLS 0 en las cinco páginas medidas. El rendimiento queda entre 54 y 66 en móvil porque el servidor de pruebas no tiene GPU y dibuja la figura 3D por CPU; el concepto puntúa más alto ahí porque no dibuja ninguna figura. Los datos del concepto vienen de la reconstrucción que usó la QA.
Diseño visual: equipo de diseño de Conqr.
Desarrollo, motor 3D, arquitectura en WordPress, infraestructura, migración y lanzamiento: Samuel Torres, con Claude y Claude Code como copilotos de IA.
¿Quieres algo así en tu sitio? Agenda 20 minutos y lo revisamos juntos.
Agendar 20 min
Cómo integrar un motor gráfico 3D en tu sitio web (sin matar el rendimiento)Lo que aprendí al meter una figura 3D en vivo en un sitio real: arquitectura, rendimiento y accesibilidad.Leer el artículo →
Por qué renovar tu web hoy (y cómo saber si ya te toca)Ocho señales de que tu sitio envejeció y un autodiagnóstico de 10 preguntas.Leer el artículo →