Sobre esta plantilla
Innovation Lab muestra una forma de construir este tipo de landing page para una agencia o un estudio y publica las instrucciones que lo generaron. “We push past conventions, reshaping the virtual terrain with next-level technologies” es la línea que la maquetación está pensada para sostener. La paleta se queda en índigo intenso #080219 de base y blanco #F8F3EF para la tipografía, y el tipo es Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 1466x1080 antes de escribir código. La página reduce el movimiento a transiciones de 0.2s, cubic-bezier(0.16, 1, 0.3, 1) y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 6.911 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Profesionales del marketing de producto que necesitan que cada landing page siga leyéndose con 6,9s de vídeo en bucle detrás del texto.
- Pensado para responsables de contenidos que reescriben un diseño de landing page cuyo titular tiene que seguir siendo tan largo como el de Innovation Lab.
- Pensado para desarrolladores front-end que quieren cerrar el tiempo de 0.2s y la curva cubic-bezier(0.16, 1, 0.3, 1) antes de escribir un fotograma clave.
Qué incluye
- Una fila, sin desplegables. La barra se superpone sobre landing page en lugar de empujarla hacia abajo, así la composición conserva toda la altura de la primera pantalla. Los estados hover y de foco están definidos para cada enlace, y eso es lo que evita que una barra fina parezca inerte. La captura de la referencia es de 1466x1080.
- Tamaños fijados en el brief. La lista se mantiene corta (pasos de espaciado de 12px, transiciones de 0.2s y easing cubic-bezier(0.16, 1, 0.3, 1)), y por eso todo el sistema se puede comprobar a mano. El tipo y la maquetación comparten los mismos pasos, así que nada se desvía cuando se sustituye uno de los dos.
- Números sobre la línea base. La fila de números es la prueba: tres o cuatro cifras en una línea, una etiqueta pequeña bajo cada una y la misma Inter que la interfaz, para que se lea como dato y no como adorno. El acento se gasta en las cifras que afirman algo, no en la fila entera.
- Una barra sin nada de más. La marca ocupa el borde izquierdo y los enlaces corren a su derecha, todo compuesto en Inter, para que la barra pertenezca a la página de abajo y no a un sistema aparte. Si tu propia página tiene más secciones, agrúpalas en lugar de ensanchar la barra.
Movimiento e interacción
El bucle hace el trabajo ambiente
El clip de fondo se reproduce 6,9s en 1466x1080 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. Graba o exporta a 1466x1080 o más ancho.
Los controles son la capa interactiva
La respuesta se limita a estados hover en los botones y los enlaces y no en todas las tarjetas, y eso es lo que evita que una primera pantalla densa se sienta cargada. 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.
Qué cambiar primero en Innovation Lab
Si tu marca gasta una paleta más pesada, pruébala contra el marco antes de decidir. Como índigo intenso #080219 sostiene la página, un acento más oscuro necesita más contraste del que usa la referencia. Reescribe la línea de display antes de tocar el color.
Las cifras detrás de landing page
Desmonta este tipo de landing page y los valores siguen describiéndolo: pasos de espaciado de 12px y transiciones de 0.2s para el marco y el ritmo de debajo. Nada de este tipo de landing page depende de un valor por defecto.
El reflujo de landing page
Una pantalla estrecha no se arregla encogiéndola. Este brief resuelve el cambio en el tipo y en la navegación: la escala es fluida en lugar de escalonada. El orden es lo último que cambia.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Innovation Lab?
El brief capturado ocupa 6.911 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 React y Tailwind CSS para recrear Innovation Lab?
Innovation Lab se construyó en React y Tailwind CSS, 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 0.2s en Innovation Lab?
Las entradas y los cambios de estado se quedan en 0.2s usando cubic-bezier(0.16, 1, 0.3, 1). Los dispara un cambio de estado, no una biblioteca de scroll, y nunca retrasan el contenido.
