Sobre esta plantilla
Portiva Hero se capturó a 1466x1080 y se conserva como especificación, no como imagen de galería. El titular de la propia página dice “Less complexity, more impact in every project”, y la composición se construye alrededor de esas palabras exactas. El color se limita a turquesa #087573 de base, blanco #D1E5E7 para la tipografía y naranja #C25E2E para los acentos y la página se compone en Inter. El montaje es un único archivo HTML autocontenido; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. Todo el movimiento cabe en transiciones de 120ms y un vídeo en bucle de fondo. Esta referencia es para una agencia o un estudio que quiere la primera pantalla resuelta antes de empezar a construir.
Pensado para
- Los desarrolladores front-end que tengan que llevarlo a producción sin más ayuda usarán un único archivo HTML autocontenido como implementación de referencia.
- Pensado para un diseñador que se incorpora a un proyecto que ya está en producción con un único archivo HTML autocontenido y solo necesita sustituir los textos.
- Este diseño de sección hero sirve a diseñadores que tienen que entregar una implementación en un único archivo HTML autocontenido a un desarrollador y quieren el movimiento por escrito.
Qué incluye
- Los enlaces colapsan a un ancho. Una barra fina ocupa la parte superior de sección hero, 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. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. Los enlaces se componen a un tamaño menor que la marca, y la acción en #C25E2E es el único elemento de la barra con peso.
- Medido, no estimado a ojo. Los valores son la especificación: pasos de espaciado de 62px y transiciones de 120ms, capturados en 1466x1080 y no deducidos de una captura. El espaciado se cita en las mismas unidades que el tipo, de modo que ambos se comparan directamente.
- Navegación sin fondo propio. Marca, enlaces y la acción #C25E2E comparten una línea base, y eso es lo que evita que una fila fina parezca accidental.
- Medido contra el viewport. El espaciado se cita igual (pasos de espaciado de 62px y transiciones de 120ms), no como una escala que crece sola.
Movimiento e interacción
Rápido, pero deliberado
Los tiempos son cortos y coherentes (120ms), así que el hover y la pulsación se leen como un solo sistema y no como un conjunto de efectos sueltos. Los tiempos cortos son la razón de que la página se lea como diseñada; un valor por defecto lento desharía la composición. Mantén las duraciones cuando rehagas la piel de la página.
Movimiento ambiente sin librería de scroll
El movimiento ambiente viene del bucle de 4,5s en 1466x1080 y no de efectos de scroll, lo que mantiene la página tranquila y el texto legible. Como está silenciado, el bucle puede correr bajo el texto sin competir por el sonido ni por el foco.
Cómo ordena Portiva Hero la primera lectura
Compara la parte alta de esta página con una primera pantalla típica de agencia. Las dos llevan titular y acción; aquí navegación, la insignia de anuncio, la cuadrícula de tarjetas y el clip de fondo ocupan un orden fijo en vez de competir con el mismo peso. Quien busca agencia recibe la oferta antes que las opciones.
Las cifras detrás de sección hero
Cada relación de esta página es un valor que puedes comprobar: pasos de espaciado de 62px y transiciones de 120ms. Eso es lo que hace que Portiva Hero se pueda reconstruir y no solo reproducir. Nada de este tipo de sección hero depende de un valor por defecto.
El reflujo de sección hero
Aquí responsive significa que cambia la escala y no la secuencia: la navegación se pliega en un menú móvil, y el orden de lectura se queda donde lo puso el brief. La maquetación estrecha es una decisión y no un ajuste forzado, y la jerarquía sobrevive a ella.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Portiva Hero?
El brief capturado ocupa 2.639 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.
¿Puedo reconstruir este diseño de sección hero de Portiva Hero con otro stack?
Portiva Hero 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.
¿Cómo está organizada esta ficha de Portiva Hero?
Todo lo que se cita en la página procede del brief capturado de 2.639 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
