Sobre esta plantilla
3D Collectible Hero es una referencia de trabajo para una marca de 3D, videojuegos o entretenimiento: el desglose de sección hero, con la maquetación medida y lista para recrear. La paleta se queda en verde apagado #85CC92 de base y rojo #F4845F para los acentos, y el tipo es Anton. El montaje es React y Tailwind CSS; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. El movimiento se limita a transiciones de 650ms y cubic-bezier(0.4,0,0.2,1). Es más útil cuando cada sección hero de 3D y videojuegos tiene que sobrevivir a un cambio de texto sin rediseño.
Pensado para
- Los desarrolladores que necesiten que el diseño de sección hero aguante una conexión lenta usarán 640x470 y la escala tipográfica como presupuesto de peso.
- Los responsables de marketing que hereden un diseño de sección hero usarán un tamaño de display fijo de 22px y secciones de 100vh para comprobar que una reescritura mantuvo la escala.
- Pensado para un fundador en solitario que saca un único diseño de sección hero para una marca de 3D, videojuegos o entretenimiento y no tiene ningún sistema de diseño detrás.
Qué incluye
- Una barra de navegación que no estorba. La barra reúne la marca, los enlaces de la sección y un botón en #F4845F, medida en un tamaño de display fijo de 22px y secciones de 100vh, así nunca acaba convertida en una segunda cabecera. Los enlaces se componen a un tamaño menor que la marca, y la acción en #F4845F es el único elemento de la barra con peso.
- Los enlaces colapsan a un ancho. Mantén el número de enlaces en cuatro o cinco; la fila está dimensionada para eso. La captura de la referencia es de 640x470.
- Todas las medidas están escritas. La maquetación trabaja con valores absolutos y no con proporciones: un tamaño de display fijo de 22px, secciones de 100vh, pasos de espaciado de 200px y transiciones de 650ms. El brief declara valores y no proporciones, así la composición conserva sus relaciones cuando el texto cambia de longitud.
- Pesos nombrados por papel. Las fuentes tienen papeles asignados y no se mezclan: Anton sostiene a la vez la línea display y la interfaz. El interletraje se cierra a medida que crece el tamaño, y por eso la línea display se sostiene a lo largo de 22px.
Movimiento e interacción
El tiempo va en el brief
Cada cambio de estado de la especificación lleva una duración: las transiciones se resuelven en torno a 650ms usando cubic-bezier(0.4,0,0.2,1). Nada queda en el valor por defecto del navegador, y por eso la página se siente diseñada y no animada. El tiempo citado cubre los cambios de estado, así que la respuesta es la parte especificada del movimiento.
La superficie tiene grano
El brief añade grano de película sobre la composición de 640x470, así que la superficie se lee como material y no como relleno sólido. Como es una sola superposición, portarlo no cuesta casi nada.
Qué se mueve en 3D Collectible Hero
Copia el patrón y no los valores: quédate con transiciones de 650ms, estados hover y pulsados y una capa de grano y deja que tu marca fije las duraciones. Nada se anima por gusto en este tipo de sección hero.
El acierto de sección hero
La razón de que esto funcione para una marca de 3D, videojuegos o entretenimiento es que nunca pide al lector que arme el mensaje. La maquetación, el tipo y el color están decididos (verde apagado #85CC92 y rojo #F4845F, compuestos en Anton), así que la primera pantalla se lee como un argumento cerrado y no como un montón de piezas. Da a quien lee páginas de 3D el camino más corto y honesto hasta la oferta.
El reflujo de sección hero
El brief describe qué cambia en cada ancho (la escala es fluida en lugar de escalonada y la sección se mantiene a 100vh), así que la versión móvil es una decisión y no un ajuste forzado. El contraste se mantiene en el acento #F4845F sobre el medio, y el vídeo va silenciado y en línea. La versión de móvil es una decisión, no un recurso de emergencia.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de 3D Collectible Hero?
El brief capturado ocupa 5.347 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.
¿Por qué no se imprime aquí el prompt de 3D Collectible Hero?
Todo lo que se cita en la página procede del brief capturado de 5.347 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Necesito React y Tailwind CSS para recrear 3D Collectible Hero?
3D Collectible Hero 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.
