SalvadorEntrar en la ciudad
Una portada urbana de pixel art, construida por capas, presenta a las cinco integrantes. Así establece el lenguaje visual lúdico antes del primer desplazamiento.
Caso de estudio frontend · Experiencia fan interactiva
NewJeans: Pixel Journey
Un recorrido de una sola página que transforma el EP Get Up en un mundo adaptable de pixel art, con perfiles de las integrantes, una narrativa en torno al álbum e interacciones guiadas por el desplazamiento.
Rol
Diseñador y desarrollador frontend independiente
Enfoque
Dirección de arte, adaptabilidad y movimiento
Estado
Terminado y publicado
Renderizado
Prerenderizado estáticamente
Recorrido visual
La experiencia en sus distintas secciones y pantallas
Portada de escritorio
La escena inicial integra la navegación, el título, cinco personajes, estelas de color y un entorno urbano en una sola composición por capas.
Sistema de integrantes
Una estructura de tarjetas reutilizable aporta coherencia a cinco identidades distintas sin diluir el color ni la personalidad de cada integrante.
Recorrido del álbum
El objeto Get Up introduce el lanzamiento; después, un registro de seis canciones completa la progresión editorial.
Portada móvil
Los personajes ocupan posiciones específicas en móvil, mientras que la acción principal y la jerarquía visual se mantienen claras.
Tarjeta móvil de integrante
El perfil se adapta a una ficha vertical clara, sin perder información, personalidad, color ni estadísticas decorativas.
El encargo
Convertir la información del álbum en un mundo por explorar
Una página convencional para fans podría haber presentado al grupo y el EP como una colección de biografías y canciones. Este proyecto, en cambio, convierte el contenido en un breve recorrido visual con inicio, progresión y escena final.
El principal reto de frontend consistió en preservar esa dirección artística en todos los tamaños de pantalla. Cinco personajes ubicados de forma independiente, estelas por capas, navegación, textos y escenarios debían conservar su legibilidad, sin reducir la versión móvil a una miniatura de la composición de escritorio.
El resultado es una muestra de frontend centrada en la composición adaptable, las estructuras de contenido reutilizables y unas animaciones que acompañan el recorrido, en lugar de obstaculizarlo.
Flujo de la experiencia
Tres escenas, un recorrido continuo
Conocer a las integrantes
Un sistema común de tarjetas, inspirado en los juegos de rol, organiza cinco perfiles con rasgos de personalidad, colores representativos y estadísticas decorativas.
Explorar Get Up
El álbum se transforma en un objeto coleccionable, al que siguen un recorrido completo por seis canciones y una escena nocturna de cierre.
Arquitectura frontend
Contenido estático con un único límite de animación
La mayor parte de la experiencia se renderiza en el servidor. Los datos de las integrantes y las canciones se almacenan en arrays tipados; los componentes reutilizables se encargan de mostrarlos, mientras que un único componente de cliente controla las animaciones en el navegador. De este modo, la ambición visual no obliga a ejecutar toda la página como JavaScript del lado del cliente.
01Datos tipados de integrantes y canciones
02Componentes de contenido renderizados en el servidor
03Recursos visuales importados estáticamente
04Componente SceneMotion exclusivo del cliente
05Contexto de GSAP y consultas de medios
06Ruta prerenderizada estáticamente
Next.jsReactTypeScriptGSAPScrollTriggerTailwind CSS
Sistema de movimiento
El movimiento marca el ritmo sin generar fricción
Apariciones guiadas por el desplazamiento
Las tarjetas, las estadísticas, la portada del álbum y las canciones aparecen en una secuencia controlada conforme avanza el recorrido.
Distancias adaptables
Las consultas de medios de GSAP ajustan el movimiento a cada pantalla, en lugar de aplicar siempre los valores de escritorio.
Limpieza automática
Los contextos de animación y los controladores de ScrollTrigger revierten sus cambios cuando se actualiza el componente o varían las condiciones de medios.
Movimiento reducido
Las animaciones solo se ejecutan si la persona visitante no ha solicitado reducir el movimiento. Esta preferencia también desactiva las animaciones CSS.
Dirección adaptable
La versión móvil se recompone, no se comprime
Los personajes de la portada ocupan posiciones específicas en tabletas y móviles. La navegación adopta un patrón desplegable nativo; las tarjetas de perfil se apilan con naturalidad, mientras que el objeto del álbum y la lista de canciones abandonan las columnas editoriales para formar un flujo vertical legible.
Escritorio
Composiciones horizontales por capas, navegación flotante y narrativa del álbum distribuida en paralelo.
Móvil
Ubicación de personajes diseñada a medida, navegación compacta y un orden de lectura claro en una sola columna.
Resultado final
Una experiencia frontend completa con una identidad clara
Pixel Journey demuestra que una página puramente informativa puede ofrecer una experiencia propia de un producto gracias a la dirección artística, la estructura de componentes, el comportamiento adaptable y las animaciones coordinadas. El resultado se renderiza de forma estática y está disponible tanto en escritorio como en móvil.
Nota del proyecto
Este es un proyecto creativo no oficial realizado por un fan. NewJeans, Get Up, las imágenes de las integrantes y los recursos visuales relacionados pertenecen a sus respectivos titulares de derechos. Salvador Palacios creó de forma independiente el diseño de la interfaz y la implementación frontend.
Explorar la experiencia (se abre en una pestaña nueva)