Sobre esta plantilla
Neuralyn es un caso de sección hero de SaaS: nace de un único brief escrito y esta página lo documenta. Abre con “One Clear Overview” y le da el marco a esa línea en lugar de encogerla en una tarjeta. El color se limita a negro #000000 de base y la página se compone en Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 800x590 antes de escribir código. El presupuesto de movimiento se agota en transiciones de 0.6s. Tenlo abierto mientras escribes: el brief de 5.257 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Pensado para responsables de contenidos que reescriben un diseño de sección hero cuyo titular tiene que seguir siendo tan largo como el de Neuralyn.
- Si redibujas Neuralyn con una tipografía propia, conserva las proporciones de Inter en su sección hero o la escala de tamaños dejará de cuadrar.
- Si tu tipografía no es Inter, los desarrolladores front-end deberían volver a medir el titular antes de reajustar el tiempo de la entrada.
Qué incluye
- Una barra de navegación que no estorba. La navegación es una sola fila, sin un segundo nivel debajo. La acción es el único elemento de la fila que lleva relleno, y así los enlaces siguen leyéndose como texto. No des a la marca más espacio que el que pide su tipografía.
- Los tamaños están en el brief, no en una escala. Los valores son la especificación: transiciones de 0.6s, capturados en 800x590 y no deducidos de una captura. Cada valor se puede comprobar contra el prompt capturado, y eso hace que un remontaje sea verificable y no aproximado.
- Una idea por panel. Donde iría un bloque de texto corrido, esta página coloca un conjunto de paneles, y eso es lo que mantiene sección hero fácil de escanear. Todos los paneles usan la misma disposición interna, así la cuadrícula se escanea por su forma.
- Los enlaces colapsan a un ancho. La barra se superpone sobre sección hero en lugar de empujarla hacia abajo, así la composición conserva toda la altura de la primera pantalla. La marca se trata como tipografía y no como un logotipo compuesto, lo que mantiene la fila superior en una sola línea base. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
Movimiento e interacción
El scroll marca la secuencia
Parallax es el único comportamiento de scroll del brief, lo que evita que la página se sienta como una sucesión de efectos sueltos. Con movimiento reducido el efecto desaparece sin cambiar el estado final de la composición.
Duraciones del brief
Una sola duración cubre las interacciones (0.6s), y eso hace que hover y pulsación se lean como un mismo sistema. El easing se especifica junto a la duración (0.6s), así que una reconstrucción no puede colar otra sensación sin avisar. Si cambias el easing, cámbialo en todas partes.
Cómo ordena Neuralyn la primera lectura
La atención se dirige, no se deja al azar. La página lo dice sin rodeos: “One Clear Overview”. La secuencia pasa por navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas, y cada parada se mide contra transiciones de 0.6s para que nada llegue desordenado. Quien busca SaaS recibe la oferta antes que las opciones.
Qué se mueve en Neuralyn
Copia el patrón y no los valores: quédate con transiciones de 0.6s, capas con parallax y un elemento fijo y deja que tu marca fije las duraciones. Nada se anima por gusto en este tipo de sección hero.
Qué cambiar primero en Neuralyn
La sustitución directa tiene un límite: si tu producto necesita otra jerarquía, transiciones de 0.6s se resistirán. En ese caso cambia primero el orden y después los valores. Otra marca puede reutilizar el marco entero.
Preguntas frecuentes
¿El prompt de Neuralyn 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 800x590. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cuánto de Neuralyn depende de React y Tailwind CSS?
Neuralyn 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 usar Neuralyn en un proyecto de cliente?
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 800x590.
