Sobre esta plantilla
Fastshot resuelve el problema de cada landing page de un producto de IA o SaaS con un solo brief capturado. “Describe an app. We'll build it” es la línea que la maquetación está pensada para sostener. El color se limita a azul intenso #0A0D12 de base y índigo apagado #9C86CE para los acentos y la página se compone en Inter. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1920x1406 antes de escribir código. Todo el movimiento cabe en transiciones de 1.00s, cubic-bezier(.4,0.2,1) y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 15.844 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Equipos que construyen este tipo de landing page para un producto de IA o SaaS y quieren el detalle medido (secciones de 100vh y esquinas de 4px) en lugar de una captura que copiar.
- Toma prestada la estructura de landing page entera y sustituye los textos línea a línea cotejando con un único archivo HTML autocontenido.
- La página sirve a desarrolladores front-end que rehacen su landing page de un producto de IA o SaaS en un único archivo HTML autocontenido y buscan los números que hay detrás del aspecto.
Qué incluye
- La barra sigue la cuadrícula. La fila gasta el contraste en un solo punto: la acción #9C86CE, con la marca y los enlaces retenidos sobre el color del texto. Por debajo de 599px los enlaces se pliegan en una superposición a pantalla completa. Las etiquetas son lo bastante cortas para caber en una línea a 599px, y el elemento activo se marca con peso y no con una píldora.
- El vídeo es el fondo, no un panel. El marco de 1920x1406 lo llena un solo bucle que se reproduce detrás del texto y no pide controles. Exporta a 1920x1406 o más ancho y el recorte de cobertura sigue funcionando.
- El interletraje se cierra al crecer. El tipo es Inter en lo alto de la escala, con el texto de apoyo muy por debajo, así la jerarquía no necesita color para leerse. Sustituir la fuente es posible, pero las proporciones tienen que sobrevivir al cambio.
- Enlaces antes de la acción. Por debajo de 599px los enlaces colapsan en lugar de saltar a una segunda línea.
Movimiento e interacción
El tiempo va en el brief
El brief fija la transición en 1.00s, así que una reconstrucción no puede colar un valor por defecto más lento. El easing se especifica junto a la duración (1.00s), así que una reconstrucción no puede colar otra sensación sin avisar. Pasa las duraciones a tu implementación.
Un bucle, no una secuencia
El clip de fondo se reproduce 7,5s en 1920x1406 en bucle infinito, silenciado y en línea, así que la página sigue moviéndose mientras la atención del lector está en el texto. No hace falta ninguna librería de scroll, porque el único movimiento ambiente es el propio medio. Nada más en la página se anima de forma continua, así que el medio es lo único que pide atención.
El reflujo de landing page
Si tus breakpoints se eligieron para que todo cupiera y no para cambiar la maquetación, lee esta ficha: la escala es fluida en lugar de escalonada, la maquetación cambia a 599px y la sección se mantiene a 100vh en lugar de una lista de elementos escondidos. Un apretujón habría sido más barato y no aguantaría.
Por qué esta composición funciona para SaaS
Fastshot es la referencia de landing page para un producto de IA o SaaS, y responde al problema que ese público tiene de verdad. La página lo dice sin rodeos: “Describe an app. We'll build it”. La paleta se mantiene disciplinada (azul intenso #0A0D12 y índigo apagado #9C86CE) y el tipo se compone en Inter, así que nada de la composición depende de una tendencia prestada. Cuando redactas el brief de un desarrollo, esta es la parte que merece copiarse: una sola promesa a tamaño de display y el detalle de apoyo por debajo. Fastshot enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Las cifras detrás de landing page
Donde un moodboard deja la escala abierta, este brief la cierra: secciones de 100vh y pasos de espaciado de 18px, con los valores de alrededor derivados de esa decisión. Nada de este tipo de landing page depende de un valor por defecto.
Preguntas frecuentes
¿Por qué la ficha nombra un único archivo HTML autocontenido?
Fastshot 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 Fastshot?
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 1920x1406. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo usar Fastshot 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 1920x1406.
