Sobre esta plantilla
Tenlas Footer resuelve el problema de cada pie de página de un producto de IA o SaaS con un solo brief capturado. El titular dice “Take control of your productivity today”, y el orden de pie de página gira alrededor de esa línea. El color se limita a negro #050505 de base, blanco #F5F5F2 para la tipografía y amarillo brillante #DBFF00 para los acentos y la página se compone en Inter. La ficha nombra el stack que produjo la página (Tailwind y JavaScript vanilla) en lugar de esconderlo. El presupuesto de movimiento se agota en transiciones de 50ms y un vídeo en bucle de fondo. Sirve de referencia cuando construyas este tipo de pie de página para un producto de IA o SaaS y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Pasa Tailwind y JavaScript vanilla al desarrollador con el recorte de 1920x1556 adjunto y deja que lo reconstruya.
- Escribe tu propio titular y luego rehace este diseño de pie de página en Tailwind y JavaScript vanilla con las medidas intactas.
- Si tres personas tienen que editar el diseño de pie de página, dales a los responsables de contenidos tipografía de 14px a 18px y secciones de 50vh en vez de una captura.
Qué incluye
- Navegación contenida en una fila. La fila superior reúne la marca, cuatro o cinco enlaces y una sola acción teñida de #DBFF00, dimensionada para no destacar frente al resto de la página. Los enlaces se componen a un tamaño menor que la marca, y la acción en #DBFF00 es el único elemento de la barra con peso. Diseña el estado colapsado antes de añadir un sexto enlace.
- Valores que puedes comprobar. Aquí nada se mide a ojo. La especificación fija tipografía de 14px a 18px, secciones de 50vh, pasos de espaciado de 18px y transiciones de 50ms, y el resto de la maquetación se deriva de esos valores. Cada valor responde a una función: un paso de tipo, un hueco, un radio o una transición.
- El fotograma de póster importa. Los medios hacen trabajo atmosférico y no narrativo: un bucle de 8,8s a 1920x1556 detrás de todo lo demás. El bucle es lo bastante corto (8,8s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Los enlaces colapsan a un ancho. Marca, enlaces y la acción #DBFF00 comparten una línea base, y eso es lo que evita que una fila fina parezca accidental.
Movimiento e interacción
Tiempos en milisegundos
Los tiempos son cortos y coherentes (50ms), así que el hover y la pulsación se leen como un solo sistema y no como un conjunto de efectos sueltos. Los tiempos cortos son la razón de que la página se lea como diseñada; un valor por defecto lento desharía la composición.
Estados de puntero, nada más
Cada elemento interactivo hace una sola cosa (estados hover en los botones y los enlaces y no en todas las tarjetas), y eso mantiene los estados previsibles. La respuesta se limita a los controles, así que la composición se queda quieta a su alrededor.
Hacer tuyo este tipo de pie de página
La contrapartida es el reconocimiento. Si conservas demasiado de Tenlas Footer, la página se lee como de otro; si conservas las cifras y cambias el contenido, se lee como tuya. Reescribe el texto y el material antes de recolorear nada.
Qué se mueve en Tenlas Footer
El movimiento se limita a transiciones de 50ms, un bucle de 8,8s y una aparición al hacer scroll. Nada en este tipo de pie de página se anima más tiempo del que permite el brief. Nada se anima por gusto en este tipo de pie de página.
Las cifras detrás de pie de página
Las cifras concretas envejecen: un valor que encaja en 1920x1556 puede no encajar en tu marco. El brief enuncia tipografía de 14px a 18px y secciones de 50vh de todos modos, porque un valor declarado es más fácil de cambiar que uno implícito. Nada de este tipo de pie de página depende de un valor por defecto.
Preguntas frecuentes
¿Puedo reconstruir este diseño de pie de página de Tenlas Footer con otro stack?
Tenlas Footer se construyó en Tailwind y JavaScript vanilla, 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.
¿Qué puedo hacer con el brief de Tenlas Footer una vez lo tengo?
Todo lo que se cita en la página procede del brief capturado de 6.053 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Cuánto ocupa el prompt que hay detrás de Tenlas Footer?
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 1920x1556. En ningún punto la imagen renderizada funciona como fuente de la verdad.
