Sobre esta plantilla
Neon Logic da a un producto de IA o SaaS una primera pantalla terminada y las cifras que la produjeron. El esquema de color es azul intenso #010103 de base y blanco #FFFFFF para la tipografía, y la página está compuesta en Space Mono. La referencia está construida con React y Tailwind CSS, y las decisiones de maquetación se documentan aparte. El movimiento se limita a transiciones de 800ms. Tenlo abierto mientras escribes: el brief de 13.601 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Este diseño de landing page está pensado para agencias que necesitan que el marco de 640x474 sobreviva a tres rondas de cambios del cliente.
- Diseñadores que necesitan los números antes que nada: tipografía de 12px a 42px y secciones de 100vh, todo citado del brief.
- Pensado para responsables de contenidos que reescriben un diseño de landing page cuyo titular tiene que seguir siendo tan largo como el de Neon Logic.
Qué incluye
- Enlaces antes de la acción. 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. La acción lleva el acento mientras los enlaces se quedan en el color del texto, así la jerarquía de la barra coincide con la de la página que tiene debajo. Prueba la barra sobre tus propios medios antes de darle un fondo. La captura de la referencia es de 640x474.
- Números que llegan al montaje. El brief nombra las cifras: tipografía de 12px a 42px, secciones de 100vh, pasos de espaciado de 14px y transiciones de 800ms. Por eso la composición se sostiene, porque no hay ningún paso de espaciado inventado entre el tipo y el marco. Un remontaje que da esos números se parece a la referencia sin más ajustes. Conserva los valores que parecen arbitrarios.
- Prueba en una sola fila. Las cifras se componen como tipo y no dentro de una tarjeta: Space Mono al tamaño display, con las etiquetas un paso por debajo. Las cifras comparten la línea base del texto que las rodea, así la fila se lee como un solo objeto.
- Una barra de navegación que no estorba. La marca ocupa el borde izquierdo y los enlaces corren a su derecha, todo compuesto en Space Mono, para que la barra pertenezca a la página de abajo y no a un sistema aparte.
Movimiento e interacción
Una duración para los controles
Los controles se resuelven en 800ms, lo bastante rápido para que la página responda al tocarla y no después. Un mismo valor se reutiliza en todos los controles, así que sus tiempos no se separan. Pasa las duraciones a tu implementación.
Un lienzo, no una imagen
La pieza central se renderiza en vivo (una transformación 3D en el elemento principal) en vez de entregarse como imagen, así que la composición de 640x474 responde al viewport en lugar de quedarse detrás. El render trae su propio color, así que la paleta de alrededor se mantiene discreta.
El reflujo de landing page
El coste de una escala fluida es menos control sobre los tamaños exactos. A cambio, la línea de display se mantiene proporcionada, y por eso un clamp entre 12px y 42px está en el brief. La reproducción automática y el movimiento se tratan con honestidad, así que la página sigue comunicando cuando no están disponibles.
Leer Neon Logic como especificación
El brief es una especificación, no un moodboard. Fija tipografía de 12px a 42px, secciones de 100vh, pasos de espaciado de 14px y transiciones de 800ms y concreta el medio en 640x474. Ese nivel de detalle es lo que hace que el diseño sobreviva a una reconstrucción: cambia el texto y las relaciones se mantienen. Nada de este tipo de landing page depende de un valor por defecto.
Los tiempos detrás de landing page
El presupuesto de animación está declarado: transiciones de 800ms, estados hover y pulsados y un lienzo en vivo. Nada en este tipo de landing page se mueve sin un valor detrás. Nada se anima por gusto en este tipo de landing page.
Preguntas frecuentes
¿El prompt de Neon Logic es una especificación cerrada o un punto de partida?
El brief capturado ocupa 13.601 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 Neon Logic?
Neon Logic 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.
¿Qué gobierna el movimiento en Neon Logic?
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 800ms. El brief anota los valores para que un port no tenga que adivinarlos.
