Cómo se hizo este sitio.

Vocelle se vende a inmobiliarias. En vez de parecer un software más, el sitio se siente como una casa frente al mar: papel encalado, terracota, azul profundo y sol de mediodía.

Todo sale de una sola forma, el arco. Es el logotipo (cuatro arcos que también son ondas de sonido), la ventana del inicio que se cruza con el scroll, el marco de las fotos, las tarjetas de los planes y la arcada de cinco pasos.

Tipografía: Fraunces (variable, con sus ejes de suavidad e itálica caprichosa) para los títulos, e Instrument Sans para el texto.

Diseño y código

Claude Fable 5.2 en Claude Code

Imágenes

GPT Image 2.6, desde Higgsfield

Video

Kling 3.0, desde Higgsfield

Compresión

cwebp y ffmpeg

Animación

GSAP con ScrollTrigger, y Lenis

Disolvencias

WebGL2 a mano, con un shader propio

Revisión

Capturas automáticas con Playwright

Hospedaje

Cloudflare Pages con wrangler

No hay paso de compilación: son un index.html, un styles.css, un main.js y la carpeta assets/.

1. i.

   Leer la oferta y la lámina de marca

   El texto del sitio sale de la oferta real: qué hace, para quién, planes, implementación y garantía. La lámina de marca dio la paleta y el símbolo.

2. ii.

   Generar 10 fotografías

   Con GPT Image 2.6 en calidad alta y 2K. Ninguna lleva texto ni logotipos. Cada una se revisó antes de usarla, sobre todo la mano y la arquitectura.

3. iii.

   Animar 4 de ellas

   Con Kling 3.0, sin sonido, 6 segundos. El truco para que el loop cierre: la misma imagen como cuadro inicial y cuadro final. La terraza y el interior se repitieron en modo pro para tenerlos en 1080p.

4. iv.

   Comprimir

   Imágenes a WebP de 120 a 340 KB. Videos a MP4 H.264 sin audio, de 0.8 a 1.8 MB, con su primer cuadro como póster.

5. v.

   Construir el sitio

   El inicio es un video a pantalla completa recortado con clip-path en forma de arco; el scroll abre el recorte hasta llenarlo todo. Las fotos de "Cómo funciona" se disuelven con un shader de ruido que quema el borde como sol. La sombra de olivo es un SVG que se dibuja solo con código.

6. vi.

   Revisar con capturas

   Un script abre el sitio sin pantalla, baja por la página y guarda capturas a 1440 y a 390 px. Con eso se hizo la pasada de revisión.

Editorial architectural photograph, wide shot. A sunlit Mediterranean villa terrace at late morning: limewashed white walls, pale travertine floor, a low stone balustrade, and beyond it the deep blue sea with a rocky green coastline in the distance. Magenta bougainvillea cascading into the upper right corner, a large terracotta amphora pot, the dappled shadow of olive branches falling across the wall on the left. Two linen loungers. Warm natural sunlight, soft film grain, Kodak Portra color, calm and luxurious. No people, no text, no logos, no signage.

Editorial lifestyle photograph, close-up, vertical. A woman's hand with natural short nails holding a plain modern smartphone up toward her ear, seen from behind her shoulder so the phone screen is not visible, only its plain matte dark back without any logo. She wears a loose cream linen shirt sleeve. Background softly out of focus: a sunlit terrace with a whitewashed arch, terracotta pot and blue sea. Anatomically correct hand with five fingers, natural skin texture. Warm sunlight, shallow depth of field, Kodak Portra color, film grain. No text, no logos, no brand marks.

Editorial interior photograph of a Mediterranean living room in late afternoon: a tall arched window with sheer white linen curtains gently billowing, warm low sunlight streaming across a limewashed wall and terracotta tile floor, a cream boucle sofa, a rustic wooden side table with a ceramic vase holding olive branches, plaster walls, wooden ceiling beams. Soft golden light, deep cobalt blue cushion as the only accent. Kodak Portra color, film grain. No people, no text, no logos, no screens.

