Sobre esta plantilla
Intelligent Performance es un caso de landing page de SaaS: nace de un único brief escrito y esta página lo documenta. “Built for Intelligent Performance” es la línea que la maquetación está pensada para sostener. El esquema de color es neutro #ECECEB de base, #222222 para la tipografía y rojo #FF6796 para los acentos, y la página está compuesta en Inter. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1920x1418 antes de escribir código. La página reduce el movimiento a transiciones de 08s, cubic-bezier(.16,1.3,1) y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 26.839 caracteres es la parte que se traslada a tu propia página.
Pensado para
- 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 easing cubic-bezier(.16,1.3,1).
- Equipos de Studio que redactan el brief de un desarrollo y buscan en un único archivo HTML autocontenido algo concreto a lo que reaccionar.
- Los responsables de producto que tengan que presupuestar la implementación leerán un breakpoint de 767px como el alcance real del trabajo.
Qué incluye
- La barra sigue la cuadrícula. La fila superior reúne la marca, cuatro o cinco enlaces y una sola acción teñida de #FF6796, dimensionada para no destacar frente al resto de la página. Por debajo de 767px los enlaces se pliegan en una superposición a pantalla completa. Por debajo de 767px los enlaces colapsan en lugar de saltar a una segunda línea.
- Un solo medio lleva el tono. El clip dura 3,5s a 1920x1418 y se repite sin corte visible, por eso se lee como superficie y no como metraje. El bucle es lo bastante corto (3,5s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Las tarjetas estructuran. La cuadrícula es la estructura: paneles del mismo tamaño, compuestos en Inter, dispuestos para que el ojo avance en horizontal y no en vertical. Cada panel empareja una idea con un icono, así el recorrido visual se mantiene horizontal.
- Fluido donde hace falta. Los cambios de ancho se resuelven en el propio tipo: un clamp entre 16px y 14px lleva el titular del móvil al escritorio sin una composición móvil aparte. Como la escala está limitada, la línea display nunca salta entre breakpoints.
Movimiento e interacción
Tiempos cortos y parejos
El movimiento de los controles es corto y repetible: 08s en cada cambio de estado. El easing se especifica junto a la duración (08s), así que una reconstrucción no puede colar otra sensación sin avisar.
Textura en vez de relleno plano
Una capa de grano se asienta sobre neutro #ECECEB, lo que evita que las grandes áreas planas se lean como color liso sin añadir un degradado. La textura es estática, así que añade superficie sin añadir movimiento.
Cómo ordena Intelligent Performance la primera lectura
El brief ocupa 26.839 caracteres y nombra el orden de lectura sin rodeos: navegación, el titular, la fila de cifras, la cuadrícula de tarjetas y la lista de funciones, con secciones de 100vh y pasos de espaciado de 14px entre medias. Quien busca SaaS recibe la oferta antes que las opciones.
El reflujo de landing page
La composición de escritorio se resuelve contra 1920x1418, y la maquetación estrecha está diseñada y no heredada: la escala es fluida en lugar de escalonada, la maquetación cambia a 767px y la sección se mantiene a 100vh. El movimiento incluye una rama de movimiento reducido, y el medio lleva un fotograma de portada para que la página siga comunicando cuando no hay reproducción automática. La reproducción automática y el movimiento se tratan con honestidad, así que la página sigue comunicando cuando no están disponibles.
Los tiempos detrás de landing page
Una librería de animaciones predefinidas te daría más movimiento que esto. El brief pide menos: transiciones de 08s, un bucle de 3,5s y una aparición de línea enmascarada, y nada decorativo por encima. Nada se anima por gusto en este tipo de landing page.
Preguntas frecuentes
¿Cuánto de Intelligent Performance depende de un único archivo HTML autocontenido?
Intelligent Performance 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.
¿Qué me llevo cuando copio el brief de Intelligent Performance?
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 1920x1418. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cómo trato los medios de Intelligent Performance en un proyecto de cliente?
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 1920x1418.
