Proyecto

Villa Nerea

Villa Nerea es una web de alquiler vacacional inventada: un apartamento excavado en la roca de Santorini. La he hecho para ver hasta dónde puede llegar una landing que quiere convertir sin dejar de ser cinematográfica: un recorrido en vídeo que avanza con el scroll, el contenido de una web de alquiler de verdad y un calendario de disponibilidad con una reserva simulada de principio a fin. Es estática, hecha con Astro, sin cookies ni servicios de terceros.

Fecha: Octubre 2026
Tipo: Landing cinematográfica con flujo de reserva
Mi papel: Concepto, diseño, desarrollo y optimización
Stack: Astro · TypeScript · CSS y JavaScript propios · WebP · JSON-LD
En línea: jcalarcon.dev/demos/villa-nerea
Imágenes y vídeo: Generados con IA; la villa, su nombre, los precios y los textos son ficticios

Portada de Villa Nerea: fachada blanca con arco, olivo y piscina infinita sobre el mar Egeo al atardecer, con el título, los datos de la casa y el botón para comprobar disponibilidad — La portada: el recorrido empieza aquí, sin tener que bajar, y el título se desvanece con el primer gesto de scroll.

Puedes probarla tú mismo: abrir la demo de Villa Nerea. Haz scroll para recorrer la casa y pulsa «Comprobar fechas» para llegar al calendario.

Qué se puede hacer

Recorrido en vídeo con el scroll: un único plano de 18 segundos (exterior, arco, salón, pasillo y suite) que avanza o retrocede según lo que se desplaza la página, con cuatro capítulos y un texto en cada uno.
Comprobar disponibilidad: calendario de dos meses con noches ocupadas, precio por noche en cada día, estancia mínima según la temporada y una consulta animada antes de dar el resultado.
Reservar en cinco pasos: fechas, huéspedes y extras, datos, pago del anticipo y confirmación con referencia, ticket y archivo para añadir al calendario.
El contenido de una web de alquiler: la casa y sus cifras, qué incluye, una galería de ocho estancias con ampliación, un día en la villa, la ubicación, tarifas por temporada y preguntas frecuentes.

El recorrido de Villa Nerea en el capítulo del salón: un fotograma del vídeo con bóvedas blancas, sofá curvo y vistas al mar, con el texto «Un salón para los cuatro» — El capítulo del salón: el fotograma del vídeo cambia con el scroll.

Sección de estancias de Villa Nerea con una galería de fotos del exterior, el salón, el comedor y la suite — La galería de estancias, con ampliación de cada foto.

Disponibilidad y reserva simulada

Quería que el proceso se sintiera como el de una web real, sin que lo fuera. Todo ocurre en el navegador: no hay servidor, no se envía nada y no se guarda nada, ni siquiera en el almacenamiento local.

Noches ocupadas inventadas: se generan con una semilla fija y relativas al día en que se abre la página, con más ocupación en verano. Así el calendario siempre parece vivo y se ve igual para todos.
Selección con reglas: se elige la entrada y la salida; no se puede salir después de la primera noche ocupada, la estancia mínima depende de la temporada y, si algo no cuadra, el calendario se sacude y lo explica con un mensaje.
Precio: se calcula noche a noche según la temporada (baja, media o alta), más la limpieza y los extras elegidos (desayuno, traslado, cena y salida en barco). El resumen lateral se actualiza con cada cambio.
Datos y pago: el formulario valida cada campo y lleva un botón con datos de ejemplo; el pago pide el 30 % de anticipo con una tarjeta que gira al escribir el CVC y una tarjeta de prueba. Es una simulación: no se cobra nada.
Confirmación: pantalla con confeti, referencia, ticket con los datos y un archivo .ics generado en el navegador para añadir la estancia al calendario.

Calendario de disponibilidad de Villa Nerea con dos meses, noches ocupadas rayadas, una estancia seleccionada y el aviso de que está disponible, junto al resumen con el total — El calendario: noches ocupadas rayadas, estancia elegida y resumen con el total.

Paso de pago del anticipo de Villa Nerea con una tarjeta de crédito dibujada, el formulario y el resumen de la estancia — El pago del anticipo, con la tarjeta que se rellena a medida que se escribe.

