← VolverF.A.G.G.
Experiencia web · 2026

Mesón Mason

Un álbum servido como un menú degustación: cada canción, un plato.

Rol
Diseño & desarrollo front-end
Cuándo
2026 · Proyecto personal
Stack
Next.jsReactGSAPFramer Motion
Ver en vivo ↗
Reproductor con tracklist
El proyecto

Mesón Mason es una experiencia web interactiva que presenta un álbum de música como si fuera la carta de un restaurante. La idea: convertir la escucha en un ritual gastronómico — el disco es el menú, cada pista es «una receta de la casa» y el usuario recorre los platos mientras suena la música.

Construido con Next.js y React, con una capa de animación cuidada (GSAP y Framer Motion) que da vida a la intro del logo, las transiciones entre secciones y los micro-detalles. Toda la estética gira en torno a una paleta de terciopelo rojo y negro, tipografía elegante (script + serif) e ilustraciones de los artistas.

Lo que incluye
01Intro animada del logo: trazado SVG que se dibuja solo y se rellena hasta un acabado metálico.
02Concepto editorial «Las Recetas de la Casa» con motivos de cubertería y emplatado.
03Reproductor de audio personalizado con tracklist maquetada como la cuenta/carta de un mesón.
04Escenas por pista (p. ej. «Kike y Wanillo») con ilustraciones de personajes y platos.
05Layout inmersivo a pantalla completa y transiciones suaves dirigidas por scroll.
Galería
Logo Mesón Mason
01Identidad — logotipo script + serif sobre terciopelo rojo.
Sección Las Recetas de la Casa
02«Las Recetas de la Casa» — el concepto editorial del álbum.
Reproductor con tracklist
03Reproductor con la tracklist maquetada como la carta del mesón.
Escena Kike y Wanillo
04Escena por pista «Kike y Wanillo» con personajes ilustrados.
Logo en trazo
05Estado inicial del logo: trazo SVG antes del rellenado animado.

¿Hablamos de tu proyecto?

Ver en vivo ↗Contacto ↗