Sobre esta plantilla
TrueEarth es la referencia de landing page para una marca de educación o comunidad, y el brief que hay detrás es una especificación de construcción completa, no un moodboard. La paleta se queda en #FFFFFF de base, #111417 para la tipografía y azul intenso #0B2A3A para los acentos, y el tipo es Plus Jakarta Sans. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1920x1422 antes de escribir código. La página reduce el movimiento a transiciones de 72ms, cubic-bezier(.16,1.3,1) y un vídeo en bucle de fondo. Es más útil cuando cada landing page de Educación y comunidad tiene que sobrevivir a un cambio de texto sin rediseño.
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.
- Pensado para estudios que tienen que explicar a un cliente el comportamiento a 360px sin construir antes un prototipo.
- Equipos que rehacen su landing page de educación a partir de la referencia de un competidor y quieren dejar claro un único archivo HTML autocontenido antes de que nadie se comprometa con un framework.
Qué incluye
- Fila superior: marca, enlaces y acción. 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 #0B2A3A, 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 360px, y el elemento activo se marca con peso y no con una píldora.
- El bucle es el fondo. La composición se construye encima del clip de 1920x1422 y no a su lado, de modo que los medios nunca reciben un panel ni un borde. Exporta a 1920x1422 o más ancho y el recorte de cobertura sigue funcionando.
- Una fila, sin desplegables. No des a la marca más espacio que el que pide su tipografía. La captura de la referencia es de 1920x1422.
- Medido, no estimado a ojo. El brief fija tipografía de 12px a 16px, secciones de 100vh, una cuadrícula de 2 columnas y esquinas de 2px y deja el resto a la disposición, que es lo contrario de una escala que crece sola. Como los valores son fijos, una sustitución cambia el aspecto sin cambiar el ritmo.
Movimiento e interacción
Estados de puntero, nada más
La capa interactiva es pequeña y predecible: estados hover en los botones y los enlaces y no en todas las tarjetas. Todo lo demás se queda quieto, lo que mantiene el énfasis en la composición. Cada estado cambia una sola propiedad, lo que mantiene legible la respuesta. Unos pocos estados fiables valen más que una lista larga de efectos.
El bucle hace el trabajo ambiente
El movimiento ambiente es un clip de 6,9s en 1920x1422, en bucle discreto detrás del texto y sin reaccionar al puntero. El clip es lo bastante corto para girar sin costura visible, y eso importa más que su resolución.
Las cifras detrás de landing page
El brief es una especificación. Enuncia tipografía de 12px a 16px, secciones de 100vh, una cuadrícula de 2 columnas, esquinas de 2px y pasos de espaciado de 22px y nombra el marco del material en 1920x1422 antes de diseñar nada alrededor. Nada de este tipo de landing page depende de un valor por defecto.
Qué se mueve en TrueEarth
El brief ata cada transición a un valor (transiciones de 72ms, un bucle de 6,9s y una aparición de línea enmascarada). Eso es lo que evita que la página se sienta como una plantilla con un preset de animación superpuesto. Nada se anima por gusto en este tipo de landing page.
El orden detrás de landing page
Una pantalla, una acción y navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas entre medias. El brief fija ese orden en lugar de dejar la primera pantalla a una pila de secciones. Quien busca educación recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de TrueEarth?
El brief capturado ocupa 23.498 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.
¿Necesito un único archivo HTML autocontenido para recrear TrueEarth?
TrueEarth 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.
¿Por qué no se imprime aquí el prompt de TrueEarth?
Todo lo que se cita en la página procede del brief capturado de 23.498 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
