Sobre esta plantilla
Lee Scalable como especificación de sección hero: los valores se escribieron antes de construir la página. Abre con “New Feature: Zapier Integration” y le da el marco a esa línea en lugar de encogerla en una tarjeta. La paleta es índigo intenso #2B1F36 de base. El montaje es React y Tailwind CSS; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. El movimiento se limita a un vídeo en bucle de fondo. Úsalo cuando tu sección hero necesite un orden decidido antes de añadir secciones nuevas.
Pensado para
- Los responsables de estudio que llevan varios proyectos a la vez usarán este diseño de sección hero como patrón que copian las demás páginas.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 8.462 caracteres como punto de partida.
- Pensado para un diseñador que se incorpora a un proyecto que ya está en producción con React y Tailwind CSS y solo necesita sustituir los textos.
Qué incluye
- Fila superior, una acción. La barra es una fila de texto y una acción, medida en un marco de 1920x1592, así que se lee como franja y no como banda. Los estados hover y de foco están definidos para cada enlace, y eso es lo que evita que una barra fina parezca inerte.
- Una fila, sin desplegables. La marca se trata como tipografía y no como un logotipo compuesto, lo que mantiene la fila superior en una sola línea base. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
- Medios detrás del texto. La composición se construye encima del clip de 1920x1592 y no a su lado, de modo que los medios nunca reciben un panel ni un borde. Exporta a 1920x1592 o más ancho y el recorte de cobertura sigue funcionando.
- La composición es el contenido. La composición de sección hero está construida para que el texto llegue antes que nada: el tipo lleva la jerarquía, el marco de 1920x1592 sujeta la composición y los valores de apoyo se mantienen callados. La página es una sola composición a 1920x1592, y por eso se sostiene cuando cambia el texto.
Movimiento e interacción
El bucle hace el trabajo ambiente
Un clip de 10,5s 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.
Movimiento que no estorba
Esta se entrega como composición estática en 1920x1592, así que la jerarquía tiene que funcionar sin movimiento, y funciona. Solo se mueven los elementos que responden al puntero.
Qué cambiar primero en Scalable
Coloca el texto nuevo al tamaño de display que nombra el brief (un marco de 1920x1592) y el resto de la escala se ajusta sin rediseñar nada. Conserva el marco y la escala; el tema es la parte que debe cambiar.
Cómo ordena Scalable la primera lectura
Podrías reordenar estos bloques y la página seguiría cargando. Pero dejaría de leerse como un argumento: navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas son una secuencia, y un marco de 1920x1592 solo funcionan en ese orden. Quien busca SaaS recibe la oferta antes que las opciones.
Qué se mueve en Scalable
La contrapartida es que aquí nada premia una segunda mirada por su animación. Lo que premia es el orden de lectura, con un elemento fijo y un bucle de 10,5s confirmando estados en lugar de decorarlos. Nada se anima por gusto en este tipo de sección hero.
Preguntas frecuentes
¿De dónde sale el diseño de Scalable?
El prompt lo publicó sceneai.art de forma pública, y la vista previa de esta página es la captura original. Tómalo como referencia de estructura y movimiento, revisa las condiciones del sitio de origen y rehaz la composición con tu propio texto, tus medios y tu paleta antes de publicarla.
¿Puedo quedarme con las transiciones de Scalable y cambiar los tiempos?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de menos de un segundo. Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene. La captura de la referencia es de 1920x1592.
¿Puedo cambiar los medios de Scalable por los míos?
Lo que el brief deja fijado es el marco (1920x1592) y el recorte, no el archivo en sí. Sustituye el archivo, mantén la posición y el texto de encima seguirá leyéndose.
