Sitio Web Cinemático de Viajes con Scroll para Tour por Mumbai

Construye un sitio web premium y cinematográfico de una sola página para un tour guiado por la ciudad de Mumbai llamado "MUMBAI: LA CIUDAD QUE NUNCA SE DETIENE". La experiencia debe sentirse como una película de viaje interactiva en lugar de un sitio web de turismo convencional, utilizando una secuencia de scroll fijo a pantalla completa, fotografía en capas, profundidad dramática, movimiento de parallax suave, tipografía editorial de gran tamaño, narración inmersiva y tarjetas de destino interactivas. 1. Dirección Visual Principal Crea una experiencia visual cinematográfica e inmersiva inspirada en documentales de viajes premium y sitios web de turismo editorial de lujo. El sitio web debe combinar: Fotografía cinematográfica de Mumbai a pantalla completa Imágenes en capas de primer plano, plano medio y fondo Narración controlada por scroll Parallax suave basado en profundidad Movimiento sutil que responde al puntero Tipografía serif elegante y de gran tamaño Elementos de interfaz de color crema mínimos Iluminación atmosférica de hora dorada Sombras profundas y reflejos cálidos Zoom suave entre ubicaciones Transiciones visuales fluidas creadas mediante movimiento, escala, desenfoque y opacidad Fotografía de viaje editorial premium Jerarquía visual fuerte con mínima saturación de interfaz Evita el estilo genérico de plantillas turísticas, el exceso de tarjetas, gradientes, colores neón, ilustraciones de dibujos animados y secciones de sitio web en cajas convencionales. 2. Escena Hero Abre con una vista cinematográfica de pantalla completa impresionante de Mumbai a la hora dorada. Construye la escena a partir de múltiples capas visuales: Fondo: Horizonte de Mumbai, Mar Arábigo, cielo atmosférico, edificios distantes y neblina cálida al atardecer. Plano medio: Puerta de la India y arquitectura histórica circundante. Primer plano: Elementos arquitectónicos o del paseo marítimo que crean una fuerte profundidad cinematográfica. Coloca un título serif centrado y enorme: MUMBAI Debajo: La ciudad de los sueños, historias, calles, mar y energía imparable de la India. Añade tres etiquetas píldora de color crema: Patrimonio Vida Callejera Mar Arábigo La escena debe responder sutilmente al movimiento del puntero para que los elementos del primer plano se muevan más que los distantes. A medida que el visitante hace scroll, MUMBAI debe elevarse lentamente, encogerse ligeramente y desaparecer mientras la arquitectura del primer plano se expande hacia el espectador. 3. Navegación Crea una barra de navegación transparente posicionada sobre la escena cinematográfica. Izquierda: Mumbai Experiences Navegación central: Explorar Monumentos Cultura Tour Reservar Derecha: EN ⌄ Usa tipografía crema elegante con espaciado generoso. Mantén la navegación visualmente ligera para que la fotografía siga siendo dominante. 4. Experiencia de Scroll Crea un escenario cinematográfico fijo y largo que abarque aproximadamente de 3,500 a 4,500 píxeles de distancia de scroll. El viewport permanece fijo mientras Mumbai se transforma alrededor del visitante. El scroll debe sentirse como viajar físicamente por Mumbai en lugar de moverse entre secciones normales de una página web. Usa interpolación y easing tipo smoothstep para todas las animaciones controladas por scroll. Usa requestAnimationFrame para un renderizado fluido. Añade suavizado de scroll sutil y parallax de puntero en escritorio. Soporta prefers-reduced-motion desactivando la inercia y el parallax de puntero mientras se conserva la secuencia de contenido. 5. Escena Uno: Puerta de la India Comienza con la Puerta de la India dominando la composición. A medida que comienza el scroll: La tipografía hero se mueve hacia arriba y se desvanece La arquitectura del primer plano se agranda lentamente El fondo se mueve a una velocidad más lenta La cámara parece empujar hacia la Puerta de la India La neblina atmosférica aumenta sutilmente Las capas circundantes se separan para crear profundidad Introduce un texto narrativo centrado: La puerta donde Mumbai se encuentra con el mar. Texto de apoyo: Junto al Mar Arábigo desde 1924, la Puerta de la India sigue siendo uno de los monumentos más emblemáticos de Mumbai y el punto de partida perfecto para descubrir la ciudad. Debajo muestra: 1924 Puerta completada Siglo XX El monumento costero icónico de Mumbai Mantén la tipografía elegante, mínima, centrada y cinematográfica. 6. Escena Dos: Marine Drive Continúa el scroll hacia una transformación cinematográfica hacia Marine Drive. El primer plano de la Puerta de la India debe separarse hacia afuera y moverse más allá del viewport mientras una nueva escena costera a pantalla completa emerge debajo. Muestra: Mar Arábigo Paseo marítimo de Marine Drive Costa curva Edificios Art Deco Tráfico en movimiento representado visualmente Reflejos cálidos del atardecer Luces atmosféricas de la ciudad comenzando a aparecer Aplica desenfoque de profundidad temporal a las capas salientes mientras la nueva escena se vuelve nítida. Título narrativo: Mumbai respira junto al Mar Arábigo. Texto de apoyo: Sigue la curva barrida de Marine Drive, donde la brisa marina, la arquitectura Art Deco, los atardeceres, el tráfico y la vida urbana se encuentran a lo largo de uno de los paseos más reconocibles de Mumbai. La transición visual debe sentirse como si la cámara viajara a través de la fotografía anterior hacia Marine Drive. 7. Escena Tres: Chhatrapati Shivaji Maharaj Terminus Transición a una escena arquitectónica centrada en Chhatrapati Shivaji Maharaj Terminus. Usa fotografía dramática de tarde o hora dorada que destaque: Arquitectura neogótica Detalles de piedra Torres y cúpulas Tráfico de Mumbai Calles históricas Atmósfera urbana densa Título: La historia se mueve a la velocidad de Mumbai. Texto de apoyo: Explora uno de los grandes monumentos arquitectónicos de Mumbai y experimenta el extraordinario contraste entre la mampostería histórica y el movimiento implacable de la ciudad moderna. Usa tráfico en primer plano o elementos arquitectónicos para crear una fuerte profundidad de parallax. 8. Escena Cuatro: Vida Callejera de Mumbai Pasa de la arquitectura monumental a la escala humana de Mumbai. Crea una composición callejera inmersiva con referencias visuales auténticas como: Kala Ghoda Calles de Colaba Cafés locales Taxis negros y amarillos Vendedores ambulantes Fachadas históricas Calles peatonales concurridas Mercados locales Título: El verdadero Mumbai vive entre los monumentos. Texto de apoyo: Camina por calles llenas de comida, arquitectura, mercados, taxis, conversaciones, cafés e innumerables pequeñas historias que revelan la personalidad de Mumbai. Mantén la presentación sofisticada y documental en lugar de caótica. 9. Explorador de Destinos Cerca de la etapa final del scroll cinematográfico, introduce un control deslizante horizontal de destinos interactivo. El control deslizante debe volar dramáticamente hacia el viewport desde la derecha. Crea tarjetas grandes de color crema con esquinas redondeadas, tipografía negra, etiquetas de categoría pequeñas, descripciones concisas y pines de ubicación fotográficos o ilustrados. Tarjetas: Puerta de la India Categoría: Monumento Costero Descripción: Comienza junto al monumento más reconocible de Mumbai con vistas al Mar Arábigo. Marine Drive Categoría: Mumbai Costero Descripción: Experimenta el famoso bulevar costero de Mumbai y sus amplias vistas al mar. Chhatrapati Shivaji Maharaj Terminus Categoría: Arquitectura Descripción: Descubre uno de los monumentos ferroviarios históricos más espectaculares de Mumbai. Kala Ghoda Categoría: Distrito de las Artes Descripción: Explora arquitectura patrimonial, galerías, cafés, museos y el lado creativo de Mumbai. Colaba Categoría: Barrio Histórico Descripción: Camina por calles animadas llenas de arquitectura, compras, cafés y carácter local. Dhobi Ghat Categoría: Mumbai Local Descripción: Observa uno de los monumentos de trabajo más distintivos de Mumbai y comprende otra capa de la vida cotidiana de la ciudad. Las tarjetas deben moverse horizontalmente con animación inercial suave. Incluye controles circulares de flecha anterior y siguiente. Crea un bucle infinito fluido clonando conjuntos de tarjetas y normalizando la posición del control deslizante después de las transiciones. Las tarjetas deben soportar interacción con mouse, táctil y teclado. 10. Sección de Conversión de Tour Guiado Después de la secuencia de destinos, transiciona a una escena final dramática de reserva. Usa un horizonte cinematográfico de Mumbai a la hora azul con edificios brillantes, luces costeras, estelas de tráfico y el Mar Arábigo. Título grande: No solo visites Mumbai. Vívela. Texto de apoyo: Descubre Mumbai con un tour guiado por la ciudad que conecta sus monumentos, patrimonio, calles, arquitectura, cultura y vistas inolvidables al mar. CTA principal: Reserva Tu Tour por Mumbai CTA secundaria: Ver Detalles del Tour Debajo de los botones muestra tres indicadores de confianza compactos: Experiencia Guiada Local Lo Más Destacado de Mumbai Ruta Urbana Curada El CTA de reserva debe ser el elemento de conversión más fuerte del sitio web mientras mantiene la estética editorial mínima. 11. Diseño de Interacción Todo el movimiento debe sentirse cinematográfico en lugar de decorativo. Usa la posición de scroll para controlar: Traslación de capas Escala de imagen Opacidad de escena Desenfoque de profundidad Brillo Saturación Visibilidad del panel narrativo Separación del primer plano Zoom del fondo Entrada horizontal de tarjetas de destino El movimiento del puntero debe producir parallax sutil. Los elementos del primer plano deben responder más fuertemente que los del fondo. Nunca hagas el movimiento agresivo o distractivo. Las animaciones deben usar interpolación suave en lugar de transiciones CSS abruptas. 12. Tipografía Usa una serif editorial elegante y de alto contraste para títulos principales y narración de destinos. Usa una sans-serif moderna y limpia para navegación, descripciones, etiquetas, botones e información de apoyo. La palabra MUMBAI debe dominar inicialmente el viewport con tipografía extremadamente grande. Usa texto crema o blanco cálido apagado en lugar de blanco puro. Paleta sugerida: Crema: #FDF1E1 Carbón: #111411 Noche Profunda: #0B1110 Azul Mar Arábigo: #4AB5E0 Atardecer Cálido: #D99A55 Usa los colores con moderación y permite que la fotografía defina la mayor parte de la paleta visual. 13. Requisitos Técnicos Construye el sitio web como una experiencia responsiva pulida utilizando la pila tecnológica solicitada. Para una implementación simple, usa: HTML CSS JavaScript Vanilla Para los constructores de sitios web con IA que usan React por defecto, recrea la misma arquitectura usando componentes de React sin cambiar el comportamiento visual. Usa: position: sticky para el escenario cinematográfico Propiedades personalizadas de CSS para el estado de animación requestAnimationFrame para la animación de scroll transform: translate3d() para movimiento eficiente will-change solo en elementos animados tamaño responsivo con clamp() object-fit: cover para fotografía cinematográfica composición en capas con z-index interpolación smoothstep para entradas y salidas de escena transformaciones amigables con GPU HTML semántico navegación accesible aria-labels descriptivos tarjetas de destino accesibles con teclado diseños responsivos para escritorio, tableta y móvil Evita bibliotecas de animación de terceros innecesarias a menos que la plataforma lo requiera. 14. Comportamiento Responsivo El escritorio debe ofrecer la experiencia cinematográfica en capas completa. La tableta debe conservar la misma narrativa de scroll mientras reduce la tipografía sobredimensionada y la escala del primer plano. El móvil debe: Conservar la narración cinematográfica Reducir la intensidad del parallax Reencuadrar las fotografías de manera inteligente Mantener MUMBAI legible Hacer que la navegación sea desplazable horizontalmente si es necesario Usar tarjetas de destino de aproximadamente 80 a 85vw Mantener objetivos táctiles grandes Mantener los CTA de reserva prominentes Prevenir el desbordamiento horizontal de la página No simplemente apiles cada escena cinematográfica en secciones móviles ordinarias. 15. Dirección de Imágenes Usa fotografía cinematográfica de Mumbai de alta resolución y realista. Prioriza imágenes auténticas de: Puerta de la India Marine Drive Chhatrapati Shivaji Maharaj Terminus Kala Ghoda Colaba Dhobi Ghat Mar Arábigo Horizonte de Mumbai Taxis negros y amarillos Arquitectura histórica del sur de Mumbai Las imágenes deben sentirse como fotogramas de un documental de viajes premium. Prefiere hora dorada, atardecer, hora azul, luz diurna atmosférica, iluminación callejera realista, perspectiva profunda, encuadre en primer plano, multitudes naturales y arquitectura auténtica de Mumbai. Evita arquitectura obviamente generada por IA, monumentos inexactos, imágenes futuristas de Mumbai, imágenes genéricas de la India, fotografías sobresaturadas y gráficos turísticos clichés. 16. Experiencia Final El sitio web final debe sentirse como hacer scroll a través de un viaje cinematográfico por Mumbai. La secuencia debe fluir naturalmente: HÉROE MUMBAI ↓ PUERTA DE LA INDIA ↓ MARINE DRIVE ↓ CSMT ↓ VIDA CALLEJERA DE MUMBAI ↓ DESTINOS ICÓNICOS ↓ RESERVA TU TOUR GUIADO POR LA CIUDAD El visitante debe sentirse progresivamente atraído más profundamente hacia Mumbai antes de llegar al CTA de reserva. Prioriza atmósfera, narración, fotografía, profundidad, movimiento e inmersión emocional sobre los diseños de sitio web convencionales. La experiencia final debe verse lo suficientemente premium para una empresa turística de alta gama de Mumbai mientras sigue siendo lo suficientemente emocionante como para que alguien quiera explorar la ciudad y reservar el tour guiado de inmediato.