Sobre esta plantilla
Planetary Pulse resuelve el problema de cada sección hero de una marca de educación o comunidad con un solo brief capturado. La paleta es gris #C2CCD3 de base, con la tipografía Helvetica, Arial. El montaje es Tailwind y JavaScript vanilla; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. El brief gasta su presupuesto de movimiento en transiciones de 300ms, cubic-bezier(0.16, 1, 0.3, 1) y un vídeo en bucle de fondo. Cuando prepares el brief de cada sección hero de educación, parte de esta composición y sustituye el tema.
Pensado para
- Los desarrolladores front-end que tengan que llevarlo a producción sin más ayuda usarán Tailwind y JavaScript vanilla como implementación de referencia.
- Pasa Tailwind y JavaScript vanilla al desarrollador con el recorte de 1826x1080 adjunto y deja que lo reconstruya.
- Pensado para un diseñador que se incorpora a un proyecto que ya está en producción con Tailwind y JavaScript vanilla y solo necesita sustituir los textos.
Qué incluye
- Los enlaces colapsan a un ancho. Una barra fina ocupa la parte superior de sección hero, con la marca a la izquierda y los enlaces compuestos en Helvetica, Arial, de modo que la composición se lee antes como contenido que como interfaz. Por debajo de 280px los enlaces se pliegan en una superposición a pantalla completa. Por debajo de 280px los enlaces colapsan en lugar de saltar a una segunda línea.
- Medios sin superposición. La primera pantalla es un único clip a 1826x1080, y todo lo demás se dispone encima. Exporta a 1826x1080 o más ancho y el recorte de cobertura sigue funcionando.
- Cifras tratadas como tipografía. Una franja compacta de cifras sostiene las afirmaciones que de otro modo pedirían un párrafo, lo que evita que la composición de sección hero se convierta en una lista de funciones. La fila se alinea al mismo margen que el titular de arriba.
- Una barra de navegación que no estorba. Las etiquetas son lo bastante cortas para caber en una línea a 280px, y el elemento activo se marca con peso y no con una píldora.
Movimiento e interacción
Movimiento ambiente sin librería de scroll
El movimiento ambiente viene del bucle de 5,9s en 1826x1080 y no de efectos de scroll, lo que mantiene la página tranquila y el texto legible. El bucle se recorta a cubrir, lo que significa que la composición no depende de un tamaño de fotograma concreto.
Rápido, pero deliberado
Los cambios de estado están fijados en 300ms, así que la respuesta de los controles es un valor de diseño y no el que trae el navegador por defecto. Como los valores son cortos, una reconstrucción que los alargue se nota de inmediato. Si cambias el easing, cámbialo en todas partes.
El orden detrás de sección hero
Aquí nada compite con la primera decisión. El material de apoyo espera por debajo, y navegación, la fila de cifras, la cuadrícula de tarjetas, la lista de funciones y el clip de fondo se bastan para sostener la parte alta de la página. Quien busca educación recibe la oferta antes que las opciones.
Los tiempos detrás de sección hero
El movimiento se limita a transiciones de 300ms, un bucle de 5,9s y una aparición de línea enmascarada; se ejecuta una vez al entrar y luego se aparta, que es el presupuesto adecuado para que cada sección hero siga siendo legible. Nada se anima por gusto en este tipo de sección hero.
El reflujo de sección hero
En ancho, la composición es densa; en estrecho, la maquetación cambia a 280px, la sección se mantiene a 100vh y la navegación se pliega en un menú móvil. Los dos estados están descritos en el brief. El ancho cambia las medidas, no el recorrido de lectura.
Preguntas frecuentes
¿Necesito Tailwind y JavaScript vanilla para recrear Planetary Pulse?
La referencia está construida en Tailwind y JavaScript vanilla, pero la maqueta no depende de esa decisión: el espaciado, la escala tipográfica y los valores de movimiento pasan a lo que ya uses.
¿El brief de Planetary Pulse es lo mismo que el prompt que escribiría yo?
Todo lo que se cita en la página procede del brief capturado de 26.446 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Qué le pasa a la tipografía de Planetary Pulse cuando se estrecha el viewport?
La ficha nombra sus breakpoints (max-width de 280px, min-width de 640px y min-width de 768px) y describe qué cambia en cada uno, así que la maquetación estrecha está diseñada, no heredada.
