Sobre esta plantilla
Velorah resuelve el problema de cada sección hero de una agencia o un estudio con un solo brief capturado. El titular de la propia página dice “Where dreams rise through the silence”, y la composición se construye alrededor de esas palabras exactas. El esquema de color es turquesa #01405F de base y amarillo #D9BF63 para la tipografía, y la página está compuesta en Inter. El montaje es React y Tailwind CSS; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. El brief gasta su presupuesto de movimiento en transiciones de 0.8s. Tenlo abierto mientras escribes: el brief de 3.788 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Los fundadores que le pasen el brief a una agencia usarán el marco de 800x589 como prueba de aceptación de la primera ronda.
- 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 Velorah.
- Los responsables de contenidos que tengan que encajar un titular más largo usarán el número de líneas de Inter como límite, no el de caracteres.
Qué incluye
- Los enlaces colapsan a un ancho. 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. La fila se dimensiona a partir de su propia tipografía, no de una altura de cabecera fija.
- Una escala para tipo y marco. Los tamaños se citan, no se heredan: pasos de espaciado de 90px y transiciones de 0.8s. Cambia la tipografía o el texto y esas relaciones se mantienen. Como los valores son fijos, una sustitución cambia el aspecto sin cambiar el ritmo.
- Primero el texto, después el adorno. La composición está completa en 800x589: el texto, los medios y los controles están nombrados en el brief. La página es una sola composición a 800x589, y por eso se sostiene cuando cambia el texto.
- Navegación contenida en una fila. La marca ocupa el borde izquierdo y los enlaces corren a su derecha, todo compuesto en Inter, para que la barra pertenezca a la página de abajo y no a un sistema aparte. Prueba la barra sobre tus propios medios antes de darle un fondo.
Movimiento e interacción
Interacción contenida y local
La página solo responde donde se puede actuar: estados hover en los botones y los enlaces y no en todas las tarjetas. La respuesta se limita a los controles, así que la composición se queda quieta a su alrededor. Mantén pequeña la capa interactiva.
Todo el presupuesto de animación
Una sola duración cubre las interacciones (0.8s), y eso hace que hover y pulsación se lean como un mismo sistema. El easing se especifica junto a la duración (0.8s), así que una reconstrucción no puede colar otra sensación sin avisar.
Leer Velorah como especificación
No se puede ajustar una composición a ojo cuando la reconstruyen dos personas. El brief elimina la discusión y lo deja por escrito una sola vez: pasos de espaciado de 90px y transiciones de 0.8s. Nada de este tipo de sección hero depende de un valor por defecto.
Cómo ordena Velorah la primera lectura
Si tu página abre hoy con funciones, este es el orden que hay que copiar: navegación, la fila de cifras y el clip de fondo delante, el detalle de apoyo después y pasos de espaciado de 90px y transiciones de 0.8s marcando la distancia. Quien busca agencia recibe la oferta antes que las opciones.
Qué se mueve en Velorah
Los tiempos son explícitos: transiciones de 0.8s y estados hover y pulsados, todo escrito en el brief y no ajustado a ojo. Nada se anima por gusto en este tipo de sección hero.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Velorah?
El brief capturado ocupa 3.788 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 Velorah?
Velorah 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 Velorah?
Las entradas y los cambios de estado se quedan en 0.8s. Los dispara un cambio de estado, no una biblioteca de scroll, y nunca retrasan el contenido.
