Vale

Vale es una plantilla de real estate de lujo curado para agencias boutique que representan un puñado de propiedades en lugar de un mercado entero. Once rutas cubren el home, un archivo de propiedades y sus fichas individuales con panel de specs de ocho filas, lista de features, galería y CTA de consulta, un índice de barrios con páginas de detalle, un journal, about, servicios, contacto y 404. El hero es una secuencia sticky de 300vh: tres residencias destacadas hacen cross-fade sobre una curva smoothstep ligada al progreso del scroll, cada una con un panel editorial cuyo precio de salida se anima en USD. Más abajo, la sección de barrios se pinnea y hace scroll horizontal con parallax ligado a containerAnimation en cada panel. Tres skins, Parchment & Brass, Midnight Estate y Slate Modern, se cambian desde un control flotante y persisten en localStorage.

Qué incluye

• 11 rutas, Inicio, Propiedades, Ficha de propiedad, Barrios, Detalle de barrio, Journal, Post de journal, About, Servicios, Contacto, 404
• Hero sticky de 300vh, tres residencias destacadas hacen cross-fade sobre una curva smoothstep propia impulsada por el progreso de ScrollTrigger con scrub 0.6
• Los precios de salida se animan hasta su valor real con un tween de GSAP formateado en vivo con Intl.NumberFormat USD
• Rail horizontal de barrios pinneado, los paneles se desplazan lateralmente mientras cada imagen escala mediante un ScrollTrigger ligado a containerAnimation
• Revelados de línea con SplitText en el statement de la agencia, el philosophy strip, el testimonio y el CTA final
• Listings destacados con revelados de card en clip-path inset(0 0 100% 0) más parallax con scrub en cada imagen

La firma

El home abre sobre un escenario sticky de 300vh con tres residencias destacadas. En lugar de un cambio seco, la opacidad de cada capa se calcula con una curva smoothstep contra el valor de progreso de ScrollTrigger, así que las propiedades se disuelven entre sí en ventanas solapadas de 0.28–0.36 y 0.62–0.70 mientras sus imágenes se desplazan en direcciones opuestas. Cuando una capa supera el 80% de opacidad, su panel editorial dispara un tween de GSAP que anima el precio de salida desde cero, formateado en vivo como USD.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/vale/. 11 páginas, hecha con Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.