Sobre esta plantilla
Antes de rehacer cada sección hero para una empresa industrial, lee Interactive Discovery: la composición y la especificación que hay detrás están aquí. La paleta se queda en negro #000000 de base, blanco #FFFFFF para la tipografía y naranja brillante #E8702A para los acentos, y el tipo es Inter. La entrega es React y Tailwind CSS: una página, sin plugins y sin herramientas de build entre tú y el diseño. El movimiento se limita a transiciones de 1.1s y cubic-bezier(0.16,1,0.3,1). Cuando prepares el brief de cada sección hero de industria, parte de esta composición y sustituye el tema.
Pensado para
- Equipos externos que se hacen cargo de su sección hero y necesitan fijar un marco de 640x474 en el repositorio antes del primer commit.
- Este diseño de sección hero responde a quien construye y quiere saber qué controlan realmente secciones de 100vh y pasos de espaciado de 28px en la maquetación.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 6.894 caracteres como punto de partida.
Qué incluye
- Los enlaces colapsan a un ancho. Los enlaces van en una sola línea y a un único tamaño, y la acción #E8702A cierra la fila por la derecha, de modo que el ojo termina donde acaba la navegación. Los enlaces se componen a un tamaño menor que la marca, y la acción en #E8702A es el único elemento de la barra con peso.
- Valores que puedes comprobar. El brief fija secciones de 100vh, pasos de espaciado de 28px, transiciones de 1.1s y easing cubic-bezier(0.16,1,0.3,1) y deja el resto a la disposición, que es lo contrario de una escala que crece sola. Un remontaje que da esos números se parece a la referencia sin más ajustes. Mide antes de ajustar.
- Una familia, dos papeles. Las fuentes tienen papeles asignados y no se mezclan: Inter sostiene a la vez la línea display y la interfaz. Las cifras comparten la tipografía de interfaz, así estadísticas y etiquetas pertenecen al mismo sistema.
- Estructura en una sola pantalla. La composición está completa en 640x474: el texto, los medios y los controles están nombrados en el brief. La página es una sola composición a 640x474, y por eso se sostiene cuando cambia el texto.
Movimiento e interacción
Respeta reduced-motion
El brief incluye una rama de prefers-reduced-motion, así que la entrada se puede apagar sin perder la maquetación. Copia esa rama directamente en tu build. Con el movimiento reducido activado, la composición mantiene su estado final en lugar de cortarse a mitad de transición. La captura de la referencia es de 640x474.
Profundidad generada en tiempo real
Un lienzo WebGL es el único espectáculo de la página, y la interfaz está colocada para no competir con él. La escena responde al viewport en lugar de quedarse detrás como una imagen.
Los tiempos detrás de sección hero
La contrapartida es que aquí nada premia una segunda mirada por su animación. Lo que premia es el orden de lectura, con transiciones de 1.1s, estados hover y pulsados y un lienzo en vivo confirmando estados en lugar de decorarlos. Nada se anima por gusto en este tipo de sección hero.
Cómo ordena Interactive Discovery la primera lectura
Lee la primera pantalla de una pasada y la oferta ya está clara: navegación, la insignia de anuncio y la fila de cifras llegan en secuencia, con secciones de 100vh y pasos de espaciado de 28px de por medio en lugar de separadores decorativos. Quien busca industria recibe la oferta antes que las opciones.
Hacer tuyo este tipo de sección hero
La contrapartida es el reconocimiento. Si conservas demasiado de Interactive Discovery, la página se lee como de otro; si conservas las cifras y cambias el contenido, se lee como tuya. Si un elemento nuevo no ayuda a explicar la oferta ni el siguiente paso, su sitio está por debajo del pliegue.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Interactive Discovery?
El brief capturado ocupa 6.894 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.
¿Necesito React y Tailwind CSS para recrear Interactive Discovery?
Interactive Discovery 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.
¿Cuánto de Interactive Discovery está animado?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 1.1s usando cubic-bezier(0.16,1,0.3,1). Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.
