Sobre esta plantilla
AI Designer Portfolio resuelve el problema de cada sección hero de una agencia o un estudio con un solo brief capturado. El color se limita a blanco #F6FCFF de base y turquesa intenso #051A24 para la tipografía y la página se compone en Neue Montreal. Se entrega como React y Tailwind CSS, y la captura se fija a 604x476 antes de escribir código. El movimiento se limita a transiciones de 0.1s, cubic-bezier(0.4, 0, 0.2, 1) y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 11.458 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Equipos internos que amplían su sección hero y necesitan que tipografía de 22px a 80px y pasos de espaciado de 40px pasen a los bloques nuevos sin tocar los valores.
- Este diseño de sección hero sirve a fundadores que necesitan una pantalla de prueba de que los textos de agencia aguantan 17,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 AI Designer Portfolio.
Qué incluye
- Navegación contenida en una fila. Una serie corta de enlaces y una única acción se sitúan sobre sección hero, sostenidas en tipografía de 22px a 80px y pasos de espaciado de 40px, de manera que la barra nunca compite con la composición que tiene detrás. El menú móvil forma parte del brief, de modo que el estado colapsado está diseñado y no improvisado.
- Vídeo en la capa inferior. El vídeo ocupa la capa inferior de la composición de 604x476, con el texto dispuesto por encima y nada entre ambos. El bucle es lo bastante corto (17,2s) para que el ojo lo lea como textura y no como una línea de tiempo. Exporta a 604x476 o más ancho para que el recorte siga siendo honesto.
- Los paneles sostienen el centro. La cuadrícula es la estructura: paneles del mismo tamaño, compuestos en Neue Montreal, dispuestos para que el ojo avance en horizontal y no en vertical. Los paneles se separan con espaciado y no con bordes, lo que mantiene la cuadrícula callada. Quita un panel antes de reducir el tamaño del tipo.
- Navegación sin fondo propio. La navegación es una sola fila, sin un segundo nivel debajo. Mantén la fila en una sola línea.
Movimiento e interacción
Movimiento horizontal continuo
Una marquesina recorre la composición en bucle infinito, compuesta en Neue Montreal. Es el único movimiento continuo fuera del medio, lo que evita que la página se sienta inquieta.
Un bucle, no una secuencia
Un clip de 17,2s es toda la capa ambiente: se reproduce detrás del texto, da la vuelta sin corte visible y nunca reacciona al puntero. El clip está silenciado y en línea, así que el primer fotograma está disponible sin ninguna interacción.
Los tiempos detrás de sección hero
Traslada el movimiento al final. El brief lo fija como transiciones de 0.1s, un bucle de 17,2s y una aparición al hacer scroll, y eso es más fácil de igualar cuando la maquetación ya está en su sitio. Nada se anima por gusto en este tipo de sección hero.
Qué se sostiene para Agencias y estudios
Cuando haces el brief de sección hero para un proyecto de agencia, lo difícil es decidir qué se niega a decir la primera pantalla. AI Designer Portfolio lo responde de antemano: una línea de display y navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas detrás. AI Designer Portfolio enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Las cifras detrás de sección hero
Una captura te dice cómo se ve la página; el brief te dice por qué. Con tipografía de 22px a 80px, pasos de espaciado de 40px, transiciones de 0.1s y easing cubic-bezier(0.4, 0, 0.2, 1) se cierra la distancia entre las dos. Nada de este tipo de sección hero depende de un valor por defecto.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de AI Designer Portfolio?
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 604x476. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Necesito React y Tailwind CSS para recrear AI Designer Portfolio?
AI Designer Portfolio 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 AI Designer Portfolio 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 604x476.
