Sobre esta plantilla
Rocket CTA se capturó a 640x468 y se conserva como especificación, no como imagen de galería. La paleta es azul intenso #14191E de base, con la tipografía Inter. La ficha nombra el stack que produjo la página (React y Tailwind CSS) en lugar de esconderlo. Todo el movimiento cabe en transiciones de 300ms. Toma prestada la estructura, no el tema: las cifras y el orden de bloque de CTA pasan a tu marca sin cambios.
Pensado para
- Los responsables de estudio que llevan varios proyectos a la vez usarán este diseño de bloque de CTA como patrón que copian las demás páginas.
- Pensado para responsables de producto que necesitan acotar el diseño de bloque de CTA a un sprint y no añadir material nuevo.
- Pensado para un fundador en solitario que saca un único diseño de bloque de CTA para un producto de IA o SaaS y no tiene ningún sistema de diseño detrás.
Qué incluye
- Fila superior: marca, enlaces y acción. Una serie corta de enlaces y una única acción se sitúan sobre bloque de CTA, sostenidas en pasos de espaciado de 10px y transiciones de 300ms, de manera que la barra nunca compite con la composición que tiene detrás. La acción lleva el acento mientras los enlaces se quedan en el color del texto, así la jerarquía de la barra coincide con la de la página que tiene debajo.
- Pesos nombrados por papel. La línea display se compone en Inter a un tamaño que fija el brief, lo que convierte el titular en un elemento de composición y no en un párrafo. La fuente va con tamaños fijos, y eso es lo que mantiene relacionadas la línea display y el texto de interfaz. Conserva los pasos, cambia la tipografía.
- La composición es el contenido. La composición está completa en 640x468: el texto, los medios y los controles están nombrados en el brief. La página es una sola composición a 640x468, y por eso se sostiene cuando cambia el texto. Conserva el marco; cambia el tema.
- Los enlaces colapsan a un ancho. No des a la marca más espacio que el que pide su tipografía. La captura de la referencia es de 640x468.
Movimiento e interacción
La página responde al scroll
Parallax es el único comportamiento de scroll de la página, así que el efecto tiene un lugar definido en la composición. La maquetación estática de debajo no cambia, lo que mantiene la composición legible con el efecto desactivado. Pruébalo con el movimiento reducido activado.
Duraciones cortas y nombradas
Las transiciones están fijadas en 300ms, y ese es el tiempo que deben cumplir los controles. Si cambia el easing, la duración tiene que revisarse con él.
Leer Rocket CTA como especificación
Donde un moodboard deja la escala abierta, este brief la cierra: pasos de espaciado de 10px y transiciones de 300ms, con los valores de alrededor derivados de esa decisión. Nada de este tipo de bloque de CTA depende de un valor por defecto.
El brief de SaaS se sostiene
La mayoría de las páginas de SaaS añade otra sección cuando la primera pantalla es floja. Esta hace lo contrario y quita opciones: navegación, el titular, la insignia de anuncio, la fila de cifras y el clip de fondo, en ese orden, y nada que repita la oferta. Rocket CTA enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Los tiempos detrás de bloque de CTA
Aquí el movimiento es un conjunto de decisiones, no una librería: transiciones de 300ms, capas con parallax y estados hover y pulsados, y nada se anima al hacer scroll. El resultado es una página que se siente escrita: duraciones cortas, una sola entrada y cambios de estado que confirman una acción en lugar de adornarla. Nada se anima por gusto en este tipo de bloque de CTA.
Preguntas frecuentes
¿El prompt de Rocket CTA es una especificación cerrada o un punto de partida?
El brief capturado ocupa 11.622 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.
¿Por qué no se imprime aquí el prompt de Rocket CTA?
Todo lo que se cita en la página procede del brief capturado de 11.622 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Necesito React y Tailwind CSS para recrear Rocket CTA?
Rocket CTA 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.
