Sobre esta plantilla
Heritage Grove resuelve el problema de cada pie de página de una marca de ecommerce con un solo brief capturado. El titular de la propia página dice “Heritage Grove — Footer”, y la composición se construye alrededor de esas palabras exactas. El color se limita a crema #EAE3DE de base, turquesa #0F454F para la tipografía y tono oscuro #2A707C para los acentos y la página se compone en Poppins. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1920x1424 antes de escribir código. Todo el movimiento cabe en transiciones de 2s, cubic-bezier(.22,1.36,1) y un vídeo en bucle de fondo. Es la referencia adecuada para este tipo de pie de página en una marca de ecommerce, que tiene que transmitir intención desde la primera pantalla.
Pensado para
- Los responsables de producto que tengan que presupuestar la implementación leerán easing cubic-bezier(.22,1.36,1) como el alcance real del trabajo.
- Este diseño de pie de página sirve a diseñadores que tienen que entregar una implementación en un único archivo HTML autocontenido a un desarrollador y quieren el movimiento por escrito.
- Equipos externos que se hacen cargo de su pie de página y necesitan fijar un breakpoint de 359px en el repositorio antes del primer commit.
Qué incluye
- La barra sigue la cuadrícula. La fila gasta el contraste en un solo punto: la acción #2A707C, con la marca y los enlaces retenidos sobre el color del texto. Por debajo de 359px los enlaces se pliegan en una superposición a pantalla completa. Por debajo de 359px los enlaces colapsan en lugar de saltar a una segunda línea. Si tu propia página tiene más secciones, agrúpalas en lugar de ensanchar la barra.
- El fotograma de póster importa. Los medios son un solo clip de 9,6s recortado para cubrir el marco de 1920x1424, así que nunca aparecen bandas negras en ningún ancho. El bucle es lo bastante corto (9,6s) para que el ojo lo lea como textura y no como una línea de tiempo.
- La escala se limita, no se escalona. Los cambios de ancho se resuelven en el propio tipo: un clamp entre 240px y 52px lleva el titular del móvil al escritorio sin una composición móvil aparte. Como la escala está limitada, la línea display nunca salta entre breakpoints. Conserva la jerarquía; cambia la escala.
- Una barra de navegación que no estorba. Las etiquetas son lo bastante cortas para caber en una línea a 359px, y el elemento activo se marca con peso y no con una píldora.
Movimiento e interacción
Movimiento ambiente sin librería de scroll
El movimiento ambiente es un clip de 9,6s en 1920x1424, en bucle discreto detrás del texto y sin reaccionar al puntero. Como está silenciado, el bucle puede correr bajo el texto sin competir por el sonido ni por el foco.
Incluye una rama más silenciosa
El movimiento reducido está especificado y no añadido a última hora: con él activado, la entrada y el bucle se detiene y la composición mantiene su estado final. La rama forma parte del brief y no es un añadido de última hora. Prueba la página con el movimiento desactivado.
El orden detrás de pie de página
La contrapartida es la paciencia: la página retiene el detalle que una cuadrícula escaneable entregaría de inmediato. Lo que gana es una primera pantalla donde navegación, la fila de cifras, la lista de funciones, el formulario y el clip de fondo no se pueden malinterpretar. Quien busca ecommerce recibe la oferta antes que las opciones.
El reflujo de pie de página
Una maquetación estrecha diseñada exige más decisiones que un apretujón. El brief las paga: la escala es fluida en lugar de escalonada, la maquetación cambia a 359px y la sección se mantiene a 100vh, declarado y no descubierto al construir. Los controles siguen siendo lo bastante grandes para tocarlos y el texto mantiene su orden de lectura en cualquier ancho.
Por qué esta composición funciona para ecommerce
Frente a un hero de plantilla, la diferencia está en lo que falta. No hay cuadrícula de tarjetas, ni carrusel, ni una segunda llamada a la acción: solo navegación, la fila de cifras, la lista de funciones, el formulario y el clip de fondo, con un tamaño de display fijo de 16px y secciones de 100vh como referencia. Heritage Grove enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Cuánto de Heritage Grove depende de un único archivo HTML autocontenido?
Heritage Grove se construyó en un único archivo HTML autocontenido, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
¿El brief de Heritage Grove es lo mismo que el prompt que escribiría yo?
Todo lo que se cita en la página procede del brief capturado de 12.893 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿El prompt de Heritage Grove es una especificación cerrada o un punto de partida?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 1920x1424. En ningún punto la imagen renderizada funciona como fuente de la verdad.