Pantalla de confirmación de la reserva simulada de Villa Nerea con la referencia, las fechas, los huéspedes, los extras y lo pagado — La confirmación, con la referencia y el ticket de la reserva simulada.

Una pantalla encuadrada

En escritorio la sección de reserva ocupa exactamente una pantalla, con los cinco pasos a la vista y sin scroll interno, como una aplicación. Para que valga en cualquier monitor, todo el simulador está dibujado en em y el tamaño de letra de la sección sigue al alto de la ventana: lo que se ve entero a 1080 píxeles de alto se ve igual de entero a 720. Lo he comprobado a mano en cuatro resoluciones y en los cinco pasos. En el móvil, el mismo simulador pasa a un flujo normal con scroll.

Animaciones

Recorrido: bandas de cine que entran con el primer gesto, capítulos que se encadenan y un indicador lateral con el capítulo activo.
Entrada de bloques: aparición escalonada, cifras que cuentan hasta su valor y fotos que se acercan al llegar a la pantalla (con animation-timeline: view() donde el navegador lo admite).
Calendario y reserva: días que aparecen en cascada, meses que se deslizan, comprobación en directo, tarjeta en 3D, trazo del icono de confirmación y confeti.
Movimiento reducido: quien lo tenga activado ve una versión sin scroll guiado ni animaciones, con el mismo contenido.

Imágenes y vídeo

Las cuatro imágenes y el vídeo de partida, la entrada, el salón y la suite, los generé con IA como material de la demo. El vídeo son tres clips de seis segundos que forman un único plano, montados en uno de 18 segundos con dos resoluciones (720 p para escritorio y 480 p para móvil). Para completar la web de alquiler generé siete imágenes más con flux-1.1-pro en Replicate: el baño, la cocina, la cena en la terraza, la piscina de noche, el desayuno, el segundo dormitorio y el amanecer. Todas están en WebP y ninguna pesa más de 200 KB.

SEO y primera carga

Una landing cinematográfica no tiene por qué ser pesada ni invisible para Google.

Metadatos: título, descripción, canonical, Open Graph y Twitter Card con su imagen, y datos estructurados enlazados con el resto de la web. No he usado un tipo de alojamiento a propósito: la villa es ficticia y no quiero que se trate como una oferta real.
Contenido rastreable: todos los textos, las tarifas y las preguntas frecuentes están en el HTML, no dentro del vídeo ni del simulador.
Imágenes: WebP, con nombres descriptivos, texto alternativo, ancho y alto, y la imagen principal con prioridad alta.
Carga en dos tiempos: la primera carga pesa unos 114 KiB en el móvil y 204 KiB en escritorio. El vídeo, las demás imágenes del recorrido y el simulador de reserva no se descargan hasta el primer gesto de scroll o hasta acercarse a la sección.
Sin sorpresas: sin cookies, sin analítica y sin peticiones a terceros; todo se sirve desde el propio sitio, con las fuentes alojadas aquí.

Cómo está hecho

Página: Astro genera una página estática; los scripts, escritos en TypeScript y sin librerías, se agrupan en tres módulos pequeños.
Vídeo con el scroll: un escenario fijo dentro de una sección alta; el progreso del scroll mueve el tiempo del vídeo con un suavizado, y mientras el vídeo no está listo se ven las fotos de cada capítulo.
Mejora progresiva: sin JavaScript o con movimiento reducido, el recorrido es una pila de cuatro bloques con su foto y su texto, y no se pierde nada.
Simulador: un módulo aparte que se importa con import(); el estado de la reserva vive en memoria y cada paso se pinta de nuevo con su transición.
Accesibilidad: botones y etiquetas reales en el calendario, avisos con aria-live, foco que sigue al paso activo, galería con <dialog> y preguntas con <details>.

Lo que he aprendido

Que pedir el vídeo al cargar la página hundía la imagen principal: pasaba de 1,8 a unos 20 segundos en móvil simulado. Ahora el vídeo espera al primer gesto. Y que la herramienta de medición no recorre el flujo de reserva, así que lo he probado a mano, paso a paso y en distintas pantallas.

Herramientas e IA

El código lo he escrito con ayuda de Claude Code y las imágenes y el vídeo los he generado con IA. Villa Nerea no existe: el apartamento, el nombre, los precios y los textos son inventados, y no hay reseñas ni datos reales.