Sobre esta plantilla
Vision Reveal es una referencia de trabajo para una agencia o un estudio: el desglose de sección hero, con la maquetación medida y lista para recrear. El titular de la propia página dice “I build compelling visual stories & motion that make ideas shine”, y la composición se construye alrededor de esas palabras exactas. El esquema de color es blanco #E4E4E4 de base, negro #111111 para la tipografía y turquesa #75C5DE para los acentos, y la página está compuesta en Inter. La ficha nombra el stack que produjo la página (Framer Motion) en lugar de esconderlo. El presupuesto de movimiento se agota en transiciones de 0.3s, cubic-bezier(0.96,-0.02,0.38,1.01) y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 16.723 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Llévate el marco de 1460x1080 y tipografía de 14px a 42px y secciones de 100vh de este diseño de sección hero antes que cualquier otra cosa.
- Este diseño de sección hero sirve a fundadores que necesitan una pantalla de prueba de que los textos de agencia aguantan 5,8s 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 Vision Reveal.
Qué incluye
- Una barra sin nada de más. La barra reúne la marca, los enlaces de la sección y un botón en #75C5DE, medida en tipografía de 14px a 42px y secciones de 100vh, así nunca acaba convertida en una segunda cabecera. Las etiquetas son lo bastante cortas para caber en una línea a 447px, y el elemento activo se marca con peso y no con una píldora.
- Un clip hace todo el trabajo. Un único recurso de 5,8s sostiene toda la primera pantalla, y la página no tiene un segundo medio que mantener sincronizado. El bucle es lo bastante corto (5,8s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Fila superior, una acción. Prueba la barra sobre tus propios medios antes de darle un fondo. La captura de la referencia es de 1460x1080.
- Los pasos de espaciado van cifrados. La maquetación se resuelve con valores fijos (tipografía de 14px a 42px, secciones de 100vh, esquinas de 9999px y pasos de espaciado de 32px), y eso es lo que mantiene compuesta la primera pantalla a cualquier ancho. El valor más pequeño y el más grande de esa lista marcan el rango en el que trabaja la composición. Mide antes de ajustar.
Movimiento e interacción
El lienzo es lo visual
Un lienzo WebGL da profundidad a la página, y la maquetación de alrededor se mantiene plana para que el render sea lo único que pide atención. Como la escena es dinámica, la maquetación se puede redimensionar sin un segundo juego de recursos. Mantén la interfaz plana alrededor.
Respeta reduced-motion
La capa de movimiento tiene un interruptor. Con prefers-reduced-motion, la entrada y el bucle se descarta y todo lo demás se queda donde está. La maquetación es idéntica con el movimiento desactivado, así que nada depende de la animación. La maquetación tiene que aguantar sin la animación.
El brief de agencia se sostiene
La mayoría de las páginas de agencia fallan por acumulación: más secciones, más degradados, más promesas. Vision Reveal va en la dirección contraria. La página lo dice sin rodeos: “I build compelling visual stories & motion that make ideas shine”. La composición se queda en blanco #E4E4E4 y deja turquesa #75C5DE para las acciones, que es suficiente para parecer deliberada. Vision Reveal enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
El orden detrás de sección hero
Si pones tu propio texto en este tipo de sección hero, la secuencia se mantiene, porque los elementos no son intercambiables: navegación, el titular, la fila de cifras y la lista de funciones cumplen una función propia. Quien busca agencia recibe la oferta antes que las opciones.
Hacer tuyo este tipo de sección hero
La composición es la parte reutilizable y el tema es tuyo. Conserva tipografía de 14px a 42px y secciones de 100vh y sustituye el texto, el material y las marcas de la firma. El marco y la escala son lo que hay que dejar en paz.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Vision Reveal?
El brief capturado ocupa 16.723 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.
¿Puedo reconstruir este diseño de sección hero de Vision Reveal con otro stack?
La referencia está construida en Framer Motion, pero la maqueta no depende de esa decisión: el espaciado, la escala tipográfica y los valores de movimiento pasan a lo que ya uses.
¿Puedo quedarme con las transiciones de Vision Reveal y cambiar los tiempos?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 0.3s usando cubic-bezier(0.96,-0.02,0.38,1.01). Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.
