Sobre esta plantilla
CoreOS es una referencia de trabajo para una empresa industrial: el desglose de sección hero, con la maquetación medida y lista para recrear. Toda la página se construye sobre negro #2E3233 de base. Se entrega como React y Tailwind CSS, y la captura se fija a 1468x1080 antes de escribir código. El movimiento se queda en transiciones de 0.5s y un vídeo en bucle de fondo. Es más útil cuando cada sección hero de Industria tiene que sobrevivir a un cambio de texto sin rediseño.
Pensado para
- Pensado para agencias que facturan por ronda y quieren acordar un tamaño de display fijo de 62px y pasos de espaciado de 14px antes de la primera.
- Este diseño de sección hero sirve a fundadores que necesitan una pantalla de prueba de que los textos de industria aguantan 4,9s de vídeo en bucle.
- Pensado para un fundador en solitario que saca un único diseño de sección hero para una empresa industrial y no tiene ningún sistema de diseño detrás.
Qué incluye
- La navegación es fina a propósito. La barra se superpone sobre sección hero en lugar de empujarla hacia abajo, así la composición conserva toda la altura de la primera pantalla. Nada de la barra se anima al hacer scroll; está presente desde el primer fotograma y después se queda al margen. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
- Valores que puedes comprobar. La maquetación se resuelve con valores fijos (un tamaño de display fijo de 62px, pasos de espaciado de 14px y transiciones de 0.5s), y eso es lo que mantiene compuesta la primera pantalla a cualquier ancho. Como los valores son fijos, una sustitución cambia el aspecto sin cambiar el ritmo. Traslada los valores junto con la maquetación.
- El bucle es el fondo. El fondo es un único bucle de 4,9s a 1468x1080, recortado para cubrir y sin teñir. Todo lo demás flota encima, en una capa superior. Exporta a 1468x1080 o más ancho y el recorte de cobertura sigue funcionando. Exporta a 1468x1080 o más ancho para que el recorte siga siendo honesto.
- Fila superior, una acción. La barra es una fila de texto y una acción, medida en un tamaño de display fijo de 62px y pasos de espaciado de 14px, así que se lee como franja y no como banda. 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.
Movimiento e interacción
Un bucle, no una secuencia
El movimiento ambiente viene del bucle de 4,9s en 1468x1080 y no de efectos de scroll, lo que mantiene la página tranquila y el texto legible. El bucle se recorta a cubrir, lo que significa que la composición no depende de un tamaño de fotograma concreto.
Tiempos cortos y parejos
Las transiciones están fijadas en 0.5s, y ese es el tiempo que deben cumplir los controles. El easing se especifica junto a la duración (0.5s), así que una reconstrucción no puede colar otra sensación sin avisar.
Hacer tuyo este tipo de sección hero
Coloca el texto nuevo al tamaño de display que nombra el brief (un tamaño de display fijo de 62px y pasos de espaciado de 14px) y el resto de la escala se ajusta sin rediseñar nada. Otra marca puede reutilizar el marco entero.
El orden detrás de sección hero
Si pones tu propio texto en este tipo de sección hero, la secuencia se mantiene, porque los elementos no son intercambiables: navegación y el clip de fondo cumplen una función propia. Quien busca industria recibe la oferta antes que las opciones.
Las cifras detrás de sección hero
Esto es lo que hace reutilizable la referencia: un tamaño de display fijo de 62px, pasos de espaciado de 14px y transiciones de 0.5s. Nada queda en un valor por defecto, así que una sustitución que conserve esos números conserva la composición. Nada de este tipo de sección hero depende de un valor por defecto.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de CoreOS?
El brief capturado ocupa 5.790 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.
¿Qué puedo hacer con el brief de CoreOS una vez lo tengo?
Todo lo que se cita en la página procede del brief capturado de 5.790 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Cuánto de CoreOS depende de React y Tailwind CSS?
CoreOS 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.
