Sobre esta plantilla
Brightly muestra una forma de construir este tipo de sección hero para una agencia o un estudio y publica las instrucciones que lo generaron. “Manage projects effortlessly with smart tools, stay on track, meet deadlines, and keep your team productive” es la línea que la maquetación está pensada para sostener. La paleta es negro #050505 de base y naranja brillante #F97316 para los acentos. Se entrega como React y Tailwind CSS, y la captura se fija a 2046x1400 antes de escribir código. El movimiento se limita a transiciones de 3.5s y un vídeo en bucle de fondo. Es más útil cuando cada sección hero de Agencias y estudios tiene que sobrevivir a un cambio de texto sin rediseño.
Pensado para
- Profesionales del marketing de producto que necesitan que cada sección hero siga leyéndose con 13,7s de vídeo en bucle detrás del texto.
- Pensado para un fundador en solitario que saca un único diseño de sección hero para una agencia o un estudio y no tiene ningún sistema de diseño detrás.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 2.298 caracteres como punto de partida.
Qué incluye
- Navegación sin fondo propio. 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 #F97316, todo en la capa superior de sección hero y sin fondo propio. Los enlaces se componen a un tamaño menor que la marca, y la acción en #F97316 es el único elemento de la barra con peso.
- Valores que puedes comprobar. Tipo y espaciado salen aquí de una sola lista: pasos de espaciado de 24px y transiciones de 3.5s. El valor más pequeño y el más grande de esa lista marcan el rango en el que trabaja la composición.
- Un solo medio lleva el tono. El vídeo ocupa la capa inferior de la composición de 2046x1400, con el texto dispuesto por encima y nada entre ambos. El bucle es lo bastante corto (13,7s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Enlaces antes de la acción. Los estados de foco y hover están definidos para cada enlace, no heredados del navegador. Mantén la fila en una sola línea.
Movimiento e interacción
Un bucle, no una secuencia
El movimiento ambiente viene del bucle de 13,7s en 2046x1400 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.
Rápido, pero deliberado
Los tiempos son cortos y coherentes (3.5s), así que el hover y la pulsación se leen como un solo sistema y no como un conjunto de efectos sueltos. El easing se especifica junto a la duración (3.5s), así que una reconstrucción no puede colar otra sensación sin avisar.
El reflujo de sección hero
Una escala fija de escritorio habría sido más fácil. El brief añade un clamp entre 100px y 24px, y eso es lo que mantiene proporcionada la línea de display entre anchos. El ancho cambia las medidas, no el recorrido de lectura.
Qué se sostiene para Agencias y estudios
La mayoría de las páginas de agencia añade otra sección cuando la primera pantalla es floja. Esta hace lo contrario y quita opciones: navegación, la fila de cifras y el clip de fondo, en ese orden, y nada que repita la oferta. Da a quien lee páginas de agencia el camino más corto y honesto hasta la oferta.
Hacer tuyo este tipo de sección hero
Supón que solo tienes una tarde. Cambia el titular y la etiqueta de la acción, no toques pasos de espaciado de 24px y transiciones de 3.5s y tendrás una página que parece intencionada. Otra marca puede reutilizar el marco entero.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Brightly?
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 2046x1400. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Necesito React y Tailwind CSS para recrear Brightly?
Brightly 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.
¿Puedo usar Brightly en un proyecto de cliente?
El brief es una descripción, no una licencia para redistribuir los recursos de otra persona. Conserva la estructura y los números, sustituye los medios y las marcas, y acredita la procedencia si un cliente pregunta de dónde sale la maqueta. La captura de la referencia es de 2046x1400.