Las otras siete siguen la misma receta (fotografía editorial, luz cálida, Kodak Portra, grano, sin texto ni logos): villa con tres arcos y alberca, patio con sombra de olivo, arco de piedra frente al mar, agenda en blanco con llaves y café, puerta de madera entreabierta, villa sobre el acantilado y mesa bajo la parra.

Locked-off static camera on a tripod, no camera movement, no zoom. Subtle cinemagraph: the bougainvillea flowers and olive branches sway very gently in a light sea breeze, the dappled leaf shadows on the white wall and stone floor shift softly, the sea glitters with tiny sparkles of sunlight, the fringe of the linen throw moves slightly. Everything else perfectly still. Calm, slow, seamless loop, natural light, photorealistic.

Los otros tres videos cambian solo lo que se mueve: las cortinas de lino en el interior, la sombra del olivo en el patio y el brillo del mar detrás del arco.

# imagen a WebP
cwebp -q 74 -m 6 -resize 1600 0 villa.png -o villa.webp

# video: sin audio, sin el último cuadro (es igual al primero), listo para web
ffmpeg -i terraza.mp4 -an -vf "trim=end_frame=144,scale=1920:-2,format=yuv420p" \
  -c:v libx264 -preset slow -crf 20 -movflags +faststart terraza-web.mp4

Con el sitio completo se hizo una pasada de revisión: capturas frescas de toda la página a 1440 y 390 px, más una prueba con movimiento reducido y otra sin WebGL. Esto se encontró y se arregló:

• El menú no se leía mientras el arco crecía sobre el video. Ahora se apaga durante el cruce y regresa en claro.
• Al terminar el inicio, el menú se encimaba con la frase del video. Ahora se esconde mientras esa pantalla se va.
• El título tocaba los aros del arco. Bajó un punto de tamaño y el arco se recorrió a la derecha.
• En celular, por el arco solo se veían camastros. El video ahora se acomoda para mostrar el ánfora y el mar.
• En la arcada, los números tapaban los títulos, y quedaba aire vacío abajo. Se rehízo el acomodo y cada arco ganó un ícono al pie.
• La raya de "Lo que no hacemos" cruzaba mal los títulos de dos líneas. Ahora sigue el texto renglón por renglón.
• Dos títulos se partían en mal lugar. Ahora cortan justo antes de la frase en itálica.
• Con movimiento reducido salía un aviso de "Cruza el arco" que ya no aplicaba. Se quitó.
• La sección de garantía tenía demasiado vacío al final. Se ajustó.

Y se subió el nivel con una idea nueva: el sol recorre un arco. Una mancha de luz cálida cruza la página de izquierda a derecha conforme bajas, como un día que avanza. Viene acompañada de un pequeño arco, abajo a la derecha, que se dibuja con tu avance y te regresa al inicio.

Sin WebGL, las fotos de "Cómo funciona" cambian con un fundido simple y la galería de "Para quién" se queda en su primera foto. Con movimiento reducido no hay videos corriendo ni scroll animado.

Necesitas una cuenta de Cloudflare y wrangler instalado (npm i -g wrangler). La primera vez, wrangler login abre el navegador para darte acceso.

# 1. Crear el proyecto (una sola vez)
wrangler pages project create vocelle-riviera --production-branch main --force

# 2. Subir la carpeta del sitio (cada vez que cambie algo)
wrangler pages deploy . --project-name vocelle-riviera --branch main

Con wrangler 4.155, sin --force el primer comando publica la carpeta como Worker en una dirección workers.dev que lleva el nombre de tu cuenta. Con --force crea un proyecto de Pages clásico, con dirección pages.dev. Solo hace falta la primera vez.

La ruta /guide/ es solo una carpeta guide con su index.html. El archivo _headers le dice a Cloudflare que guarde en caché todo lo de assets/.

En vivo: vocelle-riviera.pages.dev