← Volver a la página

Cómo se hizo:
la partida.

Guía de diseño y técnica de la homepage «Ajedrez» de CyberSenseAI. Un solo archivo HTML autocontenido; la única dependencia externa es Google Fonts.

El concepto

El mensaje de marca —humano e IA en el mismo bando; el adversario es el problema— se cuenta como una partida de ajedrez real que se juega mientras lees. Las blancas son el equipo híbrido (humano + Persona IA); las negras, el problema. El scroll es el reloj de la partida: cada tramo de página ejecuta una jugada sobre un tablero 3D que vive de fondo, y la página termina exactamente donde termina la partida — jaque mate al problema.

La trampa de Légal se eligió porque su clímax es un sacrificio de dama: la jugada que parece una pérdida es en realidad el camino más corto al mate. Es la metáfora exacta del argumento comercial («el problema cree que va ganando»), y por eso tiene su propio interludio tipográfico a página completa: 5. C×e5!

La técnica central

WebGL escrito a mano, cero librerías

• Sin three.js ni dependencias: matrices 4×4, cámara lookAt, proyección en perspectiva y tres programas de shaders (piezas, tablero, sombras) escritos a mano en ~450 líneas.
• Piezas como sólidos de revolución: cada perfil (peón, torre, alfil, dama, rey) es una lista de pares [radio, altura] torneada con 26 segmentos — como madera en un torno. El caballo es el único caso especial: un prisma poligonal extruido con la silueta clásica.
• El tablero es un solo quad: casillas, veta de madera, junta entre casillas, hilo dorado del tapete y viñeta se calculan por píxel en el fragment shader. Las casillas de la última jugada se iluminan en oro con un pulso animado.
• Iluminación: clave direccional + relleno + rim dorado (más intenso en las piezas de ébano para despegarlas del fondo) + especular Blinn-Phong + niebla al color del fondo.

La partida dirigida por el scroll

• El progreso de scroll (5% → 93% de la página) se mapea a las 13 medias-jugadas. Ir hacia atrás rebobina la partida: el estado es una lista de instantáneas precalculadas, no una animación lineal.
• Cada movimiento es un tween con arco de salto (el caballo salta más alto), easing cúbico y duración propia. La cámara orbita y se acerca con el scroll, con paralaje sutil de ratón y una deriva lenta en reposo para que la escena respire aunque nadie haga scroll.
• Cementerio de capturas: la mesa se extiende como tapete de torneo y las piezas capturadas vuelan fuera del tablero y quedan tumbadas sobre el fieltro — la dama blanca sacrificada queda visible delante del tablero, contando la historia sola.
• En el mate: destello dorado, el rey negro cae, y las piezas blancas reciben un pulso de rim dorado — el laurel del vencedor.
• La planilla de notación (margen derecho) es la fuente de verdad narrativa: marca la jugada actual, se auto-desplaza, navega la página al hacer clic en una jugada y se retira cuando entra el pie de página. En móvil se sustituye por un chip compacto.

Resiliencia y accesibilidad

• Todo el pipeline WebGL está envuelto en try/catch: cualquier fallo degrada a un tablero CSS plano y la notación sigue viva con el scroll. Nunca una página en negro.
• prefers-reduced-motion: sin tweens, sin deriva de cámara, sin parallax; la posición de la partida sigue respondiendo al scroll de forma instantánea.
• Canvas y capas atmosféricas con aria-hidden; la planilla es un aside etiquetado; el chip móvil es role="status".

Sistema visual

• Paleta de torneo: ébano #0b0a07, marfil #f0e8d4, tapete verde #0f2b20 y oro de trofeo #c9a227.
• Tipografía: Bodoni Moda (display, con eje óptico) para los titulares — elegancia de cartel de gran torneo — e IBM Plex Mono para todo lo demás, evocando la planilla y la notación algebraica.
• Ritmo: secciones numeradas como fases de la partida (apertura → medio juego → defensa → final), un interludio marfil (los valores CREI, con el damero fantasma) y el interludio del sacrificio a página completa. Grano fotográfico y scrim lateral para legibilidad permanente del texto sobre el 3D.

Decisiones · pasada 1

• Orquestación de carga acelerada: el primer pintado mostraba un vacío negro más de un segundo (fade del canvas 1.6s + retardo 0.3s). Ahora el tablero entra en ~0.9s y el titular en ~0.9s con escalonado corto.
• Planilla compacta: pasó de ~780px (colisionaba con el header y tapaba el footer) a una tarjeta centrada que muestra el detalle de cada jugada solo en la actual o al pasar el ratón, con auto-scroll interno y retirada automática al llegar al pie.
• Interludio del sacrificio (5. C×e5!) añadido entre SoulBot y Verticales, sincronizado con la jugada real del tablero en ese tramo de scroll.
• Cementerio de capturas y mesa extendida: las capturas dejaron de «hundirse» en el tablero; ahora se retiran al tapete y quedan tumbadas.
• Deriva de cámara en reposo y pulso dorado de victoria en el mate.
• Contraste del cierre corregido (viñeta local + sombra de texto) y línea de bandos en el héroe: quién juega con blancas y quién con negras.
• Robustez: fallback completo sin WebGL y a prueba de errores de shader.

Decisiones · pasada 2

• Dolly de entrada: la cámara ya no aparece quieta — arranca medio paso de órbita más lejos y se asienta durante el fundido del canvas, un travelling de ~1s que hace cinematográfico el primer pintado. Desactivado con prefers-reduced-motion.
• Orquestación real de la planilla: un transition-delay:0s heredado anulaba el retardo de entrada y la planilla aparecía a la vez que el titular. Ahora su entrada es dirigida por JS (~1.15s, cuando el titular ya subió) y la retirada/regreso en el pie mantiene su propio timing corto.
• Kerning de display: tracking negativo (−0.012em) en el H1 del héroe, el H2 del cierre y el movimiento 5. C×e5! — a más de 100px, Bodoni pide apretar. Y las líneas del titular reservan 0.12em bajo la línea base para que el descendente del itálico dorado bando. no se recorte con overflow:hidden.
• Contraste AA: las coordenadas de las casillas de Verticales iban al 55% de opacidad (≈2.4:1 sobre marfil); ahora van a opacidad plena con colores recalculados (>5.5:1 en casilla clara y oscura).
• Notación sin saltos: el detalle de cada jugada se revela animando max-height + opacidad en vez de display, así el hover ya no hace brincar la lista.
• Estados interactivos completos: hover dorado del botón hamburguesa, estado :active de los botones (pulsación con escala), y el CTA del menú móvil ya no hereda el hover de los enlaces (oro sobre oro).
• Menú móvil: entrada escalonada de los enlaces, cierre con Escape, aria-expanded/aria-controls y bloqueo del scroll de fondo.
• Móvil: el chip de jugada fijo pisaba la línea de bandos del héroe; el colchón inferior pasa de 130px a 180px.
• Metadatos completos: og:type/url/site_name/locale, Twitter card, color-scheme, canonical y año en el copyright.