Espejo — Cómo se hizo

01El concepto: dualidad literal

La promesa de CyberSenseAI es que una Persona IA no sustituye a nadie: se sienta al lado. La página lo hace físico dividiendo el viewport en dos mundos completos que conviven en todo momento:

Mundo papel (izquierda): cálido, analógico, serif italic, anotaciones al margen en tinta roja, grano de papel. Es el equipo humano.
Mundo OLED (derecha): negro profundo, fósforo frío, sans expandida en mayúsculas, scanlines y lluvia de datos. Es la Persona IA.

No es una metáfora decorativa: los dos mundos renderizan el mismo contenido en el hero (mismo H1, mismos CTAs) con dos sistemas tipográficos opuestos, y una costura de luz los separa. Al mover el puntero, la costura se desplaza (±17%) y revela más de un mundo o del otro — el espejo responde. La respuesta tiene tres capas: la costura persigue al cursor, el filamento se abomba a su altura, y las anotaciones al margen derivan suavemente con él mientras sus reflejos OLED derivan en sentido contrario (contra-parallax: un espejo no copia, invierte).

Regla aprendida a golpes: el corte solo funciona sobre geometría idéntica. Kicker y CTAs usan la misma métrica en ambos mundos, así que la costura los corta limpio. El subtítulo no podía (dos fuentes ⇒ dos ajustes de línea ⇒ papilla en la costura), así que es un único elemento en una capa central sin recortar con mix-blend-mode: difference; los mundos llevan «fantasmas» invisibles de métrica idéntica para que las tres columnas midan lo mismo y todo quede alineado. Bonus del blending: el mismo fósforo del subtítulo se lee cian sobre el OLED y rojo sello sobre el papel — cada mundo lo tiñe con su propia tinta.

02La técnica central: dos mundos, una costura

El hero contiene dos capas hijas a viewport completo con contenido idéntico. Cada una se recorta con clip-path contra una variable CSS compartida, --seam. Como cada capa está completa, la costura simplemente «corta» las letras por donde pasa: la mitad izquierda de una palabra es Fraunces italic sobre papel y la derecha, Archivo expandida sobre negro.

/* CSS — el corte del espejo */
.mundo--papel{ clip-path: inset(0 calc(100% - var(--seam)) 0 0); }
.mundo--oled { clip-path: inset(0 0 0 var(--seam)); }

// JS — la costura persigue al cursor con inercia (lerp en rAF)
hero.addEventListener('pointermove', e => {
  seamTarget = 50 + ((e.clientX / r.width) - 0.5) * 34;   // ±17%
});
seamPct = lerp(seamPct, seamTarget, 0.08);
hero.style.setProperty('--seam', seamPct + '%');

Ventaja clave: el hit-testing de clip-path también recorta los eventos de puntero, así que los CTAs duplicados funcionan en ambos mundos sin lógica extra. La copia OLED lleva aria-hidden y tabindex="-1": los lectores de pantalla solo leen un mundo.

03La costura: WebGL a mano

La línea que separa los mundos es un canvas WebGL de solo 180 px de ancho (barato en fill-rate) con un fragment shader propio: un filamento de luz desplazado por FBM (fractal brownian motion), que se abomba cerca del cursor y chispea. El color se funde de cálido a frío al cruzar el eje — la propia costura es mitad papel, mitad fósforo.

// GLSL — núcleo del filamento (extracto real)
float w = (fbm(vec2(y*5.0,  u_t*0.25)) - 0.5) * 0.34;  // ondulación lenta
w      += (fbm(vec2(y*14.0, u_t*0.7 )) - 0.5) * 0.10;  // vibración fina
float d     = abs(x - w);
float core  = exp(-d * 26.0);                          // filamento
float halo  = exp(-d * 4.5) * 0.5;
float bulge = exp(-abs(y - u_my) * 7.0) * exp(-d * 8.0) * 0.7;  // cursor
vec3  col   = mix(vec3(1.0,.62,.34), vec3(.31,.91,.83),
                  smoothstep(-0.5, 0.5, x));           // cálido → frío

