Sobre esta plantilla
JungleMind da a un producto de IA o SaaS una primera pantalla terminada y las cifras que la produjeron. La paleta es #5C5C5C de base y #111111 para la tipografía, con la tipografía Poppins. La ficha nombra el stack que produjo la página (vanilla JS) en lugar de esconderlo. El presupuesto de movimiento se agota en transiciones de 70ms, cubic-bezier(0.16, 1, 0.3, 1) y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 36.531 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Los fundadores que le pasen el brief a una agencia usarán el marco de 1920x1422 como prueba de aceptación de la primera ronda.
- Pensado para agencias que facturan por ronda y quieren acordar tipografía de 12px a 25px y secciones de 100vh antes de la primera.
- Pensado para responsables de contenidos que reescriben un diseño de landing page cuyo titular tiene que seguir siendo tan largo como el de JungleMind.
Qué incluye
- Una fila, sin desplegables. Una serie corta de enlaces y una única acción se sitúan sobre landing page, sostenidas en tipografía de 12px a 25px y secciones de 100vh, de manera que la barra nunca compite con la composición que tiene detrás. Por debajo de 340px los enlaces colapsan en lugar de saltar a una segunda línea. Prueba la barra sobre tus propios medios antes de darle un fondo.
- Un clip, no una ilustración. El fondo es un único bucle de 6,9s a 1920x1422, recortado para cubrir y sin teñir. Todo lo demás flota encima, en una capa superior. Exporta a 1920x1422 o más ancho y el recorte de cobertura sigue funcionando.
- La píldora de anuncio. Una insignia, un mensaje: la píldora se sitúa sobre el titular en Poppins al paso más pequeño, y nada más compite por ese hueco. Está colocada de modo que el titular conserva el centro de la composición. Manténla sobre el titular, nunca al lado.
- Navegación contenida en una fila. Una acción por barra. La captura de la referencia es de 1920x1422.
Movimiento e interacción
Los controles son la capa interactiva
Solo los controles responden al puntero (estados hover en los botones y los enlaces y no en todas las tarjetas), así que la página se siente viva sin convertir cada elemento en un objetivo. Los estados de pulsación están especificados igual que el hover, así que un toque confirma lo mismo que un clic. Unos pocos estados fiables valen más que una lista larga de efectos.
Duraciones cortas y nombradas
Una sola duración cubre las interacciones (70ms con la curva cubic-bezier(0.16, 1, 0.3, 1)), y eso hace que hover y pulsación se lean como un mismo sistema. Las duraciones son tan cortas que la respuesta se lee como reacción y no como animación. Si cambias el easing, cámbialo en todas partes.
El argumento de landing page
El diseño defiende su argumento en una sola pantalla. El medio es un bucle de 6,9s en 1920x1422. El material pone la atmósfera, el texto pone la oferta, y tipografía de 12px a 25px y secciones de 100vh mantienen ambas cosas separadas. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
Leer JungleMind como especificación
La página tiene más cifras de las que parece. Las que una reconstrucción debe conservar son estas: tipografía de 12px a 25px, secciones de 100vh, esquinas de 9px, pasos de espaciado de 16px y transiciones de 70ms; el resto puede moverse. Nada de este tipo de landing page depende de un valor por defecto.
El reflujo de landing page
Frente a una maquetación de móvil que esconde secciones, esta las conserva y les cambia la forma: la tipografía se limita entre 12px y 25px, la maquetación cambia a 340px y la sección se mantiene a 100vh. Los dos estados están descritos en el mismo brief.
Preguntas frecuentes
¿El prompt de JungleMind es una especificación cerrada o un punto de partida?
El brief capturado ocupa 36.531 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 vanilla JS para recrear JungleMind?
JungleMind se construyó en vanilla JS, 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 se comportan las transiciones de 70ms en JungleMind?
Las transiciones van asociadas a estados de la interfaz y no a una línea de tiempo de scroll, y se resuelven en el rango de 70ms con la curva cubic-bezier(0.16, 1, 0.3, 1). El brief anota los valores para que un port no tenga que adivinarlos.
