Sobre esta plantilla
Aquí no hay una captura sino un caso de sección hero de Lumina, con el brief original al lado. La paleta es rojo #EC4899 de base y azul brillante #3B82F6 para los acentos. La ficha nombra el stack que produjo la página (un único componente) en lugar de esconderlo. El brief gasta su presupuesto de movimiento en un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 2.677 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Este diseño de sección hero sirve a equipos que tienen que justificar un marco de 2056x1478 ante alguien que no estaba en el kickoff.
- Pensado para agencias que facturan por ronda y quieren acordar pasos de espaciado de 70px antes de la primera.
- Retinta #3B82F6 primero y vuelve a comprobarlo contra #EC4899; después, toca la maquetación que hay debajo.
Qué incluye
- Enlaces antes de la acción. Marca, enlaces y la acción #3B82F6 comparten una línea base, y eso es lo que evita que una fila fina parezca accidental. Los enlaces se componen a un tamaño menor que la marca, y la acción en #3B82F6 es el único elemento de la barra con peso.
- Los tamaños están en el brief, no en una escala. El brief fija pasos de espaciado de 70px y deja el resto a la disposición, que es lo contrario de una escala que crece sola. No hay ningún valor intermedio inventado entre los citados; la lista de medidas es todo el sistema.
- Vídeo a marco completo, sin panel. El fondo es un único bucle de 6s a 2056x1478, recortado para cubrir y sin teñir. Todo lo demás flota encima, en una capa superior. El bucle es lo bastante corto (6s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Navegación contenida en una fila. Las etiquetas son lo bastante cortas para caber en una línea en cualquier ancho que cubra el brief. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
Movimiento e interacción
Un bucle, no una secuencia
El movimiento ambiente es un clip de 6s en 2056x1478, en bucle discreto detrás del texto y sin reaccionar al puntero. El clip es lo bastante corto para girar sin costura visible, y eso importa más que su resolución.
Una marquesina marca el ritmo
La tira horizontal es el elemento más llamativo después del titular: movimiento continuo, #3B82F6 en el elemento activo, y nunca le pide nada al lector. El elemento activo se marca con #3B82F6 y no con un cambio de tamaño.
Leer Lumina como especificación
Donde un moodboard deja la escala abierta, este brief la cierra: pasos de espaciado de 70px, con los valores de alrededor derivados de esa decisión. Nada de este tipo de sección hero depende de un valor por defecto.
Los tiempos detrás de sección hero
Un presupuesto de movimiento corto te cuesta dramatismo en el primer fotograma. A cambio ganas legibilidad, y significa que el movimiento se puede trasladar sin librería: estados hover y pulsados, un bucle de 6s y una marquesina en bucle. Nada se anima por gusto en este tipo de sección hero.
Qué cambiar primero en Lumina
Casi todo el mundo empieza por el color de acento. Empieza tú por la promesa: reescribe la línea de display y vuelve a probar azul brillante #3B82F6 contra tu propio material. Tu acento tiene que superar la misma prueba de contraste que el de la referencia.
Preguntas frecuentes
¿Necesito un único componente para recrear Lumina?
Lumina se construyó en un único componente, 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 ocupa el prompt que hay detrás de Lumina?
El brief capturado ocupa 2.677 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.
¿Cómo trato los medios de Lumina 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 2056x1478.
