Sobre esta plantilla

Playful Idea es un caso de pie de página de agencia: nace de un único brief escrito y esta página lo documenta. El color se limita a #F0EEFA de base y casi negro #080909 para la tipografía y la página se compone en Epilogue. Se entrega como un único archivo HTML autocontenido, y la captura se fija a 1564x1080 antes de escribir código. El movimiento se queda en transiciones de 2.54167s y un vídeo en bucle de fondo. Es más útil cuando cada pie de página de Agencias y estudios tiene que sobrevivir a un cambio de texto sin rediseño.

Pensado para

  • Pensado para estudios que tienen que explicar a un cliente el comportamiento a 700px sin construir antes un prototipo.
  • Escribe tu propio titular y luego rehace este diseño de pie de página en un único archivo HTML autocontenido con las medidas intactas.
  • La página sirve a desarrolladores front-end que rehacen su pie de página de una agencia o un estudio en un único archivo HTML autocontenido y buscan los números que hay detrás del aspecto.

Qué incluye

  • Enlaces antes de la acción. La barra es una fila de texto y una acción, medida en tipografía de 14px a 17px y secciones de 100vh, así que se lee como franja y no como banda. Las etiquetas son lo bastante cortas para caber en una línea a 700px, y el elemento activo se marca con peso y no con una píldora.
  • Medios detrás del texto. El marco de 1564x1080 lo llena un solo bucle que se reproduce detrás del texto y no pide controles. Exporta a 1564x1080 o más ancho y el recorte de cobertura sigue funcionando.
  • Insignia sobre el pliegue. Una insignia, un mensaje: la píldora se sitúa sobre el titular en Epilogue al paso más pequeño, y nada más compite por ese hueco. Solo hay un anuncio, y eso es lo que hace que la insignia se sienta como una novedad.
  • Fila superior, una acción. Por debajo de 700px los enlaces colapsan en lugar de saltar a una segunda línea.

Movimiento e interacción

El lienzo es lo visual

La primera pantalla la construye el navegador y no llega como imagen: un lienzo WebGL. La escena se dibuja al tamaño de su contenedor, así que no depende de una resolución de render fija.

Audio desactivado por defecto

Hay audio disponible para la composición de 1564x1080, pero nunca es automático. Como es opcional, la página sigue siendo usable en un espacio compartido.

Las cifras detrás de pie de página

Donde un moodboard deja la escala abierta, este brief la cierra: tipografía de 14px a 17px y secciones de 100vh, con los valores de alrededor derivados de esa decisión. Nada de este tipo de pie de página depende de un valor por defecto.

Qué cambiar primero en Playful Idea

La composición es la parte reutilizable y el tema es tuyo. Conserva tipografía de 14px a 17px y secciones de 100vh y sustituye el texto, el material y las marcas de la firma. Conserva el marco y la escala; el tema es la parte que debe cambiar.

El orden detrás de pie de página

Aquí nada compite con la primera decisión. El material de apoyo espera por debajo, y navegación, el titular, la insignia de anuncio, la fila de cifras y el clip de fondo se bastan para sostener la parte alta de la página. Quien busca agencia recibe la oferta antes que las opciones.

Preguntas frecuentes

¿Cuánto de Playful Idea depende de un único archivo HTML autocontenido?

Playful Idea 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.

¿El brief de Playful Idea es lo mismo que el prompt que escribiría yo?

Todo lo que se cita en la página procede del brief capturado de 30.665 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.

¿Cuánto ocupa el prompt que hay detrás de Playful Idea?

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 1564x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.

Créalo en Studio

Empieza por la referencia y adapta el contenido y los detalles visuales en Studio.