Sobre esta plantilla
Subscription Agency resuelve el problema de cada sección hero de una agencia o un estudio con un solo brief capturado. El esquema de color es #FFFFFF de base, #0A0A0A para la tipografía y verde #17C964 para los acentos, 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. La página reduce el movimiento a transiciones de 0.4s y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 6.172 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Cita un marco de 1476x1080 en la nota de traspaso para que la siguiente implementación no tenga que volver a deducir nada de la página.
- Si hay que renunciar al movimiento, el diseño de sección hero sigue leyéndose porque un tamaño de display fijo de 82px y pasos de espaciado de 14px se encargan de la jerarquía.
- Profesionales del marketing de producto que necesitan que cada sección hero siga leyéndose con 6,3s de vídeo en bucle detrás del texto.
Qué incluye
- La navegación es fina a propósito. La barra es la parte más callada de la composición: marca, una fila corta de enlaces y una acción en #17C964, todo al paso de tipo más pequeño del brief. Los enlaces se componen a un tamaño menor que la marca, y la acción en #17C964 es el único elemento de la barra con peso.
- El brief nombra los pasos. El brief nombra las cifras: un tamaño de display fijo de 82px, pasos de espaciado de 14px y transiciones de 0.4s. Por eso la composición se sostiene, porque no hay ningún paso de espaciado inventado entre el tipo y el marco. El espaciado se cita en las mismas unidades que el tipo, de modo que ambos se comparan directamente. Sustituye la tipografía o el texto, no la escala.
- Clip sin márgenes tras el tipo. El brief especifica el vídeo a 1476x1080 con un bucle de 6,3s, y cada elemento de texto se coloca contra ese marco. El bucle es lo bastante corto (6,3s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Navegación contenida en una fila. Si tu propia página tiene más secciones, agrúpalas en lugar de ensanchar la barra. La captura de la referencia es de 1476x1080.
Movimiento e interacción
Un bucle, no una secuencia
El movimiento ambiente es un clip de 6,3s en 1476x1080, en bucle discreto detrás del texto y sin reaccionar al puntero. Nada más en la página se anima de forma continua, así que el medio es lo único que pide atención.
Una duración para los controles
Una sola duración cubre las interacciones (0.4s), y eso hace que hover y pulsación se lean como un mismo sistema. El easing se especifica junto a la duración (0.4s), así que una reconstrucción no puede colar otra sensación sin avisar.
Leer Subscription Agency como especificación
Una reconstrucción suele empezar con una captura y una suposición. Aquí empieza con 6.172 caracteres de especificación: el marco, el espaciado y el movimiento están escritos antes de la primera línea de código. Nada de este tipo de sección hero depende de un valor por defecto.
Cómo ordena Subscription Agency la primera lectura
La página tiene un orden deliberado. La navegación presenta el producto y le da al visitante que vuelve una forma de moverse que ya reconoce. El titular ocupa el tamaño de display, la línea de apoyo explica la oferta y el acento verde #17C964 marca la acción principal, así que el siguiente paso nunca está en duda. Nada más compite: no hay una cuadrícula de tarjetas antes de la primera decisión, y eso es lo que evita que este tipo de sección hero resulte pesado en un trabajo de agencia. Quien busca agencia recibe la oferta antes que las opciones.
Qué se mueve en Subscription Agency
Copia el patrón y no los valores: quédate con transiciones de 0.4s, un bucle de 6,3s y estados hover y pulsados y deja que tu marca fije las duraciones. Nada se anima por gusto en este tipo de sección hero.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Subscription Agency?
El brief capturado ocupa 6.172 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 Subscription Agency con otro stack?
Subscription Agency 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 Subscription Agency?
Las entradas y los cambios de estado se quedan en 0.4s. Los dispara un cambio de estado, no una biblioteca de scroll, y nunca retrasan el contenido.
