Sobre esta plantilla
Quantum Lucid conserva el rastro de sus decisiones: el brief que hay detrás de landing page ocupa 20.249 caracteres. El esquema de color es neutro #F2F2F2 de base, casi negro #000000 para la tipografía y tono oscuro #38C6EC para los acentos, y la página está compuesta en Figtree. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1920x1412 antes de escribir código. El movimiento se queda en transiciones de 1200ms, cubic-bezier(.22, 1.36, 1) y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 20.249 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Este diseño de landing page va dirigido a equipos que ya conocen un único archivo HTML autocontenido y solo necesitan dejar easing cubic-bezier(.22, 1.36, 1) por escrito.
- Equipos que construyen su landing page de un producto de IA o SaaS y necesitan dejar constancia de un único archivo HTML autocontenido antes de que salga un presupuesto.
- Si la maquetación parte de un único archivo HTML autocontenido, llévate primero secciones de 100vh y esquinas de 26px y no toques la paleta hasta que se asiente la cuadrícula.
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 #38C6EC, todo al paso de tipo más pequeño del brief. Las etiquetas son lo bastante cortas para caber en una línea a 216px, y el elemento activo se marca con peso y no con una píldora.
- El vídeo es el fondo, no un panel. El brief especifica el vídeo a 1920x1412 con un bucle de 6,7s, y cada elemento de texto se coloca contra ese marco. Exporta a 1920x1412 o más ancho y el recorte de cobertura sigue funcionando.
- La escala es el estilo. Con Figtree 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. La interlínea sigue los pasos de tamaño y no un valor global único.
- Una fila, sin desplegables. Una acción por barra. La captura de la referencia es de 1920x1412.
Movimiento e interacción
El tiempo va en el brief
Los tiempos son cortos y coherentes (1200ms con la curva cubic-bezier(.22, 1.36, 1)), así que el hover y la pulsación se leen como un solo sistema y no como un conjunto de efectos sueltos. El tiempo citado cubre los cambios de estado, así que la respuesta es la parte especificada del movimiento.
Puntero solo donde ayuda
La respuesta se limita a estados hover en los botones y los enlaces y no en todas las tarjetas y pestañas o un acordeón que intercambia contenido en el sitio, así que el resto de la maquetación es una composición fija. Los objetivos interactivos son lo bastante grandes para tocarlos y el tratamiento del puntero es coherente entre ellos. Menos estados, todos especificados.
Por qué esta composición funciona para SaaS
Una pantalla significa una decisión para quien lee, y ese es el coste de esta maquetación: todo lo demás baja por debajo de la primera pantalla. El brief enuncia secciones de 100vh, esquinas de 26px, pasos de espaciado de 14px, transiciones de 1200ms y easing cubic-bezier(.22, 1.36, 1) para que las secciones de abajo mantengan el mismo ritmo. Quantum Lucid enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Cómo ordena Quantum Lucid la primera lectura
Donde una página de marketing apila pruebas por debajo y cruza los dedos, este tipo de landing page pone navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas delante de quien lee y retiene el resto. Reordena estos bloques y la página deja de tener sentido.
Qué cambiar primero en Quantum Lucid
Cambia primero el contenido y revisa el marco después. Las cifras que hay que proteger mientras sustituyes el texto son estas: secciones de 100vh, esquinas de 26px, pasos de espaciado de 14px y transiciones de 1200ms. Si un elemento nuevo no ayuda a explicar la oferta ni el siguiente paso, su sitio está por debajo del pliegue.
Preguntas frecuentes
¿Cuánto de Quantum Lucid depende de un único archivo HTML autocontenido?
Quantum Lucid 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.
¿Cuánto ocupa el prompt que hay detrás de Quantum Lucid?
El brief capturado ocupa 20.249 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.
¿Puedo quedarme con las transiciones de Quantum Lucid y cambiar los tiempos?
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 1200ms con la curva cubic-bezier(.22, 1.36, 1). El brief anota los valores para que un port no tenga que adivinarlos.
