Sobre esta plantilla
Lee Visual Hero como especificación de sección hero: los valores se escribieron antes de construir la página. El titular de la propia página dice “Forma's AI understands context, composition, and style like a creative director would”, y la composición se construye alrededor de esas palabras exactas. La página está compuesta en Instrument Serif, con los tamaños fijados en el brief. Se entrega como React y Tailwind CSS, y la captura se fija a 996x720 antes de escribir código. La página reduce el movimiento a un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 8.275 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Equipos que construyen este tipo de sección hero para un producto de IA o SaaS y quieren el detalle medido (pasos de espaciado de 50px) en lugar de una captura que copiar.
- Profesionales del marketing de producto que necesitan que cada sección hero siga leyéndose con 6,9s de vídeo en bucle detrás del texto.
- Pensado para responsables de contenidos que reescriben un diseño de sección hero cuyo titular tiene que seguir siendo tan largo como el de Visual Hero.
Qué incluye
- Una fila, sin desplegables. Una barra fina ocupa la parte superior de sección hero, con la marca a la izquierda y los enlaces compuestos en Instrument Serif, de modo que la composición se lee antes como contenido que como interfaz. Las etiquetas son lo bastante cortas para caber en una línea en cualquier ancho que cubra el brief. Si tu propia página tiene más secciones, agrúpalas en lugar de ensanchar la barra.
- Medido, no estimado a ojo. Los tamaños se leyeron del render en 996x720: pasos de espaciado de 50px. Los valores se citan del prompt capturado y no se deducen, por eso sobreviven a un nuevo render. Conserva los valores citados cuando traslades la página.
- Una barra sin nada de más. Una serie corta de enlaces y una única acción se sitúan sobre sección hero, sostenidas en pasos de espaciado de 50px, de manera que la barra nunca compite con la composición que tiene detrás.
- Números que llegan al montaje. El espaciado se cita igual (pasos de espaciado de 50px), no como una escala que crece sola.
Movimiento e interacción
Apariciones ligadas al avance
Parallax se ejecuta mientras la página se mueve, así que la composición tiene un estado de reposo definido. Son unas pocas líneas y no una librería de scroll, lo que mantiene ligera la reconstrucción.
El bucle hace el trabajo ambiente
El movimiento ambiente es un clip de 6,9s en 996x720, en bucle discreto detrás del texto y sin reaccionar 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.
Las cifras detrás de sección hero
Una reconstrucción suele empezar con una captura y una suposición. Aquí empieza con 8.275 caracteres de especificación: el marco, el espaciado y el movimiento están escritos antes de la primera línea de código. Nada de este tipo de sección hero depende de un valor por defecto.
Cómo ordena Visual Hero la primera lectura
La atención se canaliza en lugar de dispersarse. “Forma's AI understands context, composition, and style like a creative director would” hace ese trabajo desde el primer fotograma. El ojo aterriza primero en la línea de display, después en el texto de apoyo y por último en la acción. La prueba social, cuando aparece, se queda en una franja o una fila y no en un muro de testimonios. Esa secuencia es el diseño. Quien busca SaaS recibe la oferta antes que las opciones.
Qué gana un producto de IA o SaaS aquí
La contrapartida es la densidad: este tipo de sección hero dice menos en la primera pantalla de lo que diría una maquetación centrada en funciones. Lo que conserva es el orden de lectura, y navegación, la insignia de anuncio, la fila de cifras y el clip de fondo hacen el trabajo que una página más larga repartiría. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Visual Hero?
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 996x720. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo reconstruir este diseño de sección hero de Visual Hero con otro stack?
Visual Hero 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.
¿Puedo usar Visual Hero 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 996x720.