Ignición: la costura no está ahí al cargar — el mundo papel se abre primero, el OLED responde un compás después (+120 ms, apertura asimétrica), y la costura nace justo cuando el segundo termina (≈1,2 s tras ready), recta y con un destello que decae (u_gain), «aprendiendo» a ondular al rampear u_amp de 0 a 1 en 1,6 s.
Excitación: el brillo de la costura responde a la velocidad del cursor, no solo a su posición — u_gain se multiplica por un acumulador que crece con el error del lerp (|target − actual|) y decae al 90% por frame. Un barrido rápido enciende el filamento; al pararse, se calma en ~medio segundo.
Triángulo único a pantalla completa (sin quad), blending premultiplicado.
DPR limitado a 2; resize correcto; solo dibuja cuando el hero es visible (IntersectionObserver).
Sin WebGL o con prefers-reduced-motion: degrada a una línea CSS con glow (html.no-webgl .seam-fallback). Y si el GPU resetea a mitad de sesión, webglcontextlost hace preventDefault() y entrega el relevo a esa misma línea — nunca una costura en negro.

04La coreografía: un día frente al espejo

La sección firmada del sitio: 520 vh de scroll con un viewport fijado (position: sticky) partido en dos paneles. El scroll avanza un día narrativo — 09:41, 03:12, lunes 09:00 — y en cada escena los dos mundos ejecutan la misma tarea en paralelo:

Hora	Mundo papel (humano)	Mundo OLED (SoulBot)
`09:41`	Elena subraya un contrato de 84 páginas; las notas al margen aparecen a mano.	Terminal jurídica: 212 cláusulas, riesgo en la 14.2, informe en 4 min 12 s.
`03:12`	El papel se oscurece: el equipo duerme.	Incidente VPN contenido en 38 s. Vende el 24/7 sin decirlo.
`09:00`	El informe ya está en el comité; sello «Aprobado».	Los resultados suben en barras: −40%, ×10, 171% ROI.

Todo se escrubea: el progreso de scroll (0→1) se reparte en tres ventanas de escena, y dentro de cada una se derivan sub-progresos con ventanas propias. Los subrayados son SVG con pathLength="1" y stroke-dashoffset continuo; las líneas de terminal cruzan umbrales (data-at) que disparan una animación de tecleo por pasos, reversible al subir.

// El reparto del día (extracto real)
var raw = p * 3;
var idx = Math.min(2, Math.floor(raw));       // escena 0 | 1 | 2
var sp  = clamp01(raw - idx);                 // progreso de la escena
var cp  = clamp01((sp - 0.06) / 0.82);        // ventana de contenido

// subrayado del contrato: dibujo continuo dentro de su ventana
var k = windowP(cp, +path.dataset.a, +path.dataset.b);
path.style.strokeDashoffset = (1 - k);

// línea de terminal: umbral reversible
el.classList.toggle('on', cp >= +el.dataset.at);

El riel central es la tercera voz: una línea que se llena de tinta roja a fósforo con paradas horarias en mix-blend-mode: difference, de modo que la hora se lee sobre ambos fondos. En móvil (≤860 px) el espejo rota: paneles apilados y riel horizontal.

06Decisiones y renuncias

