Sobre esta plantilla
Vinyl es una referencia de trabajo para una marca de lifestyle: el desglose de landing page, con la maquetación medida y lista para recrear. El color se limita a celeste #DBE6EE de base y #0B0B0C para la tipografía y la página se compone en Instrument Serif. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1920x1420 antes de escribir código. Todo el movimiento cabe en transiciones de 1.2s, cubic-bezier(.22,1.36,1) y un vídeo en bucle de fondo. Tómalo como el brief de landing page para una marca de lifestyle que tiene que aguantar una reconstrucción, no solo un primer vistazo.
Pensado para
- Si le pasas el brief a un modelo en lugar de a un diseñador, toma como punto de partida landing page y deja que el prompt recoja easing cubic-bezier(.22,1.36,1).
- Si la referencia solo es un punto de partida, los diseñadores pueden conservar un único archivo HTML autocontenido y rehacer el resto del diseño de landing page.
- Este diseño de landing page sirve a equipos que tienen que justificar un breakpoint de 380px ante alguien que no estaba en el kickoff.
Qué incluye
- Navegación sin fondo propio. Una serie corta de enlaces y una única acción se sitúan sobre landing page, sostenidas en secciones de 100vh y pasos de espaciado de 22px, de manera que la barra nunca compite con la composición que tiene detrás. Por debajo de 380px los enlaces colapsan en lugar de saltar a una segunda línea.
- Clip sin márgenes tras el tipo. El fondo es un único bucle de 6,6s a 1920x1420, recortado para cubrir y sin teñir. Todo lo demás flota encima, en una capa superior. Exporta a 1920x1420 o más ancho y el recorte de cobertura sigue funcionando.
- El tamaño display lleva la voz. La línea display se compone en Instrument Serif a un tamaño que fija el brief, lo que convierte el titular en un elemento de composición y no en un párrafo. 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.
- La navegación es fina a propósito. La barra son unos pocos elementos, así que se reconstruye sin librería de componentes. La captura de la referencia es de 1920x1420.
Movimiento e interacción
Tiempos cortos y parejos
Los controles se resuelven en 1.2s, lo bastante rápido para que la página responda al tocarla y no después. El easing se especifica junto a la duración (1.2s), así que una reconstrucción no puede colar otra sensación sin avisar. Una duración por comportamiento.
Un bucle, no una secuencia
El movimiento ambiente es un clip de 6,6s en 1920x1420, en bucle discreto detrás del texto y sin reaccionar al puntero. Como está silenciado, el bucle puede correr bajo el texto sin competir por el sonido ni por el foco.
Las cifras detrás de landing page
Si esto se lo vas a pasar a quien programa, el brief es la pieza útil. Enuncia secciones de 100vh, pasos de espaciado de 22px, transiciones de 1.2s, easing cubic-bezier(.22,1.36,1) y un breakpoint de 380px y no deja nada a la interpretación. Nada de este tipo de landing page depende de un valor por defecto.
Qué se mueve en Vinyl
Un paquete de animaciones predefinidas habría sido más rápido de publicar. El brief especifica transiciones de 1.2s, un bucle de 6,6s y una aparición de línea enmascarada, y por eso la página se lee como algo compuesto y no como algo montado. Nada se anima por gusto en este tipo de landing page.
Hacer tuyo este tipo de landing page
Coloca el texto nuevo al tamaño de display que nombra el brief (secciones de 100vh y pasos de espaciado de 22px) y el resto de la escala se ajusta sin rediseñar nada. Otra marca puede reutilizar el marco entero.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Vinyl?
El brief capturado ocupa 18.878 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.
¿Cuánto de Vinyl depende de un único archivo HTML autocontenido?
Vinyl se construyó en un único archivo HTML autocontenido, 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.
¿El brief de Vinyl es lo mismo que el prompt que escribiría yo?
Todo lo que se cita en la página procede del brief capturado de 18.878 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
