motion2d-prompt

Prompt de animación 2D insignia

Este skill convierte una visión vaga en un prompt tras el cual el modelo no toma ninguna decisión importante por defecto: forma, técnica, marco y formato, ley de estilo, movimiento característico, temporización en fotogramas, compases o longitud de bucle, interacción, exportación, lista de elementos obligatorios. Es hermano de threejs-world-prompt. El esqueleto es el mismo, pero en 2D el "impacto" lo llevan la composición, la artesanía del movimiento y el lenguaje de las formas, no la cámara ni el realismo.

Archivos de referencia: cuándo leerlos

• references/forms.md: siempre, una vez que la forma esté definida. Secciones obligatorias para cada una de las 10 formas.
• references/tech.md: siempre en la ronda 0. La matriz forma → técnica, los límites de cada técnica, plantillas con versiones fijas, exportación y sus consecuencias.
• references/anatomy.md: siempre antes de escribir. Bloques compartidos y niveles (micro / medio / máximo / especificación).
• references/craft.md: el glosario de artesanía del movimiento: principios de animación en código, easing y muelles, temporización en fotogramas, coreografía, transiciones, tipografía en movimiento, bucles, textura, composición. Leer en rondas 2–4.
• references/patterns.md: módulos opcionales (compases, movimiento característico, continuidad de objetos, morphs, paralaje de capas, cursor como actor, sincronización de sonido, fotograma póster, higiene).
• references/examples.md: tres prompts de calibración sintéticos (bucle generativo máximo, tipografía cinética media, escena de personaje máxima). Leer el que coincida con la forma. No copiar su contenido.

Cómo llevar la conversación

Regla fundamental: el usuario tiene la visión, tú tienes el conocimiento. Propón decisiones concretas (paleta, tipografía, easing, longitud de bucle, técnica) y pregunta si encajan. No preguntes sobre lo que puedas decidir tú mismo. Cada ronda: resume lo que está decidido, propón valores por defecto, haz 1–3 preguntas sobre lo que realmente no sabes. Para opciones cerradas usa opciones cliqueables si la herramienta lo permite. "Siguiente / tú eliges" = aceptar las propuestas. Salta rondas que el usuario ya haya respondido. Objetivo: 2–5 intercambios antes de un borrador.

Ronda 0: Forma, nivel, entrega, técnica

• Forma (forms.md): bucle generativo / pieza generativa infinita / película o explicación de motion design / tipografía cinética / efecto en una página o en la UI / juguete o instrumento 2D / datos animados / escena de personaje / micro (sting de logo, cargador) / pieza de shader. Las formas se pueden combinar; una es principal.
• Nivel: micro (~80–150 palabras), medio (~350–600), máximo (~1000–1800), especificación (formato de ingeniería).
• Entrega: página en vivo / exportación (MP4, WebM, GIF, secuencia PNG, Lottie, SVG) / ambas. Decide la exportación ahora, porque limita la técnica: cada exportación requiere que la animación sea una función pura del tiempo, y Lottie requiere construir a partir de formas y fotogramas clave desde la primera línea (tech.md).
• Formato de marco: viewport responsive completo / 16:9 / 9:16 / 1:1 / 4:5 / componente incrustado. Para exportación, indica resolución y fps.
• Técnica: propónla tú mismo a partir de la matriz en tech.md y justifícala en una frase. Pregunta solo cuando el usuario tenga una restricción (stack del sitio, una librería ya en el proyecto).

Ronda 1: Gancho, apertura, idea central

• Gancho: qué hace que alguien no se desplace en el primer segundo.
• Estrategia de apertura: fotograma póster (el primer fotograma ya es la mejor imagen) / respiración contenida → ignición / ancla → giro (ej. una página normal que empieza a comportarse de manera diferente) / in medias res.
• Idea central: una frase en torno a la cual gira todo.

Ronda 2: Ley de estilo y legibilidad

Propón tú mismo: lenguaje de formas (geométrico / orgánico / papel recortado / tinta / píxel / vector plano / dibujo técnico), línea (grosor, remates, bamboleo), rellenos y textura (grano, papel, semitono, risografía, desregistro de impresión), una paleta de 3–6 colores nombrados con valores hexadecimales, tipografía (una tipografía de Google Fonts, su función, ejes de fuente variable), composición (cuadrícula, márgenes seguros, jerarquía de puntos de atención, espacio vacío), 3–4 antipatrones, y una regla de legibilidad (cada fotograma legible de un vistazo; texto legible al ritmo del movimiento).

Ronda 3: Héroe, firma, mecánica

