Sobre esta plantilla
ClarionAI es un caso de landing page de SaaS: nace de un único brief escrito y esta página lo documenta. El titular dice “The intelligence layer \n for clear decisions”, y el orden de landing page gira alrededor de esa línea. Toda la página se construye sobre negro #000000 de base. Se entrega como React y Tailwind CSS, así que el conjunto de landing page se puede trasladar a un proyecto sin traspaso de diseño. El movimiento se limita a transiciones de 1000ms y un vídeo en bucle de fondo. Tómalo como el brief de landing page para un producto de IA o SaaS que tiene que aguantar una reconstrucción, no solo un primer vistazo.
Pensado para
- Si la referencia solo es un punto de partida, los diseñadores pueden conservar un marco de 1952x1440 y rehacer el resto del diseño de landing page.
- Este diseño de landing page responde a quien construye y quiere saber qué controlan realmente un tamaño de display fijo de 16px y pasos de espaciado de 20px en la maquetación.
- Pensado para un fundador en solitario que saca un único diseño de landing page para un producto de IA o SaaS y no tiene ningún sistema de diseño detrás.
Qué incluye
- Navegación sin fondo propio. Una serie corta de enlaces y una única acción se sitúan sobre landing page, sostenidas en un tamaño de display fijo de 16px y pasos de espaciado de 20px, de manera que la barra nunca compite con la composición que tiene detrás. Nada de la barra se anima al hacer scroll; está presente desde el primer fotograma y después se queda al margen. Prueba la barra sobre tus propios medios antes de darle un fondo.
- Medios detrás del texto. El vídeo ocupa la capa inferior de la composición de 1952x1440, con el texto dispuesto por encima y nada entre ambos. El bucle es lo bastante corto (18,4s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Una fila, sin desplegables. Los estados de foco y hover están definidos para cada enlace, no heredados del navegador. No des a la marca más espacio que el que pide su tipografía.
- Tamaños fijados en el brief. Toda medida del brief es un número que puedes volver a medir: un tamaño de display fijo de 16px, pasos de espaciado de 20px y transiciones de 1000ms. El brief declara valores y no proporciones, así la composición conserva sus relaciones cuando el texto cambia de longitud.
Movimiento e interacción
Tiempos cortos y parejos
El brief fija la transición en 1000ms, así que una reconstrucción no puede colar un valor por defecto más lento. La misma duración se reutiliza en todos los controles, lo que mantiene las interacciones como un solo sistema.
El bucle hace el trabajo ambiente
El movimiento ambiente viene del bucle de 18,4s en 1952x1440 y no de efectos de scroll, lo que mantiene la página tranquila y el texto legible. Un fotograma de portada hace de suplente cuando la reproducción automática está bloqueada, así que el movimiento suma y no es obligatorio.
Los tiempos detrás de landing page
Mantener el movimiento tan pequeño hace que la página se apoye en el tipo y en el marco. Si se quitara todo el movimiento (transiciones de 1000ms, un bucle de 18,4s y estados hover y pulsados), la composición seguiría en pie. Nada se anima por gusto en este tipo de landing page.
El reflujo de landing page
Casi todo el trabajo responsive se queda en esconder elementos. Aquí la maquetación cambia de forma: la navegación se pliega en un menú móvil, y no se elimina nada importante para que quepa la primera pantalla. La reproducción automática y el movimiento se tratan con honestidad, así que la página sigue comunicando cuando no están disponibles.
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 18,4s en 1952x1440. Esa colocación es lo que mantiene legible el texto. La composición es la parte reutilizable, y sobrevive a una marca distinta.
Preguntas frecuentes
¿Qué puedo hacer con el brief de ClarionAI una vez lo tengo?
Todo lo que se cita en la página procede del brief capturado de 6.807 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Qué contiene en realidad el brief que hay detrás de ClarionAI?
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 1952x1440. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo reconstruir este diseño de landing page de ClarionAI con otro stack?
ClarionAI 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.
