Cómo hice una comparativa de Ocarina of Time, remake vs N64

Cuando se anunció el remake de The Legend of Zelda: Ocarina of Time para Nintendo Switch 2, lo primero que quise fue ver cada lugar lado a lado con el original de Nintendo 64. No encontré una página que lo hiciera como imaginaba, así que la construí: Ocarina of Time · Remake vs N64 (se abre en una pestaña nueva). Es un proyecto de fan, sin fines de lucro, y fue de las cosas más divertidas que he programado.

#Una pantalla, dos épocas

La idea central es que la página misma sea la comparación. Está dividida verticalmente en dos mitades con estéticas opuestas:

Izquierda, el remake: oscura y cinematográfica, con bronce, oro y tipografía elegante, inspirada en la web oficial del juego.
Derecha, el N64: fondo low-poly, píxeles, scanlines y cajas de diálogo como las del juego, con la tipografía Press Start 2P.

Cada escena aparece en ambas mitades con su captura y un comentario de lo que cambió. Hay 36 escenas repartidas en cinco capítulos que siguen el viaje de Link: el Bosque Kokiri, el reino de Hyrule, pueblos y montañas, las aguas de Hyrule, y el desierto y los templos.

#Astro: casi todo estático

Elegí Astro (se abre en una pestaña nueva) porque el contenido no cambia: son capítulos, escenas y textos. Los datos viven en un solo archivo (chapters.ts) y las imágenes siguen una convención de nombres (<id>-remake.webp y <id>-n64.webp). Para sumar una escena basta con dejar las dos imágenes y agregar una entrada; Astro genera el HTML en el build.

Las capturas están optimizadas en WebP y Vercel las sirve con caché larga. Lo único dinámico es el chat, que es una función aparte.

#El fondo low-poly

La mitad N64 tiene un fondo de triángulos de color plano, como el cielo y los campos de 1998. No es una imagen: es un SVG generado con una grilla de puntos desplazados al azar y coloreados con un degradado de cielo a pasto.

Un detalle importante: el azar usa una semilla fija. Así el fondo se redibuja al cambiar el tamaño de la ventana sin que cambie su forma, y siempre se ve igual.

#El comparador deslizante

Al hacer clic en una escena se abre un comparador: las dos capturas superpuestas y un control deslizante que revela una u otra. Por dentro es un <input type="range"> que actualiza una variable CSS (--pos); el recorte de la imagen de arriba depende de esa variable. Usar un input nativo tiene una ventaja enorme: funciona con teclado, ratón y dedo sin código extra, y los lectores de pantalla lo entienden.

Dentro del comparador se navega entre escenas con los botones o con Page Up y Page Down, Escape lo cierra y el foco vuelve a la escena desde donde se abrió.

#Música que cambia con el scroll

Esta fue la parte más ambiciosa. Cada capítulo tiene su canción: Kokiri Forest en el bosque, Hyrule Field en el reino, Gerudo Valley en el desierto. Al cruzar el centro de la pantalla hacia otra sección, la música hace un fundido cruzado.

Hay dos fuentes de sonido:

YouTube: el video de cada canción se busca al compilar con la YouTube Data API, así la clave nunca llega al navegador. El resultado queda guardado en un archivo de caché que subo al repositorio, para que Vercel use exactamente los videos que revisé.
Música generada con Web Audio: si una sección no tiene video, o el video falla, suena un tema compuesto en el navegador. Cada tema tiene dos capas: una "remake" con pads, campanas y reverberación, y una "N64" con onda cuadrada, arpegios y bajo triangular.

Mi detalle favorito: la posición horizontal del ratón mezcla las dos capas. Si lo mueves hacia la mitad del remake suena más orquestal; hacia la mitad N64, más chiptune. La música también cruza la frontera entre las dos épocas.

Por respeto a quien visita la página, nada suena hasta que se activa con un botón.

#Navi, el hada que responde

Abajo a la izquierda flota Navi, que responde preguntas sobre el juego: «¿dónde está el Templo del Bosque?», «¿cómo derroto a Volvagia?», «¿para qué sirve la Ocarina del Tiempo?». Sigue la misma arquitectura que Elisa, el asistente de este portafolio: sin LLM, con NLP.js (se abre en una pestaña nueva) en español.

Conocimiento: 194 temas del juego (mazmorras, jefes, canciones, objetos, personajes, lugares, enemigos y razas), resumidos en español a partir de Zelda Wiki (se abre en una pestaña nueva) (CC BY-SA 3.0), cada uno con alias en español y en inglés.
Clasificación: el cerebro detecta el tema, lo reemplaza por una palabra fija y clasifica el tipo de pregunta (qué es, dónde está, su jefe, su tesoro, cómo derrotarlo, un consejo). Así una sola intención cubre cientos de combinaciones.
Memoria corta: recuerda de qué se hablaba, así que después de preguntar por una mazmorra puedes seguir con «¿y su jefe?».
Entrenamiento en el build: el modelo se entrena al compilar y la función solo lo carga. 51 preguntas de prueba revisan que no se rompa nada al agregar temas.

#Lo que aprendí

La nostalgia es un gran motor para aprender. Este proyecto me hizo meterme con Web Audio, SVG generativo, la API de YouTube y un chatbot con conocimiento estructurado, cosas que en el trabajo diario rara vez toco. Y confirmó algo que aplico siempre: las mejores interacciones se apoyan en elementos nativos, como un simple range para el comparador, y dejan lo espectacular como capa encima.