Sobre esta plantilla
Lee Organic Odyssey como especificación de sección hero: los valores se escribieron antes de construir la página. El titular de la propia página dice “An odyssey through delicate living forms”, y la composición se construye alrededor de esas palabras exactas. La paleta se queda en negro #000000 de base, y el tipo es Geist. La referencia está construida con React y Tailwind CSS, y las decisiones de maquetación se documentan aparte. El movimiento se queda en transiciones de 300ms. Tenlo abierto mientras escribes: el brief de 4.802 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Este diseño de sección hero está pensado para agencias que necesitan que el marco de 640x470 sobreviva a tres rondas de cambios del cliente.
- 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 Organic Odyssey.
- Los responsables de contenidos que tengan que encajar un titular más largo usarán el número de líneas de Geist como límite, no el de caracteres.
Qué incluye
- Enlaces antes de la acción. La barra se superpone sobre sección hero en lugar de empujarla hacia abajo, así la composición conserva toda la altura de la primera pantalla. El menú móvil forma parte del brief, de modo que el estado colapsado está diseñado y no improvisado. La captura de la referencia es de 640x470.
- La escala baja de golpe. El tipo es Geist en lo alto de la escala, con el texto de apoyo muy por debajo, así la jerarquía no necesita color para leerse. El texto de interfaz se queda en una sola tipografía, por lo que la página nunca mezcla dos voces al mismo tamaño.
- 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 20px y transiciones de 300ms, de manera que la barra nunca compite con la composición que tiene detrás.
- El brief nombra los pasos. Los tamaños se leyeron del render en 640x470: pasos de espaciado de 20px y transiciones de 300ms. Los valores se citan del prompt capturado y no se deducen, por eso sobreviven a un nuevo render. Traslada los valores junto con la maquetación.
Movimiento e interacción
Una duración para los controles
Las transiciones están fijadas en 300ms, y ese es el tiempo que deben cumplir los controles. Las duraciones son tan cortas que la respuesta se lee como reacción y no como animación. Una duración por comportamiento.
Movimiento que no estorba
Esta se entrega como composición estática en 640x470, así que la jerarquía tiene que funcionar sin movimiento, y funciona. Solo se mueven los elementos que responden al puntero.
El reflujo de sección hero
Casi todo el trabajo responsive se queda en esconder elementos. Aquí la maquetación cambia de forma: la navegación se pliega en un menú móvil, y no se elimina nada importante para que quepa la primera pantalla. La escala cambia con el viewport; la secuencia, no.
El orden detrás de sección hero
Si pones tu propio texto en este tipo de sección hero, la secuencia se mantiene, porque los elementos no son intercambiables: navegación, el titular, la fila de cifras y el clip de fondo cumplen una función propia. Quien busca SaaS recibe la oferta antes que las opciones.
Leer Organic Odyssey como especificación
El brief es una especificación. Enuncia pasos de espaciado de 20px y transiciones de 300ms y nombra el marco del material en 640x470 antes de diseñar nada alrededor. Nada de este tipo de sección hero depende de un valor por defecto.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Organic Odyssey?
El brief capturado ocupa 4.802 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?
Organic Odyssey 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.
¿Qué gobierna el movimiento en Organic Odyssey?
Las entradas y los cambios de estado se quedan en 300ms. Los dispara un cambio de estado, no una biblioteca de scroll, y nunca retrasan el contenido.
