Sobre esta plantilla
Zyphor resuelve el problema de cada sección hero de un producto de IA o SaaS con un solo brief capturado. Abre con “Manage projects effortlessly with smart tools, stay on track, meet deadlines, and keep your team productive” y le da el marco a esa línea en lugar de encogerla en una tarjeta. El esquema de color es azul intenso #0B0C10 de base, y la página está compuesta en Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 1930x1400 antes de escribir código. El movimiento se queda en un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 3.562 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Equipos que construyen este tipo de sección hero para un producto de IA o SaaS y quieren el detalle medido (pasos de espaciado de 20px) en lugar de una captura que copiar.
- Este diseño de sección hero sirve a fundadores que necesitan una pantalla de prueba de que los textos de SaaS aguantan 7,2s de vídeo en bucle.
- 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 Zyphor.
Qué incluye
- Una fila, sin desplegables. Una barra fina ocupa la parte superior de sección hero, 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. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. La acción es el único elemento de la fila que lleva relleno, y así los enlaces siguen leyéndose como texto. Diseña el estado colapsado antes de añadir un sexto enlace.
- El brief nombra los pasos. Toda medida del brief es un número que puedes volver a medir: pasos de espaciado de 20px. Cada valor se puede comprobar contra el prompt capturado, y eso hace que un remontaje sea verificable y no aproximado.
- Un solo medio lleva el tono. Un clip de 7,2s a 1930x1400 hace el trabajo atmosférico; el brief fija su recorte y deja el tipo intacto por encima. Exporta a 1930x1400 o más ancho y el recorte de cobertura sigue funcionando.
- Una barra de navegación que no estorba. La navegación es una sola fila, sin un segundo nivel debajo. Prueba la barra sobre tus propios medios antes de darle un fondo.
Movimiento e interacción
Interacción contenida y local
La respuesta se limita a estados hover en los botones y los enlaces y no en todas las tarjetas, y eso es lo que evita que una primera pantalla densa se sienta cargada. Los objetivos interactivos son lo bastante grandes para tocarlos y el tratamiento del puntero es coherente entre ellos.
El bucle hace el trabajo ambiente
El movimiento ambiente es un clip de 7,2s en 1930x1400, en bucle discreto detrás del texto y sin reaccionar al puntero. El clip está silenciado y en línea, así que el primer fotograma está disponible sin ninguna interacción.
Las cifras detrás de sección hero
Desmonta este tipo de sección hero y los valores siguen describiéndolo: pasos de espaciado de 20px para el marco y el ritmo de debajo. Nada de este tipo de sección hero depende de un valor por defecto.
Cómo ordena Zyphor la primera lectura
Un orden estricto te cuesta flexibilidad después. Añade una sección por encima y habrá que recortar de nuevo las cifras (pasos de espaciado de 20px), porque la secuencia sostiene la página y no es decorativa. Quien busca SaaS recibe la oferta antes que las opciones.
El brief de SaaS se sostiene
Podrías reconstruirlo como una pila de tarjetas sueltas y perderías solo el argumento. Esta clase de sección hero se lee como una única decisión: navegación y el clip de fondo en una sola secuencia. Zyphor enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Zyphor?
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 1930x1400. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Por qué la ficha nombra React y Tailwind CSS?
Zyphor 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.
¿De dónde sale el diseño de Zyphor?
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 1930x1400.
