Sobre esta plantilla
Agent Grove se capturó a 1484x1080 y se conserva como especificación, no como imagen de galería. La paleta se queda en negro #2B2B2B de base, y el tipo es Geist. Se entrega como React y Tailwind CSS, y la captura se fija a 1484x1080 antes de escribir código. El movimiento se limita a transiciones de 300ms, cubic-bezier(0.16,1,0.3,1) y un vídeo en bucle de fondo. Es más útil cuando cada landing page de IA y SaaS tiene que sobrevivir a un cambio de texto sin rediseño.
Pensado para
- Profesionales del marketing de producto que necesitan que cada landing page siga leyéndose con 5,4s de vídeo en bucle detrás del texto.
- Quien le pase el brief de landing page a un modelo usará el prompt de 7.959 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de landing page cuyo titular tiene que seguir siendo tan largo como el de Agent Grove.
Qué incluye
- La navegación es fina a propósito. La barra es una fila de texto y una acción, medida en pasos de espaciado de 24px y transiciones de 300ms, así que se lee como franja y no como banda. Nada de la barra se anima al hacer scroll; está presente desde el primer fotograma y después se queda al margen.
- Un clip, no una ilustración. Un clip de 5,4s a 1484x1080 hace el trabajo atmosférico; el brief fija su recorte y deja el tipo intacto por encima. Exporta a 1484x1080 o más ancho y el recorte de cobertura sigue funcionando.
- Cifras como tipografía. Las cifras se componen en Geist a un tamaño más cercano al titular que al texto corrido. El paso de la etiqueta se cita en el brief, así se mantiene por debajo de las cifras tras una sustitución. Si una cifra necesita un párrafo, no es una estadística.
- Fila superior, una acción. La marca ocupa el borde izquierdo y los enlaces corren a su derecha, todo compuesto en Geist, para que la barra pertenezca a la página de abajo y no a un sistema aparte.
Movimiento e interacción
Duraciones del brief
Los cambios de estado están fijados en 300ms, así que la respuesta de los controles es un valor de diseño y no el que trae el navegador por defecto. El tiempo citado cubre los cambios de estado, así que la respuesta es la parte especificada del movimiento. No publiques el valor por defecto del navegador.
Estático a propósito
Aquí no hay librería de scroll: la composición de 1484x1080 se queda quieta y solo se mueven los elementos que responden a ti. La composición se queda quieta, así que la jerarquía tiene que sostener la página, y lo hace.
El orden detrás de landing page
Compara la parte alta de esta página con una primera pantalla típica de SaaS. Las dos llevan titular y acción; aquí navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas ocupan un orden fijo en vez de competir con el mismo peso. Quien busca SaaS recibe la oferta antes que las opciones.
Leer Agent Grove como especificación
Donde un moodboard deja la escala abierta, este brief la cierra: pasos de espaciado de 24px y transiciones de 300ms, con los valores de alrededor derivados de esa decisión. Nada de este tipo de landing page depende de un valor por defecto.
Qué se mueve en Agent Grove
El movimiento ambicioso suele costarle la legibilidad a la primera pantalla. Este brief mantiene el movimiento lo bastante corto para que el tipo nunca tenga que esperar: transiciones de 300ms, un bucle de 5,4s y estados hover y pulsados. Nada se anima por gusto en este tipo de landing page.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Agent Grove?
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 1484x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Por qué la ficha nombra React y Tailwind CSS?
Agent Grove se construyó en React y 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.
¿Puedo publicar una página reconstruida a partir de Agent Grove sin acreditar nada?
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 1484x1080.
