Sobre esta plantilla
Aetheris Voyage conserva el rastro de sus decisiones: el brief que hay detrás de sección hero ocupa 10.190 caracteres. “Venture Past Our Sky Across the Universe” es la línea que la maquetación está pensada para sostener. El color se limita a negro #181719 de base y naranja apagado #ECD9C1 para la tipografía y la página se compone en Instrument Serif. Se entrega como React y Tailwind CSS, y la captura se fija a 800x570 antes de escribir código. El movimiento se limita a transiciones de 100ms y un vídeo en bucle de fondo. Tómalo como el brief de sección hero para una marca de viajes que tiene que aguantar una reconstrucción, no solo un primer vistazo.
Pensado para
- Profesionales del marketing de producto que necesitan que cada sección hero siga leyéndose con 8,8s de vídeo en bucle detrás del texto.
- 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 Aetheris Voyage.
- Fundadores que lanzan su sección hero de una marca de viajes y necesitan decidir Instrument Serif y cerrar la escala tipográfica antes de que un desarrollador empiece.
Qué incluye
- Fila superior, una acción. Una serie corta de enlaces y una única acción se sitúan sobre sección hero, sostenidas en pasos de espaciado de 10px y transiciones de 100ms, de manera que la barra nunca compite con la composición que tiene detrás. Los estados hover y de foco están definidos para cada enlace, y eso es lo que evita que una barra fina parezca inerte.
- El bucle es el fondo. El brief especifica el vídeo a 800x570 con un bucle de 8,8s, y cada elemento de texto se coloca contra ese marco. El bucle es lo bastante corto (8,8s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Cada tipo con una función. Aquí el tipo es el sistema de estilo: Instrument Serif al tamaño display, la misma fuente en toda la interfaz y ningún segundo color de acento haciendo el trabajo. Cambiar de tipografía es seguro mientras los tamaños y los pesos se queden donde los puso el brief. Una sola familia con papeles claros gana a dos que compiten.
- Navegación contenida en una fila. La navegación es una sola fila, sin un segundo nivel debajo. Mantén el número de enlaces en cuatro o cinco; la fila está dimensionada para eso.
Movimiento e interacción
Movimiento ambiente sin librería de scroll
Un clip de 8,8s 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.
Tiempos en milisegundos
Una sola duración cubre las interacciones (100ms), y eso hace que hover y pulsación se lean como un mismo sistema. Nada espera a una posición de scroll, así que la página responde en cuanto la tocas. Aplica el tiempo exacto a la respuesta.
Cómo ordena Aetheris Voyage la primera lectura
Una página así suele enterrar la acción bajo una cuadrícula de funciones. Esta coloca navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas en una secuencia fija, con la acción dentro de la primera pantalla y no después de tres pantallas de scroll. Quien busca viajes recibe la oferta antes que las opciones.
El reflujo de sección hero
Una escala fluida y otra a saltos se parecen en pantalla ancha. Estrecha el viewport y aparece la diferencia: un clamp entre 11px y 10px frente a saltos fijos. La maquetación estrecha es una decisión y no un ajuste forzado, y la jerarquía sobrevive a ella.
Qué cambiar primero en Aetheris Voyage
Supón que solo tienes una tarde. Cambia el titular y la etiqueta de la acción, no toques pasos de espaciado de 10px y transiciones de 100ms y tendrás una página que parece intencionada. Reescribe el texto y el material antes de recolorear nada.
Preguntas frecuentes
¿El prompt de Aetheris Voyage es una especificación cerrada o un punto de partida?
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 800x570. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Necesito React y Tailwind CSS para recrear Aetheris Voyage?
Aetheris Voyage 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.
¿Cómo trato los medios de Aetheris Voyage 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 800x570.
