CREI: los valores en el ADN.

01 / Concepto

Los valores no como texto legal, sino como genoma.

CyberSenseAI afirma que sus Personas IA son Confiables, Responsables, Éticas e Inclusivas. La mayoría de webs enterprise colocan esos valores en una lista de viñetas; aquí son la estructura física de la página: las cuatro bases nitrogenadas de una doble hélice que preside todo el recorrido.

• La vida se escribe con A·T·C·G; las Personas IA, con C·R·E·I. La metáfora sostiene la home entera: secuencia, pares de bases (C·R y E·I), expresión por «tejidos» (verticales), ficha de espécimen (SoulBot) y hábitat (XAIOS).
• Al hacer scroll la hélice se desenrolla: de espiral cerrada en el hero a escalera casi recta en el cierre — la secuencia queda «leída» cuando terminas de leer la página.
• Cada sección de valor ilumina su base en la hélice: al entrar en «Ética», los peldaños esmeralda brillan y el resto se atenúa.

02 / Dirección visual

Laboratorio elegante: azul noche y cuatro luces.

Atmósfera de laboratorio nocturno de secuenciación: fondo azul profundo con viñetas radiales, grano de placa fotográfica (SVG feTurbulence fijo sobre toda la página), platos de vidrio con backdrop-filter y una regla métrica fija a la izquierda que mide el avance en «kilopares de bases».

03 / Técnica

Una hélice de ~1 270 puntos de luz, sin librerías.

El fondo es un único <canvas> WebGL 1 escrito a mano: matrices propias, dos shaders GLSL y geometría recalculada por frame en CPU (dos hebras de 380 puntos, 38 peldaños de 9 cuentas, 150 motas de polvo — un tercio con tinte CREI — y un cabezal de lectura de 18 puntos que recorre la hebra como una polimerasa, haciendo destellar cada base a su paso; trivial a 60 fps). El desenrollado es un solo parámetro: la tasa de giro k tiende a cero con el scroll. Al cargar, la hélice no aparece «puesta»: las hebras encienden y los peldaños se secuencian por orden durante ~2,5 s, como una lectura real de bases.

// La espiral es una función del scroll: k(p) → 0 la vuelve escalera
function buildFrame(t, p, aspect) {
  var unwind = unwindAt(p);                            // keyframes suavizados 0→0.95
  var k   = (Math.PI * 2 * TURNS / SPAN) * (1 - unwind); // twist por unidad de altura
  var rot = t * 0.42 * (1 - unwind * 0.72) + p * 3.0;    // el giro también se calma
  for (var strand = 0; strand < 2; strand++) {
    var phase = strand * Math.PI;                        // hebras en oposición
    // x = cos(y·k + rot + fase)·R   ·   z = sin(y·k + rot + fase)·R
  }
}

// Vertex shader: proyección propia + tamaño por distancia (con tope de fill-rate)
gl_PointSize = min(a_size * u_dpr * (26.0 / w), 44.0 * u_dpr);

// Fragment shader: halo + núcleo. Alfa CERO: con blend(ONE, ONE) el canvas
// premultiplicado compone como luz emisiva pura sobre el fondo CSS.
float halo = smoothstep(0.5, 0.0, d);
float core = smoothstep(0.16, 0.0, d);
gl_FragColor = vec4(v_col * (halo * 0.62 + core * 1.32) * v_depth, 0.0);

El resaltado por sección es un vector de cuatro pesos interpolado cada frame: un IntersectionObserver sobre cada tarjeta de valor llama a window.__helix.setHighlight(i) y los peldaños de esa base crecen y brillan mientras el resto baja a un 22 %.

// Keyframes del desenrollado, ligados al progreso p de scroll
function unwindAt(p) {
  if (p < 0.12) return 0;                             // hero: espiral íntegra
  if (p < 0.5)  return ease((p - 0.12) / 0.38) * 0.55; // CREI: se abre
  if (p < 0.85) return 0.55 + ease((p - 0.5) / 0.35) * 0.4;
  return 0.95;                                          // cierre: escalera
}

04 / Decisiones

Lo que se decidió y por qué.