Sobre esta plantilla
Antes de rehacer cada landing page para una marca de 3D, videojuegos o entretenimiento, lee Cast and Render: la composición y la especificación que hay detrás están aquí. El esquema de color es neutro #F2F0EC de base y casi negro #0A0908 para la tipografía, y la página está compuesta en Inter. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1920x1432 antes de escribir código. El presupuesto de movimiento se agota en transiciones de 3s, cubic-bezier(.22.61.36,1) y un vídeo en bucle de fondo. Sirve de referencia cuando construyas este tipo de landing page para una marca de 3D, videojuegos o entretenimiento y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Este diseño de landing page va dirigido a equipos que ya conocen un único archivo HTML autocontenido y solo necesitan dejar easing cubic-bezier(.22.61.36,1) por escrito.
- Quien usa un generador con IA y quiere un brief que ya incluya un único archivo HTML autocontenido en vez de dejarlo todo al modelo.
- Equipos que construyen su landing page de una marca de 3D, videojuegos o entretenimiento y necesitan dejar constancia de un breakpoint de 280px antes de que salga un presupuesto.
Qué incluye
- Fila superior, una acción. 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. Las etiquetas son lo bastante cortas para caber en una línea a 280px, y el elemento activo se marca con peso y no con una píldora.
- Un clip hace todo el trabajo. Los medios hacen trabajo atmosférico y no narrativo: un bucle de 4,9s a 1920x1432 detrás de todo lo demás. El bucle es lo bastante corto (4,9s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Fluido donde hace falta. Lo alto de la escala es fluido (un clamp entre 12px y 15px) y el resto es fijo, así el marco se mantiene compuesto a medida que se estrecha el viewport. El tipo cambia de tamaño, no de papel, a medida que se estrecha el viewport. Conserva la jerarquía; cambia la escala.
- Columnas, no un vertedero de enlaces. Los enlaces se agrupan en columnas y la marca ocupa su propio bloque, lo que mantiene legible un pie de página largo en lugar de convertirlo en una lista. El acento se reutiliza en una sola acción del pie de página y no en toda la banda. Reserva el acento para una sola acción.
Movimiento e interacción
Una duración para los controles
El movimiento de los controles es corto y repetible: 3s en cada cambio de estado. El easing se especifica junto a la duración (3s), así que una reconstrucción no puede colar otra sensación sin avisar.
El bucle hace el trabajo ambiente
El movimiento ambiente es un clip de 4,9s en 1920x1432, en bucle discreto detrás del texto y sin reaccionar al puntero. Un fotograma de portada hace de suplente cuando la reproducción automática está bloqueada, así que el movimiento suma y no es obligatorio.
Leer Cast and Render como especificación
Una reconstrucción suele empezar con una captura y una suposición. Aquí empieza con 18.074 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 landing page depende de un valor por defecto.
El orden detrás de landing page
Donde una página de marketing apila pruebas por debajo y cruza los dedos, este tipo de landing page pone navegación, la insignia de anuncio, la fila de cifras, la lista de funciones y la cuenta atrás delante de quien lee y retiene el resto. Quien busca 3D recibe la oferta antes que las opciones.
El argumento de landing page
Una capa de tinte sobre el material habría sido la solución fácil. El brief la deja fuera. El medio es un bucle de 4,9s en 1920x1432. El texto aguanta igual porque tipografía de 12px a 15px y secciones de 560vh mantienen el marco tranquilo. Cast and Render enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Por qué la ficha nombra un único archivo HTML autocontenido?
Cast and Render se construyó en un único archivo HTML autocontenido, 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.
¿Cómo está organizada esta ficha de Cast and Render?
Todo lo que se cita en la página procede del brief capturado de 18.074 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Qué contiene en realidad el brief que hay detrás de Cast and Render?
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 1920x1432. En ningún punto la imagen renderizada funciona como fuente de la verdad.
