Sobre esta plantilla
Neurolink Hero Section muestra una forma de construir este tipo de sección hero para una agencia o un estudio y publica las instrucciones que lo generaron. Abre con “Where Memories Live Forever” y le da el marco a esa línea en lugar de encogerla en una tarjeta. El esquema de color es azul intenso #0D1017 de base, blanco #FFFFFF para la tipografía y naranja brillante #FFB733 para los acentos, y la página está compuesta en Inter. La entrega es vanilla JS: una página, sin plugins y sin herramientas de build entre tú y el diseño. La página reduce el movimiento a un vídeo en bucle de fondo. Tómalo como el brief de sección hero para una agencia o un estudio que tiene que aguantar una reconstrucción, no solo un primer vistazo.
Pensado para
- Si le pasas el brief a un modelo en lugar de a un diseñador, toma como punto de partida sección hero y deja que el prompt recoja un marco de 1526x1080.
- Si hay que renunciar al movimiento, el diseño de sección hero sigue leyéndose porque secciones de 100vh y pasos de espaciado de 16px se encargan de la jerarquía.
- Profesionales del marketing de producto que necesitan que cada sección hero siga leyéndose con 3,9s de vídeo en bucle detrás del texto.
Qué incluye
- Los enlaces colapsan a un ancho. La barra reúne la marca, los enlaces de la sección y un botón en #FFB733, medida en secciones de 100vh y pasos de espaciado de 16px, así nunca acaba convertida en una segunda cabecera. Los enlaces se componen a un tamaño menor que la marca, y la acción en #FFB733 es el único elemento de la barra con peso.
- El fotograma de póster importa. Los medios son un solo clip de 3,9s recortado para cubrir el marco de 1526x1080, así que nunca aparecen bandas negras en ningún ancho. Exporta a 1526x1080 o más ancho y el recorte de cobertura sigue funcionando.
- Una tipografía, usada con disciplina. Con Inter haciendo el trabajo, los tamaños bajan de golpe del titular al texto de apoyo y el interletraje se cierra a medida que crece el tamaño, así que la jerarquía la lleva el tipo y no el color. El texto de interfaz se queda en una sola tipografía, por lo que la página nunca mezcla dos voces al mismo tamaño.
- Fila superior: marca, enlaces y acción. La navegación es una tira fina y no una banda: marca a la izquierda, enlaces hacia el centro-derecha y una acción en #FFB733, todo en la capa superior de sección hero y sin fondo propio.
Movimiento e interacción
Una superficie interactiva pequeña
Cada elemento interactivo hace una sola cosa (estados hover en los botones y los enlaces y no en todas las tarjetas), y eso mantiene los estados previsibles. La respuesta se limita a los controles, así que la composición se queda quieta a su alrededor. Menos estados, todos especificados.
El bucle hace el trabajo ambiente
Un clip de 3,9s es toda la capa ambiente: se reproduce detrás del texto, da la vuelta sin corte visible y nunca reacciona al puntero. El clip es lo bastante corto para girar sin costura visible, y eso importa más que su resolución.
Qué gana una agencia o un estudio aquí
Neurolink Hero Section es la referencia de sección hero para una agencia o un estudio, y responde al problema que ese público tiene de verdad. La página lo dice sin rodeos: “Where Memories Live Forever”. La paleta se mantiene disciplinada (azul intenso #0D1017 y naranja brillante #FFB733) y el tipo se compone en Inter, así que nada de la composición depende de una tendencia prestada. Cuando redactas el brief de un desarrollo, esta es la parte que merece copiarse: una sola promesa a tamaño de display y el detalle de apoyo por debajo. Neurolink Hero Section enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
El reflujo de sección hero
Donde una plantilla se pliega a una sola columna y confía en la suerte, este brief dice qué pasa (la escala es fluida en lugar de escalonada y la sección se mantiene a 100vh) y mantiene el orden intacto. La versión de móvil es una decisión, no un recurso de emergencia.
El orden detrás de sección hero
Donde una página de marketing apila pruebas por debajo y cruza los dedos, este tipo de sección hero pone navegación, el titular, la insignia de anuncio, la fila de cifras y el clip de fondo delante de quien lee y retiene el resto. Quien busca agencia recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Cómo está organizada esta ficha de Neurolink Hero Section?
Todo lo que se cita en la página procede del brief capturado de 10.336 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Cuánto ocupa el prompt que hay detrás de Neurolink Hero Section?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 1526x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo reconstruir este diseño de sección hero de Neurolink Hero Section con otro stack?
La referencia está construida en vanilla JS, pero la maqueta no depende de esa decisión: el espaciado, la escala tipográfica y los valores de movimiento pasan a lo que ya uses.
