Sobre esta plantilla
Stories in Light da a una agencia o un estudio una primera pantalla terminada y las cifras que la produjeron. La paleta es azul intenso #2B3342 de base y blanco #FFFFFF para la tipografía, con la tipografía Archivo. Se entrega como un único componente, y la captura se fija a 2502x1730 antes de escribir código. El movimiento se queda en transiciones de 0.4s y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 4.462 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Cita un único componente en la nota de traspaso para que la siguiente implementación no tenga que volver a deducir nada de la página.
- Pensado para agencias que presentan propuestas de agencia y necesitan incluir un breakpoint de 560px en la primera respuesta al cliente.
- Este diseño de sección hero sirve a diseñadores que tienen que entregar una implementación en un único componente a un desarrollador y quieren el movimiento por escrito.
Qué incluye
- Navegación contenida en una fila. Una serie corta de enlaces y una única acción se sitúan sobre sección hero, sostenidas en un tamaño de display fijo de 15px y secciones de 100vh, de manera que la barra nunca compite con la composición que tiene detrás. Por debajo de 560px los enlaces colapsan en lugar de saltar a una segunda línea.
- Un solo medio lleva el tono. El brief especifica el vídeo a 2502x1730 con un bucle de 13,3s, y cada elemento de texto se coloca contra ese marco. El bucle es lo bastante corto (13,3s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Una píldora para lo único nuevo. Una insignia, un mensaje: la píldora se sitúa sobre el titular en Archivo al paso más pequeño, y nada más compite por ese hueco. Está colocada de modo que el titular conserva el centro de la composición. Manténla sobre el titular, nunca al lado.
- El comportamiento se define por ancho. El brief usa un clamp entre 55px y 40px para el titular, y eso es lo que evita que una línea larga se rompa de forma torpe. Los controles siguen siendo lo bastante grandes para pulsarlos y el texto conserva su orden de lectura en cualquier ancho.
Movimiento e interacción
Tiempos en milisegundos
El brief fija la transición en 0.4s, así que una reconstrucción no puede colar un valor por defecto más lento. El easing se especifica junto a la duración (0.4s), así que una reconstrucción no puede colar otra sensación sin avisar.
Un bucle, no una secuencia
El movimiento ambiente viene del bucle de 13,3s en 2502x1730 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.
Hacer tuyo este tipo de sección hero
El brief nombra Archivo y la escala que la acompaña. Sustituye por una fuente con las mismas proporciones y la composición aguanta. Sustituir es más barato que componer, y de eso se trata.
Los tiempos detrás de sección hero
Aquí el movimiento es un conjunto de decisiones, no una librería: transiciones de 0.4s, un bucle de 13,3s y estados hover y pulsados, y nada se anima al hacer scroll. El resultado es una página que se siente escrita: duraciones cortas, una sola entrada y cambios de estado que confirman una acción en lugar de adornarla. Nada se anima por gusto en este tipo de sección hero.
Cómo ordena Stories in Light la primera lectura
Una maquetación centrada en funciones enumera lo que hace el producto; esta lleva a quien lee hacia una única decisión. El recorrido se ve en navegación, el titular, la insignia de anuncio y la fila de cifras y en cómo un tamaño de display fijo de 15px y secciones de 100vh marcan las distancias. Quien busca agencia recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Necesito un único componente para recrear Stories in Light?
Stories in Light 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.
¿Qué contiene en realidad el brief que hay detrás de Stories in Light?
El brief capturado ocupa 4.462 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.
¿De dónde sale el diseño de Stories in Light?
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 2502x1730.
