YKNW Records : ÚLTIMO VERANO DELUXE
"Último Verano Deluxe" es una experiencia web interactiva promocional para un álbum musical de YKNW Records. Diseñada con una estética inmersiva de PlayStation 2, la web funciona como un videojuego retro donde los usuarios navegan por menús, descubren el lore, escuchan la banda sonora y desbloquean cinemáticas. Incluye soporte nativo para mandos de consola y un CMS a medida para que el equipo gestione el contenido sin tocar código.
- TIPO
- Landing Page Promocional + Experiencia Web
- CATEGORÍA
- APLICACIÓN WEB
- AÑO
- 2026
El punto de partida.
El objetivo era crear una campaña promocional única que rompiera con el formato tradicional de las "landing pages" musicales. Necesitábamos una interfaz que evocara la nostalgia de los años 2000 (estilo PS2 / Vice City), pero que al mismo tiempo fuera administrable por un equipo sin conocimientos técnicos (para cambiar vídeos, fotos y textos). Además, debía ofrecer una experiencia fluida e interactiva, emulando un motor de videojuego real en el navegador.
02 / LA SOLUCIÓNDe la idea a la pantalla.
Desarrollé una Single Page Application (SPA) ultraligera en Vanilla JS impulsada por Vite. Recreé la mítica secuencia de arranque de la PS2 usando animaciones CSS y efectos de sonido sincronizados. Implementé la Gamepad API para que la interfaz reaccione automáticamente al conectar un mando, adaptando los iconos en tiempo real (PS, Xbox o Teclado). Para la autogestión, creé un Panel de Administración (`admin.html`) que funciona en un entorno local, permitiendo al equipo subir assets, actualizar un `data.json` y compilar una versión estática segura para producción. Para los vídeos, integré la API de YouTube implementando soluciones personalizadas para forzar ocultaciones de interfaz y subtítulos.
03 / EN LA PRÁCTICAQué puedes explorar.
- Secuencia de inicio inmersiva estilo BIOS de PlayStation 2 con efectos de sonido sincronizados.
- Navegación completa mediante mandos de consola (PlayStation/Xbox) gracias a la Gamepad API.
- Panel de Administración (CMS) 100% a medida y local para gestionar el contenido sin base de datos.
- Menús interactivos con carrusel de personajes y capítulos estilo selección de misiones.
- Integración avanzada con la API de YouTube para cinemáticas ocultando los subtítulos y controles.
- Animaciones CSS complejas (scanlines CRT, glitch effects, barras de progreso y temblores de cámara).
- Sistema de enrutamiento basado en estados internos para no recargar la página nunca (SPA).
- Detección automática del hardware de entrada y actualización de los iconos de la interfaz en tiempo real.
El proyecto rinde un homenaje absoluto a la cultura de los videojuegos retro de los 2000, utilizando técnicas de optimización modernas para garantizar tiempos de carga instantáneos a pesar del uso intensivo de vídeos de fondo, efectos CRT (scanlines) y animaciones.