Sobre esta plantilla
Aquí no hay una captura sino un caso de pie de página de Peakflow Footer, con el brief original al lado. La paleta se queda en negro #111111 de base y blanco #FAFAFA para la tipografía, y el tipo es Inter. El montaje es Tailwind CSS; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. El movimiento se limita a transiciones de 100ms, cubic-bezier(0.5, 0, 0, 1) y un vídeo en bucle de fondo, lo bastante discreto para que el texto siga mandando. Toma prestada la estructura, no el tema: las cifras y el orden de pie de página pasan a tu marca sin cambios.
Pensado para
- Los desarrolladores que necesiten que el diseño de pie de página aguante una conexión lenta usarán 1920x1470 y la escala tipográfica como presupuesto de peso.
- Este diseño de pie de página sirve a fundadores que necesitan una pantalla de prueba de que los textos de SaaS aguantan 7,9s de vídeo en bucle.
- Equipos de producto que escriben los textos de Pie de página y necesitan que cada línea respete la longitud para la que se dimensionó la tipografía de display.
Qué incluye
- Medido contra el viewport. El brief fija pasos de espaciado de 30px, transiciones de 100ms y easing cubic-bezier(0.5, 0, 0, 1) y deja el resto a la disposición, que es lo contrario de una escala que crece sola. Un remontaje que da esos números se parece a la referencia sin más ajustes.
- Vídeo en la capa inferior. Un clip de 7,9s a 1920x1470 hace el trabajo atmosférico; el brief fija su recorte y deja el tipo intacto por encima. Exporta a 1920x1470 o más ancho y el recorte de cobertura sigue funcionando. Exporta a 1920x1470 o más ancho para que el recorte siga siendo honesto.
- Cada tipo con una función. Las fuentes tienen papeles asignados y no se mezclan: Inter sostiene a la vez la línea display y la interfaz. Cambiar de tipografía es seguro mientras los tamaños y los pesos se queden donde los puso el brief.
- Un campo, una acción. Aquí solo hay una decisión: rellenar el formulario o marcharse. Todo lo demás de la pantalla sostiene esa decisión. La acción se sitúa justo bajo el último campo, así la decisión nunca queda a más de un vistazo.
Movimiento e interacción
Una duración para los controles
Cada cambio de estado de la especificación lleva una duración: las transiciones se resuelven en torno a 100ms con la curva cubic-bezier(0.5, 0, 0, 1). Nada queda en el valor por defecto del navegador, y por eso la página se siente diseñada y no animada. Si cambia el easing, la duración tiene que revisarse con él. Si cambias el easing, cámbialo en todas partes.
Los controles son la capa interactiva
La respuesta se limita a estados hover en los botones y los enlaces y no en todas las tarjetas, así que el resto de la maquetación es una composición fija. Los estados salen de la paleta de la propia página y no de un valor por defecto de componente. Mantén pequeña la capa interactiva.
Por qué esta composición funciona para SaaS
3.693 caracteres de brief producen una sola pantalla sin relleno. Los valores que contiene son explícitos (pasos de espaciado de 30px y transiciones de 100ms), y por eso la composición se sigue leyendo cuando cambian las palabras. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
Hacer tuyo este tipo de pie de página
La contrapartida es el reconocimiento. Si conservas demasiado de Peakflow Footer, la página se lee como de otro; si conservas las cifras y cambias el contenido, se lee como tuya. La composición es la parte reutilizable, y sobrevive a una marca distinta.
El reflujo de pie de página
Frente a una maquetación de móvil que esconde secciones, esta las conserva y les cambia la forma: la escala es fluida en lugar de escalonada. La escala cambia con el viewport; la secuencia, no.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Peakflow Footer?
El brief capturado ocupa 3.693 caracteres y describe la maqueta, la escala tipográfica, la paleta y las transiciones. Copiarlo te da ese texto; si lo mandas a Studio, la misma petición queda preparada con la página ya descrita.
¿El brief de Peakflow Footer es lo mismo que el prompt que escribiría yo?
Todo lo que se cita en la página procede del brief capturado de 3.693 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Por qué la ficha nombra Tailwind CSS?
Peakflow Footer se construyó en Tailwind CSS, 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.
