Sobre esta plantilla
Antes de rehacer cada landing page para una agencia o un estudio, lee 3D Character Studio: la composición y la especificación que hay detrás están aquí. El titular de la propia página dice “Glad you stopped in. Good taste tends to find us. Now, what are we building?”, y la composición se construye alrededor de esas palabras exactas. La paleta es rojo #800014 de base y rojo brillante #E12444 para los acentos, con la tipografía HelveticaNowDisplay-Medium. Se entrega como React y Tailwind CSS, y la captura se fija a 1740x1080 antes de escribir código. Todo el movimiento cabe en transiciones de 38ms y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 5.726 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Este diseño de landing page responde a quien construye y quiere saber qué controlan realmente tipografía de 13px a 32px y pasos de espaciado de 26px en la maquetación.
- Profesionales del marketing de producto que necesitan que cada landing page siga leyéndose con 6,6s de vídeo en bucle detrás del texto.
- Pensado para responsables de contenidos que reescriben un diseño de landing page cuyo titular tiene que seguir siendo tan largo como el de 3D Character Studio.
Qué incluye
- Fila superior, una acción. La fila superior reúne la marca, cuatro o cinco enlaces y una sola acción teñida de #E12444, dimensionada para no destacar frente al resto de la página. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. Los enlaces se componen a un tamaño menor que la marca, y la acción en #E12444 es el único elemento de la barra con peso. Mantén el número de enlaces en cuatro o cinco; la fila está dimensionada para eso.
- Tamaños fijados en el brief. Los tamaños se leyeron del render en 1740x1080: tipografía de 13px a 32px, pasos de espaciado de 26px y transiciones de 38ms. 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.
- Una barra sin nada de más. Los enlaces van en una sola línea y a un único tamaño, y la acción #E12444 cierra la fila por la derecha, de modo que el ojo termina donde acaba la navegación.
- Todas las medidas están escritas. El espaciado se cita igual (tipografía de 13px a 32px, pasos de espaciado de 26px y transiciones de 38ms), no como una escala que crece sola.
Movimiento e interacción
Duraciones del brief
El hover, la pulsación y el foco se resuelven en 38ms, que es lo que hace que la interfaz se sienta inmediata. Como los valores son cortos, una reconstrucción que los alargue se nota de inmediato.
Movimiento ambiente sin librería de scroll
El movimiento ambiente viene del bucle de 6,6s en 1740x1080 y no de efectos de scroll, lo que mantiene la página tranquila y el texto legible. Un fotograma de portada hace de suplente cuando la reproducción automática está bloqueada, así que el movimiento suma y no es obligatorio.
El orden detrás de landing page
Comprometerse con un solo recorrido de lectura cierra los demás. El brief lo acepta, fija navegación, la insignia de anuncio, la fila de cifras y el clip de fondo en su sitio y gasta tipografía de 13px a 32px y pasos de espaciado de 26px en hacer obvio el camino. Quien busca agencia recibe la oferta antes que las opciones.
Leer 3D Character Studio como especificación
Esto es lo que hace reutilizable la referencia: tipografía de 13px a 32px, pasos de espaciado de 26px y transiciones de 38ms. Nada queda en un valor por defecto, así que una sustitución que conserve esos números conserva la composición. Nada de este tipo de landing page depende de un valor por defecto.
Qué se mueve en 3D Character Studio
Podrías soltar una librería de presets sobre esta composición y quedaría más cargada, no mejor. El brief se queda con transiciones de 38ms, un bucle de 6,6s y un efecto máquina de escribir y gasta ahí el presupuesto. Nada se anima por gusto en este tipo de landing page.
Preguntas frecuentes
¿El prompt de 3D Character Studio es una especificación cerrada o un punto de partida?
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 1740x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo reconstruir este diseño de landing page de 3D Character Studio con otro stack?
3D Character Studio 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 3D Character Studio?
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 1740x1080.
