Sobre esta plantilla
Aquí no hay una captura sino un caso de sección hero de F1 Racing Hub, con el brief original al lado. La paleta es azul intenso #0A0E1C de base y naranja brillante #EDB40B para los acentos. La referencia está construida con React y Tailwind CSS, y las decisiones de maquetación se documentan aparte. El movimiento se limita a transiciones de 400ms, cubic-bezier(0.16,1,0.3,1) y un vídeo en bucle de fondo. Cuando prepares el brief de cada sección hero de lifestyle, parte de esta composición y sustituye el tema.
Pensado para
- Los desarrolladores que necesiten que el diseño de sección hero aguante una conexión lenta usarán 1470x1080 y la escala tipográfica como presupuesto de peso.
- Agencias que llevan su sección hero de una marca de lifestyle a una propuesta y quieren citar tipografía de 13px a 120px y secciones de 42vh en la presentación para que el presupuesto siga en pie tras el kickoff.
- Profesionales del marketing de producto que necesitan que cada sección hero siga leyéndose con 7s de vídeo en bucle detrás del texto.
Qué incluye
- Fila superior: marca, enlaces y acción. Marca, enlaces y la acción #EDB40B comparten una línea base, y eso es lo que evita que una fila fina parezca accidental. Las etiquetas son lo bastante cortas para caber en una línea a 768px, y el elemento activo se marca con peso y no con una píldora.
- Vídeo a marco completo, sin panel. El clip dura 7s a 1470x1080 y se repite sin corte visible, por eso se lee como superficie y no como metraje. Un fotograma de póster a 1470x1080 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- El comportamiento se define por ancho. El brief usa un clamp entre 13px y 120px para el titular, y eso es lo que evita que una línea larga se rompa de forma torpe. El menú móvil forma parte del mismo brief, así que el estado plegado también está diseñado.
- La navegación es fina a propósito. Por debajo de 768px los enlaces colapsan en lugar de saltar a una segunda línea.
Movimiento e interacción
Todo el presupuesto de animación
Aquí el movimiento se mide en milisegundos: 400ms usando cubic-bezier(0.16,1,0.3,1). Ese es todo el presupuesto de animación, y se gasta en cambios de estado y no en una línea de tiempo de scroll. Los valores son lo bastante cortos para leerse como respuesta y no como animación.
El bucle hace el trabajo ambiente
El clip de fondo se reproduce 7s en 1470x1080 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.
Hacer tuyo este tipo de sección hero
La composición es la parte reutilizable; el tema es tuyo. Cambia el titular, mantén la escala tipográfica (tipografía de 13px a 120px) y vuelve a probar el acento #EDB40B sobre tu propio material. Si un elemento nuevo no ayuda a explicar la oferta ni el siguiente paso, su sitio está por debajo del pliegue. Compón el texto nuevo al mismo tamaño de display y vuelve a comprobar el contraste antes de añadir nada.
Qué se mueve en F1 Racing Hub
Una librería de animaciones predefinidas te daría más movimiento que esto. El brief pide menos: transiciones de 400ms, un bucle de 7s y estados hover y pulsados, y nada decorativo por encima. Nada se anima por gusto en este tipo de sección hero.
Qué se sostiene para Lifestyle
F1 Racing Hub funciona porque su jerarquía está decidida, no decorada. El brief fija las cifras (tipografía de 13px a 120px, secciones de 42vh, pasos de espaciado de 20px y transiciones de 400ms), así que un texto nuevo cae dentro del marco en lugar de reabrirlo. Da a quien lee páginas de lifestyle el camino más corto y honesto hasta la oferta.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de F1 Racing Hub?
El brief capturado ocupa 10.448 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.
¿Cómo está organizada esta ficha de F1 Racing Hub?
Todo lo que se cita en la página procede del brief capturado de 10.448 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Puedo reconstruir este diseño de sección hero de F1 Racing Hub con otro stack?
F1 Racing Hub 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.
