Sobre esta plantilla
Aquí no hay una captura sino un caso de sección hero de Audio Showcase, con el brief original al lado. El titular dice “Press 04. Vernal woods”, y el orden de sección hero gira alrededor de esa línea. El color se limita a azul #216CD1 de base y gris #C7D5D5 para la tipografía y la página se compone en Helvetica, Arial. 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 0.7s y cubic-bezier(0.22, 1, 0.36, 1). Esta referencia es para una marca de lifestyle que quiere la primera pantalla resuelta antes de empezar a construir.
Pensado para
- Este diseño de sección hero está pensado para agencias que necesitan que el marco de 640x474 sobreviva a tres rondas de cambios del cliente.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 6.927 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de sección hero cuyo titular tiene que seguir siendo tan largo como el de Audio Showcase.
Qué incluye
- Enlaces antes de la acción. La marca ocupa el borde izquierdo y los enlaces corren a su derecha, todo compuesto en Helvetica, Arial, para que la barra pertenezca a la página de abajo y no a un sistema aparte. La acción es el único elemento de la fila que lleva relleno, y así los enlaces siguen leyéndose como texto.
- Tamaños fijados en el brief. La maquetación trabaja con valores absolutos y no con proporciones: pasos de espaciado de 20px, transiciones de 0.7s y easing cubic-bezier(0.22, 1, 0.36, 1). El tipo y la maquetación comparten los mismos pasos, así que nada se desvía cuando se sustituye uno de los dos.
- Prueba por encima del pliegue. Una franja compacta de cifras sostiene las afirmaciones que de otro modo pedirían un párrafo, lo que evita que la composición de sección hero se convierta en una lista de funciones. Las cifras se componen a un solo peso, así la fila no jerarquiza sus propias estadísticas. La captura de la referencia es de 640x474.
- Los enlaces colapsan a un ancho. Una serie corta de enlaces y una única acción se sitúan sobre sección hero, sostenidas en pasos de espaciado de 20px y transiciones de 0.7s, de manera que la barra nunca compite con la composición que tiene detrás.
Movimiento e interacción
Tiempos en milisegundos
Los tiempos son cortos y coherentes (0.7s usando cubic-bezier(0.22, 1, 0.36, 1)), 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 (0.7s), así que una reconstrucción no puede colar otra sensación sin avisar.
El lienzo es lo visual
La pieza central se renderiza en vivo (un lienzo WebGL) en vez de entregarse como imagen, así que la composición de 640x474 responde al viewport en lugar de quedarse detrás. La interfaz de alrededor se mantiene plana, lo que deja que el render cargue con la profundidad.
El acierto de sección hero
Audio Showcase funciona porque su jerarquía está decidida, no decorada. El brief fija las cifras (pasos de espaciado de 20px, transiciones de 0.7s y easing cubic-bezier(0.22, 1, 0.36, 1)), 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.
Cómo ordena Audio Showcase la primera lectura
La atención se dirige, no se deja al azar. La página lo dice sin rodeos: “Press 04. Vernal woods”. La secuencia pasa por navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas, y cada parada se mide contra pasos de espaciado de 20px y transiciones de 0.7s para que nada llegue desordenado. Quien busca lifestyle recibe la oferta antes que las opciones.
El reflujo de sección hero
Una maquetación estrecha diseñada exige más decisiones que un apretujón. El brief las paga: la navegación se pliega en un menú móvil y hay una rama de movimiento reducido, declarado y no descubierto al construir. Los dos estados están descritos en el mismo brief.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Audio Showcase?
El brief capturado ocupa 6.927 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.
¿Por qué la ficha nombra React y Tailwind CSS?
Audio Showcase 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 quedarme con las transiciones de Audio Showcase y cambiar los tiempos?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 0.7s usando cubic-bezier(0.22, 1, 0.36, 1). Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.
