Sobre esta plantilla
Quantum Core es un caso de landing page de SaaS: nace de un único brief escrito y esta página lo documenta. El titular dice “Talk with the team”, y el orden de landing page gira alrededor de esa línea. La paleta es azul intenso #080A19 de base y blanco #E9E9E9 para la tipografía, con la tipografía Suisse Intl. Se entrega como React y Tailwind CSS, y la captura se fija a 1920x1420 antes de escribir código. El movimiento se limita a transiciones de 700ms, cubic-bezier(0.16, 1, 0.3, 1) y un vídeo en bucle de fondo, lo bastante discreto para que el texto siga mandando. Tenlo abierto mientras escribes: el brief de 27.320 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Equipos que construyen este tipo de landing page para un producto de IA o SaaS y quieren el detalle medido (tipografía de 12px a 72px y pasos de espaciado de 20px) en lugar de una captura que copiar.
- Este diseño de landing page sirve a fundadores que necesitan una pantalla de prueba de que los textos de SaaS aguantan 6,8s de vídeo en bucle.
- Pensado para responsables de contenidos que reescriben un diseño de landing page cuyo titular tiene que seguir siendo tan largo como el de Quantum Core.
Qué incluye
- Los enlaces colapsan a un ancho. La marca ocupa el borde izquierdo y los enlaces corren a su derecha, todo compuesto en Suisse Intl, para que la barra pertenezca a la página de abajo y no a un sistema aparte. La fila se dimensiona a partir de su propia tipografía, no de una altura de cabecera fija.
- El brief nombra los pasos. Aquí nada se mide a ojo. La especificación fija tipografía de 12px a 72px, pasos de espaciado de 20px, transiciones de 700ms y easing cubic-bezier(0.16, 1, 0.3, 1), y el resto de la maquetación se deriva de esos valores. El tipo y la maquetación comparten los mismos pasos, así que nada se desvía cuando se sustituye uno de los dos.
- Un solo medio lleva el tono. Un único clip silenciado y en bucle llena el marco a 1920x1420 y 6,8s, 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.
- La barra sigue la cuadrícula. Mantén la fila en una sola línea. La captura de la referencia es de 1920x1420.
Movimiento e interacción
Movimiento ambiente sin librería de scroll
El clip de fondo se reproduce 6,8s 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. El bucle se recorta a cubrir, lo que significa que la composición no depende de un tamaño de fotograma concreto.
Una superficie interactiva pequeña
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. Los estados interactivos no mueven la maquetación, así que nada salta bajo el puntero. Unos pocos estados fiables valen más que una lista larga de efectos.
Qué cambiar primero en Quantum Core
Supón que solo tienes una tarde. Cambia el titular y la etiqueta de la acción, no toques tipografía de 12px a 72px y pasos de espaciado de 20px y tendrás una página que parece intencionada. Sustituir es más barato que componer, y de eso se trata.
Las cifras detrás de landing page
El tipo es la primera cifra: tipografía de 12px a 72px y pasos de espaciado de 20px. El espaciado se deriva de ahí, y todo lo demás en la página se coloca en relación con esos dos valores. Nada de este tipo de landing page depende de un valor por defecto.
El acierto de landing page
Quantum Core funciona porque su jerarquía está decidida, no decorada. El brief fija las cifras (tipografía de 12px a 72px, pasos de espaciado de 20px, transiciones de 700ms y easing cubic-bezier(0.16, 1, 0.3, 1)), así que un texto nuevo cae dentro del marco en lugar de reabrirlo. Quantum Core enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Quantum Core?
El brief capturado ocupa 27.320 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.
¿Por qué la ficha nombra React y Tailwind CSS?
Quantum Core 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.
¿Cuánto de Quantum Core está animado?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 700ms con la curva cubic-bezier(0.16, 1, 0.3, 1). Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.
