Landing · Personal project
Landing · Proyecto personal
Moulin Rouge! El Musical
Unofficial landing for the musical in Madrid, with a light bulb sign drawn on canvas letter by letter.
Landing no oficial del musical en Madrid, con un rótulo de bombillas dibujado en canvas letra a letra.
- Days to build
- 2
- Commits
- 34
- Días de desarrollo
- 2
- Commits
- 34
What I did
- Development
- Animation & motion
- Deployment
This is a personal project: an unofficial landing page for the Spanish production of Moulin Rouge! El Musical, which Stage Entertainment is bringing to Madrid in autumn 2027 as the opening show of its new Stage Gran Teatro Musical. It started from a real gap: the production didn’t have a website yet, so I built the one I’d want to see — partly as a sample of my work for Stage Entertainment itself.
The “MOULIN ROUGE!” marquee on the cover isn’t an image: it’s a canvas that draws every bulb from letter shapes sampled off-screen from the typeface, then lights them one by one in a sweeping wave. The rest of the site follows the same “nothing is just decorative” approach: the programme opens, turns pages and closes like a real Playbill through a pinned 3D scroll animation that shrinks to a miniature on mobile, and every animation (GSAP + ScrollTrigger) has a static fallback for reduced motion.
Built solo in two days, across 34 commits.
What it offers
- Canvas bulb marquee: “MOULIN ROUGE!” lights up bulb by bulb over a background video.
- Curtain and spotlight intro: the page opens like a theatre, with a spotlight that follows the cursor across the rest of the site.
- The story: a scroll-pinned windmill where each blade (Truth, Beauty, Freedom, Love) opens a chapter.
- 3D programme: a Playbill that opens, turns pages and closes as you scroll, with a mobile miniature and a swipeable fallback for reduced motion.
- Music: a record that spins with the scroll and a neon marquee of songs.
- Your visit: paper tickets, FAQs, official photos of the new theatre (sourced from stage.es) and an interactive map with directions.
- Press room: copyable fact sheet and texts, logos, colour palette, typefaces and a downloadable image bank.
- All animation respects
prefers-reduced-motion.
Technical
A static site built with Astro and TypeScript, styled with Tailwind CSS, with GSAP (ScrollTrigger, matchMedia) driving the scroll-linked animation. The “how to get there” map uses Leaflet loaded from a CDN. Structured data (JSON-LD: Organization, WebSite, PerformingArtsTheater, TheaterEvent, FAQPage) is there so the event and venue show up correctly in search results. Deployed on Cloudflare Pages, built solo.
Disclaimer
This is an unofficial, non-commercial fan project built for portfolio and learning purposes. It is not affiliated with or endorsed by Stage Entertainment España, Global Creatures, or any related entity.
Este es un proyecto personal: una landing no oficial para la producción española de Moulin Rouge! El Musical, que Stage Entertainment estrena en Madrid en otoño de 2027 como espectáculo inaugural de su nuevo Stage Gran Teatro Musical. Nace de un hueco concreto: la producción todavía no tiene web propia, así que construí la que a mí me gustaría ver — pensada también como muestra de mi trabajo ante Stage Entertainment.
El rótulo «MOULIN ROUGE!» de la portada no es una imagen: es un canvas que dibuja cada bombilla a partir de las siluetas de las letras, muestreadas de la tipografía renderizada fuera de pantalla, y las enciende una a una con un barrido de luz. El resto del sitio sigue el mismo criterio de que nada sea solo decorativo: el programa de mano se abre, pasa páginas y se cierra como un Playbill real con una animación de scroll fijada en 3D que en móvil se convierte en miniatura, y todas las animaciones (GSAP + ScrollTrigger) tienen una versión estática para quien prefiere movimiento reducido.
Construido en solitario en dos días, con 34 commits.
Qué ofrece el sitio
- Rótulo de bombillas en canvas: «MOULIN ROUGE!» se enciende bombilla a bombilla sobre un vídeo de fondo.
- Telón y foco de entrada: la página se abre como un teatro, con un foco que sigue al cursor por el resto del sitio.
- La historia: un molino fijado con scroll donde cada aspa (Verdad, Belleza, Libertad, Amor) abre un capítulo.
- Programa de mano en 3D: un «Playbill» que se abre, pasa páginas y se cierra con el scroll, con versión en miniatura para móvil y una versión deslizable con movimiento reducido.
- Música: un vinilo que gira con el scroll y una marquesina de canciones en neón.
- Tu visita: entradas de papel, preguntas frecuentes, fotos oficiales del nuevo teatro (tomadas de stage.es) y un mapa interactivo de cómo llegar.
- Sala de prensa: ficha técnica y textos copiables, logotipos, paleta de color, tipografías y banco de imágenes descargables.
- Toda la animación respeta
prefers-reduced-motion.
Técnico
Sitio estático construido con Astro y TypeScript, con Tailwind CSS para el diseño y GSAP (ScrollTrigger, matchMedia) para las animaciones ligadas al scroll. El mapa de «cómo llegar» usa Leaflet cargado desde CDN. Los datos estructurados (JSON-LD: Organization, WebSite, PerformingArtsTheater, TheaterEvent, FAQPage) están pensados para que el evento y el teatro aparezcan correctamente en buscadores. Desplegado en Cloudflare Pages, construido en solitario.
Descargo de responsabilidad
Este es un proyecto no oficial, no comercial y fanático construido con fines de portafolio y aprendizaje. No está afiliado ni respaldado por Stage Entertainment España, Global Creatures o cualquier entidad relacionada.
