Sobre esta plantilla
Signal ID conserva el rastro de sus decisiones: el brief que hay detrás de landing page ocupa 11.588 caracteres. “YOUR VOICE ID TO THE E NETWORK” es la línea que la maquetación está pensada para sostener. La paleta es azul intenso #000003 de base y #FFFFFF para la tipografía, con la tipografía Sora. Se entrega como React y Tailwind CSS, y la captura se fija a 1686x1080 antes de escribir código. El movimiento se limita a transiciones de 70ms, 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 11.588 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Equipos internos que amplían su landing page y necesitan que secciones de 100vh y pasos de espaciado de 20px pasen a los bloques nuevos sin tocar los valores.
- Este diseño de landing page sirve a fundadores que necesitan una pantalla de prueba de que los textos de SaaS aguantan 7s 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 Signal ID.
Qué incluye
- Los enlaces colapsan a un ancho. La barra es una fila de texto y una acción, medida en secciones de 100vh y pasos de espaciado de 20px, así que se lee como franja y no como banda. Nada de la barra se anima al hacer scroll; está presente desde el primer fotograma y después se queda al margen.
- Un solo medio lleva el tono. Un único recurso de 7s sostiene toda la primera pantalla, y la página no tiene un segundo medio que mantener sincronizado. Exporta a 1686x1080 o más ancho y el recorte de cobertura sigue funcionando.
- El tipo hace el estilo. Aquí el tipo es el sistema de estilo: Sora al tamaño display, la misma fuente en toda la interfaz y ningún segundo color de acento haciendo el trabajo. La fuente va con tamaños fijos, y eso es lo que mantiene relacionadas la línea display y el texto de interfaz.
- La navegación es fina a propósito. Una serie corta de enlaces y una única acción se sitúan sobre landing page, sostenidas en secciones de 100vh y pasos de espaciado de 20px, de manera que la barra nunca compite con la composición que tiene detrás.
Movimiento e interacción
Todo el presupuesto de animación
Las transiciones están fijadas en 70ms con la curva cubic-bezier(0.16, 1, 0.3, 1), y ese es el tiempo que deben cumplir los controles. Cada cambio de estado nombra un valor, así que el valor por defecto del navegador no se usa nunca.
El bucle hace el trabajo ambiente
El clip de fondo se reproduce 7s en 1686x1080 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 clip está silenciado y en línea, así que el primer fotograma está disponible sin ninguna interacción. Graba o exporta a 1686x1080 o más ancho.
Qué cambiar primero en Signal ID
Donde un tema te da componentes, este brief te da una composición: secciones de 100vh, pasos de espaciado de 20px, transiciones de 70ms y easing cubic-bezier(0.16, 1, 0.3, 1) y un marco para el material, con el tema en tus manos. El marco y la escala son lo que hay que dejar en paz.
Las cifras detrás de landing page
Desmonta este tipo de landing page y los valores siguen describiéndolo: secciones de 100vh y pasos de espaciado de 20px para el marco y el ritmo de debajo. Nada de este tipo de landing page depende de un valor por defecto.
Los tiempos detrás de landing page
Los tiempos son explícitos: transiciones de 70ms, un bucle de 7s y una aparición de línea enmascarada, todo escrito en el brief y no ajustado a ojo. Nada se anima por gusto en este tipo de landing page.
Preguntas frecuentes
¿El prompt de Signal ID es una especificación cerrada o un punto de partida?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 1686x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cuánto de Signal ID depende de React y Tailwind CSS?
Signal ID 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.
¿Puedo publicar una página reconstruida a partir de Signal ID sin acreditar nada?
El brief es una descripción, no una licencia para redistribuir los recursos de otra persona. Conserva la estructura y los números, sustituye los medios y las marcas, y acredita la procedencia si un cliente pregunta de dónde sale la maqueta. La captura de la referencia es de 1686x1080.
