Sobre esta plantilla
Intelligence Layer da a un producto de IA o SaaS una primera pantalla terminada y las cifras que la produjeron. La paleta es casi negro #050505 de base y #FAFAFA para la tipografía, con la tipografía Manrope. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1462x1080 antes de escribir código. Todo el movimiento cabe en transiciones de 0.9s, cubic-bezier(.22, 1.36, 1) y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 11.825 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Pensado para agencias que presentan propuestas de SaaS y necesitan incluir easing cubic-bezier(.22, 1.36, 1) en la primera respuesta al cliente.
- Equipos externos que se hacen cargo de su landing page y necesitan fijar un único archivo HTML autocontenido en el repositorio antes del primer commit.
- Este diseño de landing page sirve a diseñadores que tienen que entregar una implementación en un único archivo HTML autocontenido a un desarrollador y quieren el movimiento por escrito.
Qué incluye
- Una barra sin nada de más. La navegación es una sola fila, sin un segundo nivel debajo. La acción lleva el acento mientras los enlaces se quedan en el color del texto, así la jerarquía de la barra coincide con la de la página que tiene debajo.
- Aquí nada se hereda. Tipo y espaciado salen aquí de una sola lista: secciones de 100vh, pasos de espaciado de 25px, transiciones de 0.9s y easing cubic-bezier(.22, 1.36, 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. Un único recurso de 6,6s sostiene toda la primera pantalla, y la página no tiene un segundo medio que mantener sincronizado. Exporta a 1462x1080 o más ancho y el recorte de cobertura sigue funcionando.
- Fila superior, una acción. Mantén el número de enlaces en cuatro o cinco; la fila está dimensionada para eso. La captura de la referencia es de 1462x1080.
Movimiento e interacción
Una escena en vivo en la primera pantalla
Aquí la decisión de diseño es renderizar en tiempo real (un lienzo WebGL), y la maquetación se construye para dejarle sitio. Reserva presupuesto para el render: es el elemento que más fotogramas puede costar en un dispositivo modesto. Mantén la interfaz plana alrededor.
Duraciones del brief
El hover, la pulsación y el foco se resuelven en 0.9s, que es lo que hace que la interfaz se sienta inmediata. El easing se especifica junto a la duración (0.9s), así que una reconstrucción no puede colar otra sensación sin avisar.
El reflujo de landing page
La maquetación estrecha está diseñada, no heredada. En cada ancho, la escala es fluida en lugar de escalonada, la sección se mantiene a 100vh y hay una rama de movimiento reducido, para que la jerarquía sobreviva al reflujo. No se elimina nada importante en anchos estrechos.
Las cifras detrás de landing page
Cada relación de esta página es un valor que puedes comprobar: secciones de 100vh, pasos de espaciado de 25px, transiciones de 0.9s y easing cubic-bezier(.22, 1.36, 1). Eso es lo que hace que Intelligence Layer se pueda reconstruir y no solo reproducir. Nada de este tipo de landing page depende de un valor por defecto.
Qué cambiar primero en Intelligence Layer
Cambia primero el contenido y revisa el marco después. Las cifras que hay que proteger mientras sustituyes el texto son estas: secciones de 100vh, pasos de espaciado de 25px, transiciones de 0.9s y easing cubic-bezier(.22, 1.36, 1). La composición es la parte reutilizable, y sobrevive a una marca distinta.
Preguntas frecuentes
¿Por qué la ficha nombra un único archivo HTML autocontenido?
Intelligence Layer 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.
¿El prompt de Intelligence Layer es una especificación cerrada o un punto de partida?
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 1462x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo quedarme con las transiciones de Intelligence Layer y cambiar los tiempos?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 0.9s usando cubic-bezier(.22, 1.36, 1). Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.
