Sobre esta plantilla
Space planet es un caso de sección hero de educación: nace de un único brief escrito y esta página lo documenta. El color se limita a tono #071227 de base, #FFFFFF para la tipografía y tono claro #5FD0E1 para los acentos y la página se compone en Poppins. Se entrega como un único archivo HTML autocontenido, así que el conjunto de sección hero se puede trasladar a un proyecto sin traspaso de diseño. El presupuesto de movimiento se agota en transiciones de 6s, cubic-bezier(.22,1.36,1) y un vídeo en bucle de fondo. Es la referencia adecuada para este tipo de sección hero en una marca de educación o comunidad, que tiene que transmitir intención desde la primera pantalla.
Pensado para
- Llévate el marco de 1920x1420 y secciones de 100vh y pasos de espaciado de 72px de este diseño de sección hero antes que cualquier otra cosa.
- La página sirve a desarrolladores front-end que rehacen su sección hero de una marca de educación o comunidad en un único archivo HTML autocontenido y buscan los números que hay detrás del aspecto.
- Equipos que rehacen su sección hero 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
- Enlaces antes de la acción. La barra es la parte más callada de la composición: marca, una fila corta de enlaces y una acción en #5FD0E1, todo al paso de tipo más pequeño del brief. Las etiquetas son lo bastante cortas para caber en una línea a 500px, y el elemento activo se marca con peso y no con una píldora. Diseña el estado colapsado antes de añadir un sexto enlace.
- El vídeo es el fondo, no un panel. Un único clip silenciado y en bucle llena el marco a 1920x1420 y 6,9s, 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 1920x1420 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona. Exporta a 1920x1420 o más ancho para que el recorte siga siendo honesto.
- El tamaño display lleva la voz. Con Poppins 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. El interletraje se fija por tamaño, así la línea display y el pie de foto no comparten un mismo valor.
- Una barra sin nada de más. Por debajo de 500px los enlaces colapsan en lugar de saltar a una segunda línea.
Movimiento e interacción
Un bucle, no una secuencia
El clip de fondo se reproduce 6,9s en 1920x1420 en bucle infinito, silenciado y en línea, así que la página sigue moviéndose mientras la atención del lector está en el texto. No hace falta ninguna librería de scroll, porque el único movimiento ambiente es el propio medio. Nada más en la página se anima de forma continua, así que el medio es lo único que pide atención.
Duraciones del brief
Una sola duración cubre las interacciones (6s con la curva cubic-bezier(.22,1.36,1)), y eso hace que hover y pulsación se lean como un mismo sistema. El easing se especifica junto a la duración (6s), así que una reconstrucción no puede colar otra sensación sin avisar. Aplica el tiempo exacto a la respuesta.
Qué gana una marca de educación o comunidad aquí
Cuenta las decisiones de este tipo de sección hero y todas remiten a un único documento: 29.105 caracteres que nombran el marco en 1920x1420, el tipo y el ritmo. Space planet enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Cómo ordena Space planet la primera lectura
Un orden estricto te cuesta flexibilidad después. Añade una sección por encima y habrá que recortar de nuevo las cifras (secciones de 100vh y pasos de espaciado de 72px), porque la secuencia sostiene la página y no es decorativa. Quien busca educación recibe la oferta antes que las opciones.
Leer Space planet como especificación
Casi todas las decisiones de aquí son un valor que puedes comprobar: secciones de 100vh, pasos de espaciado de 72px, transiciones de 6s, easing cubic-bezier(.22,1.36,1) y un breakpoint de 500px. El medio es un bucle de 6,9s en 1920x1420. El tipo se queda en Poppins, así que una sustitución tiene que mantener las mismas proporciones. Nada de este tipo de sección hero depende de un valor por defecto.
Preguntas frecuentes
¿Cuánto de Space planet depende de un único archivo HTML autocontenido?
Space planet 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.
¿Cómo está organizada esta ficha de Space planet?
Todo lo que se cita en la página procede del brief capturado de 29.105 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Qué me llevo cuando copio el brief de Space planet?
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 1920x1420. En ningún punto la imagen renderizada funciona como fuente de la verdad.
