Una página de cocinas que se arma sola mientras bajas
Hearthline Kitchens es un sitio de muestra, no un cliente. Inventamos un remodelador de cocinas de lujo en Miami para enseñar lo que puede hacer la página de un contratista, y para ver qué tan rápido la IA podía arrancar un sitio así.
- Proyecto
- Sitio de muestra (no es un cliente)
- Oficio
- Remodelación de cocinas
- Hecho con
- HTML, GSAP, Three.js
- Primera versión
- Unos 20 minutos con IA
- Demo en vivo
- fusewebdesign.com/demos/hearthline
El problema
Casi todas las páginas de remodeladores se ven igual: una foto de stock, una lista de servicios y un formulario. Alguien que va a gastar mucho en una cocina quiere imaginarse el resultado antes de llamar a nadie.
Queríamos saber si la página de un contratista podía sentirse como entrar a una sala de exhibición, sin el presupuesto de una agencia grande ni meses de espera.
La animación al bajar
Llegas frente a una casa. Mientras bajas, entras por la puerta, el cuarto vacío se llena de gabinetes, una isla y luces, y afuera cae la tarde. Después aparecen un título corto y dos botones.
Cómo funciona: es una película corta, pero tu dedo es el botón de play. Hicimos con IA tres imágenes que combinan (el cuarto vacío, la cocina terminada y la misma cocina al atardecer), un modelo de video con IA llenó el movimiento entre ellas, y cortamos el resultado en 327 cuadros. La página muestra el cuadro que corresponde a cuánto has bajado, así puedes avanzar, regresar o parar donde quieras.
Para que se vea suave, la página solo tiene listos unos 20 cuadros cerca de donde estás, los celulares reciben cuadros más livianos y primero aparece una imagen nítida para que nada se vea vacío mientras carga lo demás.
Lo que hicimos
- Una portada que arma la cocinaLa película de arriba, sin texto encima hasta que la cocina está terminada.
- Una cocina 3D que puedes cambiarSe arma mientras bajas. Después eliges los gabinetes, el tope, el salpicadero y los herrajes y los ves cambiar en 3D.
- Antes y despuésUn deslizador entre una cocina vieja de condominio y el mismo cuarto remodelado.
- Una pared de exhibiciónFotos reales de piedra, madera y bronce que se mueven a dos velocidades, con un brillo suave al pasar el mouse.
- Cocinas terminadasUn carrusel de proyectos que puedes arrastrar, con vista de pantalla completa para cada foto.
- Proceso, precios y zona de servicioUn plan de seis semanas que muestra el mismo cuarto paso a paso, rangos de precio, preguntas frecuentes y un mapa de las zonas que atiende.
Velocidad y celular
Probamos la demo en Chrome, configurado como un celular de gama media con 4G lenta (procesador 4 veces más lento, 1.6 Mbps). Son nuestras propias pruebas de laboratorio del 13 de noviembre de 2026.
- Primera pantalla visible
- 1.6 sen la prueba de celular lento
- Movimiento del diseño
- 0nada brinca mientras carga
- Primera descarga
- 8 MBcelular, casi todo cuadros de la película
- Película en computadora
- 24 MBcuadros más nítidos para pantallas grandes
La verdad: la primera pantalla aparece rápido y nada se mueve mientras carga. Pero una película al bajar pesa mucho. Los cuadros siguen bajando en el fondo, así que la página completa tarda mucho más en un celular lento que una página normal de negocio.
Para una pieza de exhibición está bien. Para un cliente real, escogeríamos dónde vale la pena el efecto: una película más liviana, menos cuadros en celulares o un video corto en su lugar, para que la página siga rápida donde están tus clientes.
Cómo la IA lo hizo rápido
La primera versión tomó unos 20 minutos. Describimos el negocio, el estilo y cada sección con palabras sencillas, y la IA escribió la página, los estilos y los efectos al bajar. Las fotos de la cocina se hicieron con una herramienta de imágenes con IA, y las fotos de materiales son imágenes de stock gratis.
Después la mejoramos a mano. El primer borrador se veía bien, pero no estaba listo. En los días siguientes hicimos el efecto lo bastante suave para grabarlo, bajamos las luces para que el mármol blanco no perdiera sus vetas en cámara, arreglamos el diseño en celular y lo probamos en celulares reales.
Qué significa para ti: con IA te podemos mostrar un diseño real mucho más rápido que antes. Lo que todavía requiere oficio es el acabado: que sea rápida, clara y fácil de usar en el celular, para que la gente te llame.
Mira qué le está costando llamadas a tu página
Revisamos tu página como la ve un cliente desde su celular: velocidad, seguridad, el botón para llamar y tu perfil de Google. Te llega un PDF con los 3 arreglos más importantes.
- Un reporte en PDF en tu correo en unos minutos
- ¿Todavía no tienes página? Un diseño gratis de tu página principal, el mismo día
- Sin firmar nada y sin llamadas. ¿Prefieres hablarlo? Reserva una reunión de 15 minutos.
¡Listo!
Casos de éxito de clientes reales
Arcadian Realty Team
Una marca propia para un equipo de bienes raíces, con propiedades en vivo y una página del equipo completo.
Lee el caso
Fundación Juan Guzmán
Una página bilingüe para la fundación de un ex lanzador de Grandes Ligas, con donaciones incluidas.
Lee el caso