Sobre esta plantilla
Cyber Layer da a un producto de IA o SaaS una primera pantalla terminada y las cifras que la produjeron. La paleta se queda en rojo #B01617 de base y tono claro #E6E6E6 para la tipografía, y el tipo es Space Grotesk. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1460x1080 antes de escribir código. La página reduce el movimiento a transiciones de 1000ms, cubic-bezier(.16,1.3,1) y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 14.235 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Equipos que construyen su landing page de un producto de IA o SaaS y necesitan dejar constancia de easing cubic-bezier(.16,1.3,1) antes de que salga un presupuesto.
- Si le pasas el brief a un modelo en lugar de a un diseñador, toma como punto de partida landing page y deja que el prompt recoja un único archivo HTML autocontenido.
- Pensado para agencias que presentan propuestas de SaaS y necesitan incluir un breakpoint de 599px en la primera respuesta al cliente.
Qué incluye
- Una barra de navegación que no estorba. La barra es una fila de texto y una acción, medida en secciones de 100vh y pasos de espaciado de 82px, así que se lee como franja y no como banda. Por debajo de 599px los enlaces colapsan en lugar de saltar a una segunda línea.
- Medios sin superposición. Un único recurso de 7s sostiene toda la primera pantalla, y la página no tiene un segundo medio que mantener sincronizado. Exporta a 1460x1080 o más ancho y el recorte de cobertura sigue funcionando.
- Dos tipografías, papeles claros. La tipografía es Space Grotesk, y el brief asigna un papel a la fuente en lugar de mezclar por variedad. El peso, el interletraje y los pasos de tamaño están especificados, así que la jerarquía sobrevive a una sustitución. La fuente va con tamaños fijos, y eso es lo que mantiene relacionadas la línea display y el texto de interfaz. Una tipografía, papeles claros.
- Una barra sin nada de más. Una acción por barra. La captura de la referencia es de 1460x1080.
Movimiento e interacción
Una escena, no una imagen
Un lienzo WebGL hace el trabajo visual en el marco de 1460x1080, con la tipografía encima o al lado. La composición tiene que aguantar que el render falle, porque nada más llena ese espacio.
Todo el presupuesto de animación
El brief fija la transición en 1000ms, así que una reconstrucción no puede colar un valor por defecto más lento. Un mismo valor se reutiliza en todos los controles, así que sus tiempos no se separan. No publiques el valor por defecto del navegador.
El orden detrás de landing page
La contrapartida es la paciencia: la página retiene el detalle que una cuadrícula escaneable entregaría de inmediato. Lo que gana es una primera pantalla donde navegación, el titular, la fila de cifras, el clip de fondo y el pie de página no se pueden malinterpretar. Quien busca SaaS recibe la oferta antes que las opciones.
Qué cambiar primero en Cyber Layer
Si tu marca gasta una paleta más pesada, pruébala contra el marco antes de decidir. Como rojo #B01617 sostiene la página, un acento más oscuro necesita más contraste del que usa la referencia. Otra marca puede reutilizar el marco entero.
Las cifras detrás de landing page
El tipo es la primera cifra: secciones de 100vh y pasos de espaciado de 82px. El espaciado se deriva de ahí, y todo lo demás en la página se coloca en relación con esos dos valores. Nada de este tipo de landing page depende de un valor por defecto.
Preguntas frecuentes
¿Necesito un único archivo HTML autocontenido para recrear Cyber Layer?
Cyber 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 Cyber Layer es una especificación cerrada o un punto de partida?
El brief capturado ocupa 14.235 caracteres y describe la maqueta, la escala tipográfica, la paleta y las transiciones. Copiarlo te da ese texto; si lo mandas a Studio, la misma petición queda preparada con la página ya descrita.
¿Qué gobierna el movimiento en Cyber Layer?
Las entradas y los cambios de estado se quedan en 1000ms con la curva cubic-bezier(.16,1.3,1) con una rama de movimiento reducido en el brief. Los dispara un cambio de estado, no una biblioteca de scroll, y nunca retrasan el contenido.
