Sobre esta plantilla
Agent Wave muestra una forma de construir este tipo de landing page para un producto de IA o SaaS y publica las instrucciones que lo generaron. El esquema de color es #000000 de base y #FFFFFF para la tipografía, y la página está compuesta en Inter. Se entrega como un único componente, y la captura se fija a 1478x1080 antes de escribir código. El presupuesto de movimiento se agota en transiciones de 0.28s, cubic-bezier(0.16, 1, 0.3, 1) y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 16.675 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Este diseño de landing page sirve a diseñadores que tienen que entregar una implementación en un único componente a un desarrollador y quieren el movimiento por escrito.
- Toma prestada la estructura de landing page entera y sustituye los textos línea a línea cotejando con un breakpoint de 901px.
- Equipos que rehacen su landing page de SaaS a partir de la referencia de un competidor y quieren dejar claro un único componente antes de que nadie se comprometa con un framework.
Qué incluye
- Navegación contenida en una fila. La barra se superpone sobre landing page en lugar de empujarla hacia abajo, así la composición conserva toda la altura de la primera pantalla. Por debajo de 901px los enlaces colapsan en lugar de saltar a una segunda línea. Prueba la barra sobre tus propios medios antes de darle un fondo.
- El vídeo es el fondo, no un panel. El clip dura 6,9s a 1478x1080 y se repite sin corte visible, por eso se lee como superficie y no como metraje. El bucle es lo bastante corto (6,9s) para que el ojo lo lea como textura y no como una línea de tiempo.
- El tipo fija la jerarquía. La línea display se compone en Inter a un tamaño que fija el brief, lo que convierte el titular en un elemento de composición y no en un párrafo. El interletraje se cierra a medida que crece el tamaño, y por eso la línea display se sostiene a lo largo de 19px. Comprueba la escala en gris.
- Navegación sin fondo propio. Las etiquetas son lo bastante cortas para caber en una línea a 901px, y el elemento activo se marca con peso y no con una píldora.
Movimiento e interacción
El bucle hace el trabajo ambiente
El movimiento ambiente viene del bucle de 6,9s en 1478x1080 y no de efectos de scroll, lo que mantiene la página tranquila y el texto legible. Como está silenciado, el bucle puede correr bajo el texto sin competir por el sonido ni por el foco. Graba o exporta a 1478x1080 o más ancho.
El movimiento se puede apagar
El movimiento reducido está especificado y no añadido a última hora: con él activado, la entrada y el bucle se detiene y la composición mantiene su estado final. La respuesta de las interacciones sigue funcionando con movimiento reducido; solo se descartan las entradas.
Leer Agent Wave como especificación
Una reconstrucción suele empezar con una captura y una suposición. Aquí empieza con 16.675 caracteres de especificación: el marco, el espaciado y el movimiento están escritos antes de la primera línea de código. Nada de este tipo de landing page depende de un valor por defecto.
El acierto de landing page
La contención te cuesta espacio para pruebas por encima de la primera pantalla. Este brief acepta ese coste y gasta la primera pantalla en la oferta, con las cifras ya fijadas (un tamaño de display fijo de 19px y secciones de 100vh) para poder añadir abajo una sección de prueba sin rehacer nada. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
El reflujo de landing page
El coste de una escala fluida es menos control sobre los tamaños exactos. A cambio, la línea de display se mantiene proporcionada, y por eso un clamp entre 24px y 22px está en el brief. Un apretujón habría sido más barato y no aguantaría.
Preguntas frecuentes
¿Puedo reconstruir este diseño de landing page de Agent Wave con otro stack?
Agent Wave se construyó en un único componente, 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 Agent Wave?
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 1478x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo publicar una página reconstruida a partir de Agent Wave 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 1478x1080.
