Sobre esta plantilla
Task Engine conserva el rastro de sus decisiones: el brief que hay detrás de landing page ocupa 14.503 caracteres. El color se limita a blanco #F0F0F0 de base y negro #0D0D0D para la tipografía y la página se compone en Plus Jakarta Sans. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 2104x1080 antes de escribir código. El presupuesto de movimiento se agota en transiciones de 2400ms, cubic-bezier(.16,1.3,1) y un vídeo en bucle de fondo. Tómalo como el brief de landing page para una marca de ecommerce que tiene que aguantar una reconstrucción, no solo un primer vistazo.
Pensado para
- Equipos que construyen su landing page de una marca de ecommerce y necesitan dejar constancia de easing cubic-bezier(.16,1.3,1) antes de que salga un presupuesto.
- Este diseño de landing page va dirigido a equipos que ya conocen un único archivo HTML autocontenido y solo necesitan dejar un único archivo HTML autocontenido por escrito.
- Quien usa un generador con IA y quiere un brief que ya incluya un breakpoint de 700px en vez de dejarlo todo al modelo.
Qué incluye
- Los tamaños están en el brief, no en una escala. El brief fija secciones de 100vh, pasos de espaciado de 30px, transiciones de 2400ms y easing cubic-bezier(.16,1.3,1) y deja el resto a la disposición, que es lo contrario de una escala que crece sola. Cada valor responde a una función: un paso de tipo, un hueco, un radio o una transición.
- El bucle es el fondo. El vídeo de 2104x1080 se reproduce en bucle durante 10,6s detrás del texto, silenciado y en línea, sin ninguna capa de tinte entre ambos. Un fotograma de póster a 2104x1080 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- El interletraje se cierra al crecer. Los pasos de tamaño y el interletraje del brief son los que dan el tono: Plus Jakarta Sans a un tamaño display cerrado y una caída clara hasta el texto de apoyo. La tipografía display se usa a un solo tamaño, por eso nunca compite consigo misma.
- Aquí nada se hereda. El espaciado se cita igual (secciones de 100vh, pasos de espaciado de 30px, transiciones de 2400ms y easing cubic-bezier(.16,1.3,1)), no como una escala que crece sola.
Movimiento e interacción
Rápido, pero deliberado
Cada cambio de estado de la especificación lleva una duración: las transiciones se resuelven en torno a 2400ms usando cubic-bezier(.16,1.3,1). Nada queda en el valor por defecto del navegador, y por eso la página se siente diseñada y no animada. Los valores son lo bastante cortos para leerse como respuesta y no como animación.
El bucle hace el trabajo ambiente
Un clip de 10,6s es toda la capa ambiente: se reproduce detrás del texto, da la vuelta sin corte visible y nunca reacciona al puntero. El clip es lo bastante corto para girar sin costura visible, y eso importa más que su resolución.
Qué gana una marca de ecommerce aquí
En esta página hay una sola promesa, y secciones de 100vh y pasos de espaciado de 30px la sostienen en su sitio. Nada por debajo de la primera pantalla tiene que cargar también con la oferta. Da a quien lee páginas de ecommerce el camino más corto y honesto hasta la oferta.
El reflujo de landing page
No hay un diseño de móvil aparte que mantener: la maquetación cambia a 700px, la sección se mantiene a 100vh y hay una rama de movimiento reducido, y la misma jerarquía se mantiene en ambos. La maquetación estrecha es una decisión y no un ajuste forzado, y la jerarquía sobrevive a ella.
Hacer tuyo este tipo de landing page
Cuando pongas tu propio material, conserva el recorte y el orden de capas. El medio es un bucle de 10,6s en 2104x1080. Esa colocación es lo que mantiene legible el texto. Tu acento tiene que superar la misma prueba de contraste que el de la referencia.
Preguntas frecuentes
¿Cuánto de Task Engine depende de un único archivo HTML autocontenido?
Task Engine 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.
¿Qué contiene en realidad el brief que hay detrás de Task Engine?
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 2104x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo usar Task Engine en un proyecto de cliente?
El brief es una descripción, no una licencia para redistribuir los recursos de otra persona. Conserva la estructura y los números, sustituye los medios y las marcas, y acredita la procedencia si un cliente pregunta de dónde sale la maqueta. La captura de la referencia es de 2104x1080.
