04 / Frontend · Web de videojuego
No se lee.
Se desciende.
Black Tides: Draga’s Wake
Una presentación por capítulos para el juego de Strange Creature Factory. Atmósfera, escenarios y narrativa unidos en una experiencia de navegación.
01 / La portada
La primera señal.
Un mundo por descubrir.
La portada establece la atmósfera del juego y presenta el acceso a sus capítulos. Composición, navegación y llamadas a la acción abren el recorrido con los materiales visuales del estudio.
02 / Navegación por estados
El scroll
marca el ritmo.
El capítulo de la infección sincroniza el cambio de imágenes con el avance de la página. El título, los indicadores y la navegación mantienen el contexto mientras cambia la atmósfera.
03 / Comparador visual
Una interfaz para
explorar el proceso.
El apartado de producción incorpora controles para alternar vistas y una revelación con el puntero. El trabajo mostrado aquí es la interfaz del comparador y su interacción; las escenas son material del estudio.
01 — La portadaCapturas de la web
Mi trabajo: desarrollo frontend, composición de la página e interacciones. Las capturas muestran la web funcionando con los materiales visuales del estudio Strange Creature Factory.
El reto
Presentar un mundo.
Invitar a explorarlo.
Una web dirigida a socios e inversores necesita transmitir la identidad del juego y explicar su propuesta. El recorrido por capítulos organiza esa presentación y combina contenido legible con una capa visual cinematográfica.
La experiencia
Impacto visual.
Navegación cuidada.
Un recorrido continuo
Las transiciones conectan los capítulos y mantienen la orientación durante la exploración.
Se adapta al dispositivo
La calidad de la capa gráfica puede reducirse para priorizar una navegación fluida.
El contenido permanece
La información sigue disponible sin WebGL y con la preferencia de movimiento reducido.
Dentro del desarrollo
Una fuente central de progreso de scroll coordina las escenas. Las animaciones de GSAP se agrupan para poder desmontarlas, y un canvas compartido evita crear un renderizador por capítulo. La capa gráfica se carga de forma diferida y el render se pausa al ocultar la pestaña para reducir el consumo.
Briefing / De la necesidad a la solución
Un juego con identidad.
Una web que la transmite.
La necesidad era presentar el universo y la propuesta del juego mediante una web narrativa. Desarrollé la base del recorrido por capítulos, la coordinación de animaciones y una capa gráfica que se adapta a las capacidades del dispositivo.
El proyecto sigue en desarrollo. La ficha muestra capturas de la web local y decisiones de desarrollo; no representa el lanzamiento definitivo del juego.