Sobre esta plantilla
Orbit Flora muestra una forma de construir este tipo de landing page para una marca de lifestyle y publica las instrucciones que lo generaron. La paleta es #161616 de base, #FFFFFF para la tipografía y magenta #FD86DB para los acentos, con la tipografía Inter. Se entrega como un único componente, y la captura se fija a 1454x1080 antes de escribir código. Todo el movimiento cabe en transiciones de 620ms, cubic-bezier(.16, 1.3, 1) y un vídeo en bucle de fondo. Es la referencia adecuada para este tipo de landing page en una marca de lifestyle, que tiene que transmitir intención desde la primera pantalla.
Pensado para
- Equipos de Studio que redactan el brief de un desarrollo y buscan en easing cubic-bezier(.16, 1.3, 1) algo concreto a lo que reaccionar.
- Toma prestada la estructura de landing page entera y sustituye los textos línea a línea cotejando con un único componente.
- Cita un breakpoint de 900px en la nota de traspaso para que la siguiente implementación no tenga que volver a deducir nada de la página.
Qué incluye
- La barra sigue la cuadrícula. La navegación es una tira fina y no una banda: marca a la izquierda, enlaces hacia el centro-derecha y una acción en #FD86DB, todo en la capa superior de landing page y sin fondo propio. Las etiquetas son lo bastante cortas para caber en una línea a 900px, y el elemento activo se marca con peso y no con una píldora. La barra son unos pocos elementos, así que se reconstruye sin librería de componentes.
- Un clip hace todo el trabajo. El vídeo ocupa la capa inferior de la composición de 1454x1080, con el texto dispuesto por encima y nada entre ambos. Un fotograma de póster a 1454x1080 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- Fluido donde hace falta. El tamaño del tipo se resuelve con un clamp entre 57px y 34px y no con pasos fijos, así la línea display se mantiene proporcionada entre breakpoints en lugar de dar saltos. El menú móvil forma parte del mismo brief, así que el estado plegado también está diseñado.
- La escala es el estilo. Con Inter haciendo el trabajo, los tamaños bajan de golpe del titular al texto de apoyo y el interletraje se cierra a medida que crece el tamaño, así que la jerarquía la lleva el tipo y no el color. Los pasos de tamaño son valores fijos, y por eso un cambio de tipografía puede conservar la misma jerarquía.
Movimiento e interacción
Renderizado, no ilustrado
Un lienzo WebGL da profundidad a la página, y la maquetación de alrededor se mantiene plana para que el render sea lo único que pide atención. El render es lo último en estar listo, así que la página tiene que funcionar en el estado previo a su carga. Mantén la interfaz plana alrededor.
Cambios de estado medidos
Aquí el movimiento se mide en milisegundos: 620ms usando cubic-bezier(.16, 1.3, 1). Ese es todo el presupuesto de animación, y se gasta en cambios de estado y no en una línea de tiempo de scroll. La misma duración se reutiliza en todos los controles, lo que mantiene las interacciones como un solo sistema.
Cómo ordena Orbit Flora la primera lectura
Léelo en orden: navegación, la insignia de anuncio y la fila de cifras. Cada elemento tiene una sola función, y el acento magenta #FD86DB se gasta solo en el elemento que debes pulsar. Quien busca lifestyle recibe la oferta antes que las opciones.
Hacer tuyo este tipo de landing page
Cambia primero el texto y el material, después el color y por último la maquetación. El marco de 1454x1080 y la escala de Inter son lo que sostiene la página, así que sustituye alrededor de ellos y no a través de ellos. Conserva el recorte del material: hace tanto trabajo como la tipografía.
Qué gana una marca de lifestyle aquí
Frente a un hero de plantilla, la diferencia está en lo que falta. No hay cuadrícula de tarjetas, ni carrusel, ni una segunda llamada a la acción: solo navegación, la insignia de anuncio y la fila de cifras, con secciones de 55vh y pasos de espaciado de 34px como referencia. Da a quien lee páginas de lifestyle el camino más corto y honesto hasta la oferta.
Preguntas frecuentes
¿Cuánto de Orbit Flora depende de un único componente?
Orbit Flora 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.
¿Cómo está organizada esta ficha de Orbit Flora?
Todo lo que se cita en la página procede del brief capturado de 9.402 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿El prompt de Orbit Flora 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 1454x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