• Héroe: el elemento o sistema que lleva toda la pieza (línea, partículas, letras, personaje, cuadrícula, fluido).
• Movimiento característico: un movimiento por el que esta pieza pueda ser reconocida (craft.md).
• Mecánica: la interacción del héroe (cursor, desplazamiento, clic, arrastre, sonido) o una línea de tiempo con compases.
• Fotograma tesis: un fotograma que resume toda la pieza, para el póster.

Ronda 4: Movimiento y tiempo

Tempo (BPM o segundos por compás), temporización en fotogramas para los movimientos clave, easing y muelles como valores nombrados, coreografía (escalonamiento, cascada, solapamiento), transiciones, longitud de bucle o una lista de planos con códigos de tiempo, ≥5 sistemas de movimiento independientes en formas máximas. Elige módulos de patterns.md.

Ronda 5: Interacción, rendimiento, accesibilidad, exportación

Controles (mínimos), prefers-reduced-motion (siempre, con una versión reducida concreta), el presupuesto de rendimiento para la técnica, detalles de exportación (control, formato, resolución, fps, duración, transparencia), la lista de elementos obligatorios. Idioma del prompt: inglés por defecto.

Escribir el prompt

1. Esqueleto: los bloques compartidos de anatomy.md + las secciones de la forma de forms.md + la plantilla de la técnica de tech.md + módulos de patterns.md. Los encabezados #### nombran la idea.
2. Modo imperativo, denso. Describe el movimiento con números: fotogramas, milisegundos, curvas (cubic-bezier(.2,.8,.2,1)), muelles (rigidez/amortiguamiento), escalonamiento en ms, BPM. Colores como hex, tipografías por nombre.
3. Los niveles máximo y especificación terminan con un párrafo de barra de aceptación, luego una frase "En una frase: …".
4. Ejecuta la lista de verificación, corrige, entrega en un bloque de código (o como archivo .md si es largo o a petición). Debajo, 2–3 frases sobre las decisiones tomadas en nombre del usuario.

Lista de verificación antes de la entrega

• Primera frase: forma + técnica + una imagen heroica con 4–6 detalles concretos en movimiento.
• "No construyas…" (3–4 antipatrones 2D, ej. plantilla de motion stock, fundido de PowerPoint, salvapantallas de confeti, clip-art) y un replanteamiento "Construye…"; "Idea central:".
• Técnica nombrada y justificada, plantilla con versiones fijas de tech.md.
• Formato de marco, resolución y fps (si se exporta), comportamiento al redimensionar.
• La apertura coincide con la estrategia; prueba del fotograma póster y del primer segundo.
• Ley de estilo: forma, línea, textura, paleta con valores hex, tipografía con su función.
• Regla de legibilidad, incluido el ritmo de lectura del texto en movimiento.
• Movimiento característico descrito con números; easing y temporización como valores nombrados.
• Bucle: longitud en fotogramas y la regla de transparencia; película: lista de planos con códigos de tiempo y compases.
• ≥5 sistemas de movimiento independientes (máximo); prueba del fotograma congelado.
• Cada característica mencionada es visible, se mueve o se ve.
• Prohibiciones de aumento de alcance; calibración del tono si el tema es delicado.
• prefers-reduced-motion con una versión reducida concreta.
• Exportación (si la hay): animación como función pura del tiempo, renderizado fotograma a fotograma, formato, control; Lottie solo en el subconjunto compatible.
• Rendimiento: el presupuesto de la técnica, DPR ≤ 2, pausa fuera de pantalla, lista de elementos obligatorios ("… nunca se intercambia").
• Barra de aceptación (máximo/especificación) y "En una frase: …".
• Las secciones requeridas por la forma están presentes; la longitud dentro del rango del nivel.

Límites

• El texto de las frases de ejemplo en los archivos de referencia y en examples.md nunca entra en el prompt tal cual. Toma la estructura y las decisiones, y escribe cada frase con tus propias palabras, incluidas las fórmulas técnicas y el párrafo de criterios de aceptación.
• No hay personajes conocidos, mascotas, logotipos o proyectos protegidos por derechos de autor reconocibles, incluido "al estilo de" un personaje específico. El estilo de un movimiento o época (Bauhaus, ukiyo-e, suizo, formas de papel recortado de mediados de siglo como lenguaje general) está bien; propón personajes y marcas originales.
• Fuentes solo de Google Fonts o fuentes del sistema, a menos que el usuario proporcione las suyas propias.
• El prompt debe ser ejecutable en un navegador. Si la visión excede el límite de la técnica (ej. un millón de formas vectoriales en SVG), cambia la técnica o el truco y nómbralo en el prompt.