Sobre esta plantilla
Lee Data Signal como especificación de landing page: los valores se escribieron antes de construir la página. Abre con “Abstract red and blue smoke” y le da el marco a esa línea en lugar de encogerla en una tarjeta. La paleta es turquesa intenso #050606 de base y blanco #EDEDED para la tipografía, con la tipografía Inter. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1482x1080 antes de escribir código. Todo el movimiento cabe en transiciones de 520ms, cubic-bezier(.16,1.3,1) y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 12.007 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Si la referencia solo es un punto de partida, los diseñadores pueden conservar easing cubic-bezier(.16,1.3,1) y rehacer el resto del diseño de landing page.
- Pensado para agencias que presentan propuestas de SaaS y necesitan incluir un único archivo HTML autocontenido en la primera respuesta al cliente.
- Cita un breakpoint de 619px en la nota de traspaso para que la siguiente implementación no tenga que volver a deducir nada de la página.
Qué incluye
- La navegación es fina a propósito. Una barra fina ocupa la parte superior de landing page, con la marca a la izquierda y los enlaces compuestos en Inter, de modo que la composición se lee antes como contenido que como interfaz. Por debajo de 619px los enlaces se pliegan en una superposición a pantalla completa. Por debajo de 619px los enlaces colapsan en lugar de saltar a una segunda línea. La barra son unos pocos elementos, así que se reconstruye sin librería de componentes.
- Un clip, no una ilustración. La primera pantalla es un único clip a 1482x1080, y todo lo demás se dispone encima. Exporta a 1482x1080 o más ancho y el recorte de cobertura sigue funcionando.
- Navegación contenida en una fila. Diseña el estado colapsado antes de añadir un sexto enlace. La captura de la referencia es de 1482x1080.
- Los tamaños están en el brief, no en una escala. Tipo y espaciado salen aquí de una sola lista: un tamaño de display fijo de 16px, secciones de 19vh, esquinas de 7px y pasos de espaciado de 36px. Cada valor se puede comprobar contra el prompt capturado, y eso hace que un remontaje sea verificable y no aproximado. Cambia el tema, no los pasos.
Movimiento e interacción
Un bucle, no una secuencia
El movimiento ambiente viene del bucle de 5,9s en 1482x1080 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.
Interacción contenida y local
La página solo responde donde se puede actuar: estados hover en los botones y los enlaces y no en todas las tarjetas. Nada en la página abre un modal ni secuestra el scroll; las interacciones se quedan en su elemento.
Qué cambiar primero en Data Signal
Empieza por el texto, no por el color. Reescribe “Abstract red and blue smoke” como una sola frase sobre tu producto y colócala en Inter al tamaño que usa el brief. La composición es la parte reutilizable, y sobrevive a una marca distinta.
Qué gana un producto de IA o SaaS aquí
La afirmación se hace una sola vez, en tamaño de display. “Abstract red and blue smoke” hace ese trabajo desde el primer fotograma. En esta clase de landing page todo lo demás se ordena alrededor de esa línea: navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas, y ninguna segunda promesa compite por la primera lectura. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
Los tiempos detrás de landing page
El movimiento se limita a transiciones de 520ms, un bucle de 5,9s y estados hover y pulsados; se ejecuta una vez al entrar y luego se aparta, que es el presupuesto adecuado para que cada landing page siga siendo legible. Nada se anima por gusto en este tipo de landing page.
Preguntas frecuentes
¿Por qué la ficha nombra un único archivo HTML autocontenido?
Data Signal 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.
¿El prompt de Data Signal es una especificación cerrada o un punto de partida?
El brief capturado ocupa 12.007 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.
¿Cuánto de Data Signal está animado?
Las entradas y los cambios de estado se quedan en 520ms usando cubic-bezier(.16,1.3,1) con una rama de movimiento reducido en el brief. Los dispara un cambio de estado, no una biblioteca de scroll, y nunca retrasan el contenido.