Cero imágenes. El concepto es tipográfico y de luz; el grano de papel es un SVG feTurbulence en data-URI, la lluvia de datos son 26 nodos CSS, y la costura es un shader. Peso total: un solo HTML.
Navegación en mix-blend-mode: difference. Un solo nav blanco que se invierte solo al cruzar de mundo — cero media queries de color, y funciona incluso mientras la costura se mueve.
Marquesinas espejadas. El manifiesto y las verticales cruzan el fondo partido en difference: la misma palabra cambia de color exactamente en la costura.
XAIOS inunda de negro y CREI inunda de papel. Las dos únicas secciones a sangre completa son especulares entre sí: el sistema operativo vive en el mundo frío; los valores, en el cálido.
Un solo rAF. Costura, escenas, riel y nav comparten un único bucle; los reveals y contadores van por IntersectionObserver. Solo transform/opacity en caliente → 60 fps. Marquesinas y lluvia de datos se pausan fuera de viewport, y los clip-path a viewport completo solo se reescriben mientras el lerp de la costura no ha convergido.
Foco con tinta de cada mundo. El anillo de :focus-visible es fósforo sobre OLED pero rojo sello sobre papel (el cian da ~1,5:1 sobre crema), y blanco sobre los botones de fondo fósforo — el indicador de teclado siempre supera contraste sobre su propio fondo.
El CTA final es un corte duro, no un degradado. difference sobre un degradado suave produce gris-sobre-gris en la transición; sobre la partición 50/50 el texto siempre invierte con contraste pleno. Y los botones viven fuera del wrapper con blending: una pastilla de fósforo sólida se lee igual de bien sobre papel que sobre OLED.
Profundidad especular en el hero. Las anotaciones a mano del papel acompañan al cursor (±8 px, valores lerpeados) y las etiquetas mono del OLED se mueven en sentido opuesto — como el reflejo de un espejo real. Solo variables CSS (--plx/--ply) sobre transform, decorativo, y quieto con reduced motion.
Un solo token de hairline. Todos los bordes neutros compartidos entre mundos (manifiesto, cifras, rejilla XAIOS, verticales) usan --hair-b — un gris azulado único en vez de seis rgba casi iguales.
Reduced motion digno: sin pinning, escenas apiladas y completas, valores finales, sin shader. La historia se lee entera sin moverse. Y honesto: la pista «mueve el cursor — el espejo responde» desaparece con reduced motion (y en táctil, y en pantallas bajas) — una promesa de movimiento no debe aparecer donde el movimiento no existe.
Las pistas viven en una sola pila. La pista del cursor y la señal de scroll («cruza el espejo») comparten una columna flex anclada abajo: el espaciado es automático y nunca pisan los CTAs en viewports bajos — el bug clásico de dos elementos absolutos que se encuentran a 900 px de alto.
La entrada espera público. Si la pestaña carga en segundo plano, la orquestación (apertura de mundos + ignición de la costura, ~1,7 s) no arranca hasta visibilitychange: nadie debería perderse la primera escena por culpa de un middle-click.
Cero lecturas de layout en caliente. pointermove no llama a getBoundingClientRect: ancho/alto de viewport y el corte móvil (≤860 px) se cachean en resize. Y si el GPU pierde el contexto WebGL, el fallback CSS releva al shader sin pantalla en negro.
Lo manuscrito es decorativo también para lectores de pantalla. Las anotaciones al margen («revisar antes del comité—») llevan aria-hidden: fuera del flujo del discurso, un lector las leería como ruido sin contexto.
Enterprise primero: cifras con nota de origen, 8 criterios CTO/CISO verificables, certificaciones ENS · ISO 27001 · GDPR. El espectáculo nunca pisa la credibilidad.

Assets externos: únicamente Google Fonts. Todo lo demás — texturas, shader, iconografía, luna, flechas manuscritas — está generado en el propio documento.

07La tercera pasada: robustez

La última revisión no añadió espectáculo: lo blindó. Lo que cambió al pasar el peine fino por móvil, rendimiento y accesibilidad:

Menú móvil de verdad. A ≤640 px los enlaces del nav desaparecían y solo quedaba el CTA. Ahora una hamburguesa (blanca, en difference como todo el nav) abre un overlay a pantalla partida papel/OLED con su propia costura central y las dos voces tipográficas alternadas por enlace. Esc lo cierra y devuelve el foco al botón; sin JS, el botón ni aparece.
Reduced motion en vivo. La preferencia ya no se lee solo al cargar: un listener sobre la media query congela la página al estado final (escenas completas, contadores en su valor, marquesinas quietas) o rearranca el bucle si el usuario cambia de opinión a mitad de visita. Los listeners de puntero quedan siempre conectados — solo actualizan objetivos — para que al desactivar la preferencia vuelva el espejo entero, no una versión a medias.
En estático, sin dobles. Las marquesinas duplican su contenido para el loop infinito; con reduced motion ese par quedaba visible dos veces. Ahora el gemelo se oculta (html.rm .marq > div + div).
Presupuesto de frame estricto. El getBoundingClientRect de la sección del día solo se lee con la sección en pantalla (IntersectionObserver), y los pulsos de larga vida — la costura del CTA final, el estado de SoulBot — se pausan fuera de viewport.
La lluvia se reconstruye al girar. La densidad del campo de datos se recalcula en resize con umbral de 80 px: la rotación del móvil cuenta, la barra de URL que aparece y desaparece, no.
Safe areas. viewport-fit=cover más env(safe-area-inset-*) en el nav y el pie del hero: en pantallas con notch nada queda bajo el hardware.
Semántica sin ruido. El manifiesto pasó de div con aria-label (que los lectores ignoran sin rol) a section real, y el anillo de foco dentro del nav en difference es blanco — el único color que invierte con contraste garantizado sobre ambos mundos.