Del píxel al mundo vivo

Una experiencia visual de scrollytelling sobre cómo los videojuegos pasaron de ser respuestas simples en pantalla a mundos digitales complejos, sociales y reactivos.

Proyecto pensado como pieza premium de portfolio frontend: una página editorial, inmersiva y responsive, hecha solo con HTML, CSS y JavaScript vanilla.

Concepto

La pregunta central del sitio es:

¿Cómo pasaron los videojuegos de mover píxeles en una pantalla a crear mundos que parecen vivos?

La narrativa evita ser una cronología histórica. En su lugar, presenta seis cambios en la experiencia del jugador:

• Interacción inicial con la pantalla
• Exploración de mundos laterales
• Aparición del espacio tridimensional
• Juego conectado entre personas
• Creación por parte del jugador
• Sistemas reactivos que responden a decisiones

Características

• Hero cinematográfico con entrada editorial
• Scrollytelling en dos columnas en desktop: texto sticky + escena visual
• Versión lineal para tablet y mobile (sin depender del sticky desktop)
• Fondos degradados por capítulo con transiciones suaves
• Barra de progreso de lectura
• Navegación de capítulos accesible
• Reveals al entrar en viewport para títulos, texto y video
• Controlador reutilizable para reveals, stagger y reproducción de video en viewport
• Soporte para teclado y prefers-reduced-motion
• Interacción final de perfil de jugador con animación FLIP
• Arcade “snake” integrado como escena jugable
  • Controles por teclado (flechas/WASD) y botones
  • Gestos táctiles (swipe) en pantalla
  • Ajustes responsive: el tablero se mantiene visible en pantallas angostas
• Ajuste de pacing: el scroll del Capítulo 1 es más corto que el resto (los demás capítulos mantienen su ritmo)

Stack

• HTML5 semántico
• CSS3 modular
• CSS Custom Properties
• Media Queries
• JavaScript vanilla
• ES Modules nativos
• IntersectionObserver
• Video HTML5 local
• SVG para favicon

No usa frameworks, librerías UI, preprocessors, TypeScript ni librerías de animación.

Assets

Las imágenes de capítulos y perfiles deben agregarse como archivos JPG en assets/images/.

• Requisitos: assets/images/README-chapter-media.txt

Los videos editoriales deben agregarse como archivos MP4 en assets/videos/.

• Requisitos: assets/videos/README-video-assets.txt

Estructura

assets/
  icons/
  textures/
  illustrations/
  images/
  videos/
styles/
  main.css
  reset.css
  tokens.css
  themes.css
  base.css
  layout.css
  components.css
  scenes.css
  animations.css
  utilities.css
scripts/
  main.js
  config/
  state/
  controllers/
  utils/

Desarrollo local

El proyecto no requiere instalación ni build. Solo necesita servirse desde un servidor local porque usa ES Modules nativos.

Con Node.js:

npx --yes http-server . -p 5500

Con Python:

python -m http.server 5500

Abrir:

http://localhost:5500/

No abras index.html directamente con file://, porque el navegador puede bloquear los módulos JavaScript por reglas CORS.

Estado

Proyecto completo en fase de pulido final.

Incluye: estructura, HTML semántico, sistema visual con tokens y temas, escenas por capítulo, animaciones CSS, comportamiento JavaScript modular con IntersectionObserver, secciones editoriales de video, revisión responsive, accesibilidad básica y la interacción final de perfil.

Licencia

MIT