JAF Masajes
Web de presentación para un estudio de masajes real de Rosario: tratamientos con precios, reseñas de Google y reserva por WhatsApp.
- Vite
- JavaScript
- GSAP
- fal.ai
- Vercel
Proyecto propio, hecho solo.
El problema
Un estudio de masajes de una sola persona no tenía web: una lista de precios en imagen y un WhatsApp. Lo que suele ofrecerse para ese caso es un template de spa de lujo, que miente sobre lo que el negocio es.
El desafío era el opuesto al de un template: que se note que es un lugar real y chico, y que eso juegue a favor.
Qué construí
La identidad no salió de una referencia ajena sino del material que el negocio ya tenía: la paleta mocha y la tipografía de su propia lista de precios.
Las fotos del local son las reales. Las imágenes editoriales que el negocio no tenía —el hero, las tarjetas de tratamientos— se generaron con IA y se upscalearon, cuidando que compartan luz y paleta con las fotos verdaderas.
El movimiento es un solo sistema con GSAP: los divisores se destensan al scrollear —de zigzag a onda calma, el servicio contado en una línea— y todo respeta reduced-motion sin dejar contenido invisible.
Dónde está hoy
La web está en producción con los precios reales, las reseñas reales de Google y la reserva por WhatsApp que el negocio ya usaba.
Decisiones técnicas
Lo que no era obvio, y por qué terminó siendo así.
El contraste se mide sobre los píxeles, no se estima
Texto claro sobre foto es el lugar clásico donde una web queda ilegible sin que nadie lo note. Acá cada texto que pisa una imagen se verificó componiendo foto y degradado en un canvas y midiendo el peor píxel debajo de los glifos reales.
Esa medición encontró problemas que a ojo pasaban: una itálica en 2,9:1 —debajo del mínimo— que se corrigió hasta cumplir AA, en desktop y en celular por separado, porque cada uno tiene su propia foto y su propio velo.
Sin testimonios inventados
Hasta tener las reseñas reales de Google, la sección de opiniones mostró placeholders visiblemente marcados como tales. Inventar testimonios para un negocio real no era una opción, ni siquiera como relleno temporal.
Con el logo pasó lo mismo: en vez de «rediseñarlo» con IA —que habría inventado un trazo que no es el de la dueña— se upscaleó el original y se le extrajo el fondo.
Las animaciones no pueden correr en una pestaña oculta
GSAP anima con requestAnimationFrame, que en una pestaña en segundo plano está pausado. Si la página se abre en una pestaña que todavía no se miró, los tweens de entrada arrancan congelados y el contenido queda en opacidad cero.
La inicialización entera espera a que la pestaña sea visible, y si JavaScript no corre, el CSS no esconde nada: el estado oculto existe solo cuando hay quien lo revele.