Sobre esta plantilla
Forecast Center da a un producto de IA o SaaS una primera pantalla terminada y las cifras que la produjeron. La paleta se queda en azul intenso #04121B de base y #FFFFFF para la tipografía, y el tipo es Inter. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1466x1080 antes de escribir código. El movimiento se queda en transiciones de 2.55s, cubic-bezier(.16,1.3,1) y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 11.253 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Los responsables de producto que tengan que presupuestar la implementación leerán easing cubic-bezier(.16,1.3,1) como el alcance real del trabajo.
- Equipos que rehacen su landing page de SaaS a partir de la referencia de un competidor y quieren dejar claro un único archivo HTML autocontenido antes de que nadie se comprometa con un framework.
- Si la maquetación parte de un único archivo HTML autocontenido, llévate primero secciones de 100vh y pasos de espaciado de 14px y no toques la paleta hasta que se asiente la cuadrícula.
Qué incluye
- Fila superior, una acción. Una barra fina ocupa la parte superior de landing page, con la marca a la izquierda y los enlaces compuestos en Inter, de modo que la composición se lee antes como contenido que como interfaz. La sección activa se marca con peso, no con una píldora ni con un subrayado.
- Una escala para tipo y marco. La maquetación trabaja con valores absolutos y no con proporciones: secciones de 100vh, pasos de espaciado de 14px, transiciones de 2.55s y easing cubic-bezier(.16,1.3,1). El brief declara valores y no proporciones, así la composición conserva sus relaciones cuando el texto cambia de longitud.
- Medios sin superposición. El marco de 1466x1080 lo llena un solo bucle que se reproduce detrás del texto y no pide controles. El bucle es lo bastante corto (5,3s) para que el ojo lo lea como textura y no como una línea de tiempo. Exporta a 1466x1080 o más ancho para que el recorte siga siendo honesto.
- Enlaces antes de la 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 1466x1080.
Movimiento e interacción
Movimiento ambiente sin librería de scroll
Un clip de 5,3s es toda la capa ambiente: se reproduce detrás del texto, da la vuelta sin corte visible y nunca reacciona al puntero. Un fotograma de portada hace de suplente cuando la reproducción automática está bloqueada, así que el movimiento suma y no es obligatorio. Graba o exporta a 1466x1080 o más ancho.
Respeta reduced-motion
La capa de movimiento tiene un interruptor. Con prefers-reduced-motion, la entrada y el bucle se descarta y todo lo demás se queda donde está. Con el movimiento reducido activado, la composición mantiene su estado final en lugar de cortarse a mitad de transición. Conserva la rama de movimiento reducido cuando portes la página.
Cómo ordena Forecast Center la primera lectura
Donde una página de marketing apila pruebas por debajo y cruza los dedos, este tipo de landing page pone navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas delante de quien lee y retiene el resto. Quien busca SaaS recibe la oferta antes que las opciones.
El reflujo de landing page
En ancho, la composición es densa; en estrecho, la sección se mantiene a 100vh y hay una rama de movimiento reducido. Los dos estados están descritos en el brief. El ancho cambia las medidas, no el recorrido de lectura.
Las cifras detrás de landing page
Compara esto con una plantilla que llama preferencia a su espaciado. Aquí los mismos valores tienen nombre (secciones de 100vh, pasos de espaciado de 14px, transiciones de 2.55s y easing cubic-bezier(.16,1.3,1)), así que un cambio o los respeta o rompe la composición a la vista. Nada de este tipo de landing page depende de un valor por defecto.
Preguntas frecuentes
¿Necesito un único archivo HTML autocontenido para recrear Forecast Center?
Forecast Center 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.
¿Cuánto ocupa el prompt que hay detrás de Forecast Center?
El brief capturado ocupa 11.253 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 Forecast Center?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 2.55s usando cubic-bezier(.16,1.3,1). Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.
