Sobre esta plantilla
Coffee Rewards da a una marca de ecommerce una primera pantalla terminada y las cifras que la produjeron. El titular dice “Plum Parfait Latte”, y el orden de landing page gira alrededor de esa línea. El color se limita a naranja intenso #070402 de base y #EDE4D8 para la tipografía y la página se compone en Helvetica Now Display. La entrega es Vite: una página, sin plugins y sin herramientas de build entre tú y el diseño. El brief gasta su presupuesto de movimiento en transiciones de 0.7s, cubic-bezier(0.16, 1, 0.3, 1) y un vídeo en bucle de fondo. Cuando prepares el brief de cada landing page de ecommerce, parte de esta composición y sustituye el tema.
Pensado para
- Quien usa un generador con IA y quiere un brief que ya incluya un marco de 1482x1080 en vez de dejarlo todo al modelo.
- Este diseño de landing page sirve a fundadores que necesitan una pantalla de prueba de que los textos de ecommerce aguantan 5,9s de vídeo en bucle.
- Quien le pase el brief de landing page a un modelo usará el prompt de 5.054 caracteres como punto de partida.
Qué incluye
- Números que llegan al montaje. La maquetación trabaja con valores absolutos y no con proporciones: pasos de espaciado de 16px, transiciones de 0.7s y easing cubic-bezier(0.16, 1, 0.3, 1). No hay ningún valor intermedio inventado entre los citados; la lista de medidas es todo el sistema.
- Vídeo a marco completo, sin panel. La composición se construye encima del clip de 1482x1080 y no a su lado, de modo que los medios nunca reciben un panel ni un borde. El bucle es lo bastante corto (5,9s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Los pasos de espaciado van cifrados. El espaciado se cita igual (pasos de espaciado de 16px, transiciones de 0.7s y easing cubic-bezier(0.16, 1, 0.3, 1)), no como una escala que crece sola.
- Un solo medio lleva el tono. Exporta a 1482x1080 o más ancho para que el recorte siga siendo honesto.
Movimiento e interacción
Un bucle, no una secuencia
Un clip de 5,9s es toda la capa ambiente: se reproduce detrás del texto, da la vuelta sin corte visible y nunca reacciona al puntero. Como está silenciado, el bucle puede correr bajo el texto sin competir por el sonido ni por el foco.
Tiempos cortos y parejos
Aquí el movimiento se mide en milisegundos: 0.7s con la curva cubic-bezier(0.16, 1, 0.3, 1). Ese es todo el presupuesto de animación, y se gasta en cambios de estado y no en una línea de tiempo de scroll. El easing se especifica junto a la duración (0.7s), así que una reconstrucción no puede colar otra sensación sin avisar. Los tiempos forman parte del diseño, no son un repaso final.
El brief de ecommerce se sostiene
Una capa de tinte sobre el material habría sido la solución fácil. El brief la deja fuera. El medio es un bucle de 5,9s en 1482x1080. El texto aguanta igual porque pasos de espaciado de 16px y transiciones de 0.7s mantienen el marco tranquilo. Coffee Rewards enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Qué se mueve en Coffee Rewards
Cuenta los elementos animados y la lista es corta: transiciones de 0.7s, un bucle de 5,9s y un lienzo en vivo. Nada se anima por gusto en este tipo de landing page.
Leer Coffee Rewards como especificación
El brief es una especificación. Enuncia pasos de espaciado de 16px, transiciones de 0.7s y easing cubic-bezier(0.16, 1, 0.3, 1) y nombra el marco del material en 1482x1080 antes de diseñar nada alrededor. Nada de este tipo de landing page depende de un valor por defecto.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Coffee Rewards?
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 1482x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo reconstruir este diseño de landing page de Coffee Rewards con otro stack?
No. El brief es una especificación, no una lista de dependencias. Se escribió para Vite, pero la misma composición se puede recrear en lo que ya uses. El stack se nombra para que sepas cómo se hizo la referencia.
¿Cómo trato los medios de Coffee Rewards 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 1482x1080.
