Sobre esta plantilla
Place Saver conserva el rastro de sus decisiones: el brief que hay detrás de landing page ocupa 8.226 caracteres. El titular de la propia página dice “The place for all your places”, y la composición se construye alrededor de esas palabras exactas. La paleta se queda en blanco #F4F4F4 de base y azul intenso #0C0C0E para la tipografía, y el tipo es Playfair Display. Se entrega como un único componente, y la captura se fija a 1480x1080 antes de escribir código. El movimiento se limita a transiciones de 0.9s, cubic-bezier(0.16, 1, 0.3, 1) y un vídeo en bucle de fondo, lo bastante discreto para que el texto siga mandando. Sirve de referencia cuando construyas este tipo de landing page para una marca de viajes y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Equipos de Studio que redactan el brief de un desarrollo y buscan en un único componente algo concreto a lo que reaccionar.
- Agencias que llevan su landing page de una marca de viajes a una propuesta y quieren citar esquinas de 48px y pasos de espaciado de 28px en la presentación para que el presupuesto siga en pie tras el kickoff.
- Equipos que rehacen su landing page de viajes a partir de la referencia de un competidor y quieren dejar claro un único componente antes de que nadie se comprometa con un framework.
Qué incluye
- Medido contra el viewport. El brief nombra las cifras: esquinas de 48px, pasos de espaciado de 28px, transiciones de 0.9s y easing cubic-bezier(0.16, 1, 0.3, 1). Por eso la composición se sostiene, porque no hay ningún paso de espaciado inventado entre el tipo y el marco. Un remontaje que da esos números se parece a la referencia sin más ajustes. Conserva los valores citados cuando traslades la página.
- Un solo medio lleva el tono. Un único clip silenciado y en bucle llena el marco a 1480x1080 y 5,6s, recortado para cubrir, con el texto apilado encima. El brief mantiene las superposiciones fuera del vídeo para que nada le reste color. Un fotograma de póster a 1480x1080 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona. Exporta a 1480x1080 o más ancho para que el recorte siga siendo honesto.
- El tipo fija la jerarquía. Aquí el tipo es el sistema de estilo: Playfair Display al tamaño display, la misma fuente en toda la interfaz y ningún segundo color de acento haciendo el trabajo. Las cifras comparten la tipografía de interfaz, así estadísticas y etiquetas pertenecen al mismo sistema.
- El brief nombra los pasos. El espaciado se cita igual (esquinas de 48px, pasos de espaciado de 28px, transiciones de 0.9s y easing cubic-bezier(0.16, 1, 0.3, 1)), no como una escala que crece sola.
Movimiento e interacción
El bucle hace el trabajo ambiente
Un clip de 5,6s es toda la capa ambiente: se reproduce detrás del texto, da la vuelta sin corte visible y nunca reacciona al puntero. El bucle se recorta a cubrir, lo que significa que la composición no depende de un tamaño de fotograma concreto.
Tiempos en milisegundos
El hover, la pulsación y el foco se resuelven en 0.9s, que es lo que hace que la interfaz se sienta inmediata. El easing se especifica junto a la duración (0.9s), así que una reconstrucción no puede colar otra sensación sin avisar. No publiques el valor por defecto del navegador.
Las cifras detrás de landing page
No se puede ajustar una composición a ojo cuando la reconstruyen dos personas. El brief elimina la discusión y lo deja por escrito una sola vez: esquinas de 48px, pasos de espaciado de 28px, transiciones de 0.9s y easing cubic-bezier(0.16, 1, 0.3, 1). Nada de este tipo de landing page depende de un valor por defecto.
El reflujo de landing page
Una escala fija de escritorio habría sido más fácil. El brief añade un clamp entre 66px y 28px, y eso es lo que mantiene proporcionada la línea de display entre anchos. El ancho cambia las medidas, no el recorrido de lectura.
Los tiempos detrás de landing page
El presupuesto de animación está declarado: transiciones de 0.9s y un bucle de 5,6s. Nada en este tipo de landing page se mueve sin un valor detrás. Nada se anima por gusto en este tipo de landing page.
Preguntas frecuentes
¿Necesito un único componente para recrear Place Saver?
Place Saver 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 Place Saver?
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 1480x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo usar Place Saver 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 1480x1080.
