Motion2D-Prompt

Flagship 2D Motion Prompt

Dieser Skill verwandelt eine lose Vorstellung in einen Prompt, bei dem das Modell standardmäßig keine wichtige Entscheidung mehr trifft: Form, Technik, Bildformat, Stilgesetz, Signaturbewegung, Timing in Frames, Beats oder Loop-Länge, Interaktion, Export, Must-Keep-Liste. Er ist ein Geschwister-Skill von threejs-world-prompt. Das Skelett ist identisch, aber im 2D-Bereich wird das „Wow“ durch Komposition, Motion-Craft und Formensprache getragen, nicht durch Kamera und Realismus.

Referenzdateien: Wann lesen

• references/forms.md: immer, sobald die Form festgelegt ist. Pflichtabschnitte für jede der 10 Formen.
• references/tech.md: immer in Runde 0. Die Form → Technik-Matrix, die Grenzen jeder Technik, Boilerplates mit festgelegten Versionen, Export und seine Konsequenzen.
• references/anatomy.md: immer vor dem Schreiben. Gemeinsame Blöcke und Stufen (Mikro / Mittel / Max / Spezifikation).
• references/craft.md: Das Motion-Craft-Glossar: Animationsprinzipien in Code, Easing und Federn, Timing in Frames, Choreografie, Übergänge, Typografie in Bewegung, Loops, Textur, Komposition. Lesen in den Runden 2–4.
• references/patterns.md: Optionale Module (Beats, Signaturbewegung, Objektkontinuität, Morphs, Ebenen-Parallaxe, Cursor als Akteur, Sound-Sync, Poster-Frame, Hygiene).
• references/examples.md: Drei synthetische Kalibrierungs-Prompts (Generativer Loop Max, Kinetische Typografie Mittel, Charakterszene Max). Lies den, der zur Form passt. Kopiere seinen Inhalt nicht.

So wird das Gespräch geführt

Übergeordnete Regel: Der Anwender hat die Vision, du hast das Wissen. Schlage konkrete Entscheidungen vor (Palette, Schriftart, Easing, Loop-Länge, Technik) und frage, ob sie passen. Frage nicht nach Dingen, die du selbst klären kannst. Jede Runde: Fasse zusammen, was entschieden ist, schlage Standardwerte vor, stelle 1–3 Fragen zu dem, was du wirklich nicht weißt. Verwende für geschlossene Auswahlen anklickbare Optionen, falls das Werkzeug verfügbar ist. „Weiter / Du entscheidest“ = die Vorschläge annehmen. Überspringe Runden, die der Anwender bereits beantwortet hat. Ziel: 2–5 Austausche vor einem Entwurf.

Runde 0: Form, Stufe, Auslieferung, Technik

• Form (forms.md): Generativer Loop / Endloses generatives Stück / Motion-Design-Film oder Erklärvideo / Kinetische Typografie / Effekt auf einer Seite oder in UI / 2D-Spielzeug oder -Instrument / Animierte Daten / Charakterszene / Mikro (Logo-Sting, Ladeanimation) / Shader-Stück. Formen können kombiniert werden; eine ist primär.
• Stufe: Mikro (~80–150 Wörter), Mittel (~350–600), Max (~1000–1800), Spezifikation (Engineering-Format).
• Auslieferung: Live-Seite / Export (MP4, WebM, GIF, PNG-Sequenz, Lottie, SVG) / beides. Lege den Export jetzt fest, da er die Technik einschränkt: Jeder Export erfordert, dass die Animation eine reine Funktion der Zeit ist, und Lottie erfordert den Aufbau aus Formen und Keyframes ab der ersten Zeile (tech.md).
• Bildformat: Vollständig responsiver Viewport / 16:9 / 9:16 / 1:1 / 4:5 / Eingebettete Komponente. Gib für den Export Auflösung und fps an.
• Technik: Schlagen Sie sie selbst aus der Matrix in tech.md vor und begründe sie in einem Satz. Frage nur, wenn der Anwender eine Einschränkung hat (Site-Stack, eine bereits im Projekt vorhandene Bibliothek).

Runde 1: Hook, Eröffnung, Kernidee

• Hook: Was bewirkt, dass jemand in der ersten Sekunde nicht weiterscrollt.
• Eröffnungsstrategie: Poster-Frame (der erste Frame ist bereits das beste Bild) / angehaltener Atem → Zündung / Anker → Wendung (z.B. eine normale Seite, die sich anders zu verhalten beginnt) / mittendrin.
• Kernidee: Ein Satz, um den sich alles dreht.

Runde 2: Stilgesetz und Lesbarkeit

Schlage selbst vor: Formensprache (geometrisch / organisch / Scherenschnitt / Tinte / Pixel / flacher Vektor / technische Zeichnung), Linie (Stärke, Enden, Wackeln), Füllungen und Textur (Körnung, Papier, Raster, Riso, Druckversatz), eine Palette von 3–6 benannten Farben mit Hex-Werten, Typografie (eine Google Fonts Schriftart, ihre Rolle, variable Schriftachsen), Komposition (Raster, Sicherheitsabstände, Hierarchie der Aufmerksamkeitspunkte, Leerraum), 3–4 Anti-Patterns und eine Lesbarkeitsregel (jeder Frame auf einen Blick lesbar; Text im Tempo der Bewegung lesbar).

Runde 3: Held, Signatur, Mechanik

• Held: Das Element oder System, das das gesamte Stück trägt (Linie, Partikel, Buchstaben, Charakter, Gitter, Fluid).
• Signaturbewegung: Eine Bewegung, an der dieses Stück wiedererkennbar ist (craft.md).
• Mechanik: Die Heldeninteraktion (Cursor, Scrollen, Klick, Ziehen, Ton) oder eine Zeitleiste mit Beats.
• Thesen-Frame: Ein Frame, der das gesamte Stück zusammenfasst, für das Poster.

Runde 4: Bewegung und Zeit

Tempo (BPM oder Sekunden pro Beat), Timing in Frames für die Schlüsselbewegungen, Easing und Federn als benannte Werte, Choreografie (Staffelung, Kaskade, Überlappung), Übergänge, Loop-Länge oder eine Shot-Liste mit Zeitcodes, ≥5 unabhängige Bewegungssysteme in Max-Formen. Wähle Module aus patterns.md.

Runde 5: Interaktion, Leistung, Barrierefreiheit, Export

Steuerelemente (minimal), prefers-reduced-motion (immer, mit einer konkreten reduzierten Version), das Leistungsbudget für die Technik, Exportdetails (Steuerung, Format, Auflösung, fps, Länge, Nahtlosigkeit), die Must-Keep-Liste. Prompt-Sprache: standardmäßig Englisch.

Den Prompt schreiben

1. Skelett: Die gemeinsamen Blöcke aus anatomy.md + die Abschnitte der Form aus forms.md + der Technik-Boilerplate aus tech.md + Module aus patterns.md. ####-Überschriften benennen die Idee.
2. Imperativer Modus, dicht. Beschreibe Bewegung mit Zahlen: Frames, Millisekunden, Kurven (cubic-bezier(.2,.8,.2,1)), Federn (Steifigkeit/Dämpfung), Staffelung in ms, BPM. Farben als Hex, Schriftarten mit Namen.
3. Die Stufen Max und Spezifikation enden mit einem Abnahmekriterien-Absatz, dann einem Satz: „In einem Satz: …“.
4. Führe die Checkliste aus, korrigiere, liefere in einem Code-Block aus (oder als .md-Datei, wenn lang oder auf Wunsch). Darunter 2–3 Sätze über die im Namen des Anwenders getroffenen Entscheidungen.

Checkliste vor Auslieferung

• Erster Satz: Form + Technik + ein Heldenbild mit 4–6 konkreten Details in Bewegung.
• „Baue nicht …“ (3–4 2D-Anti-Patterns, z.B. Stock-Motion-Vorlage, PowerPoint-Einblendung, Konfetti-Bildschirmschoner, Clip-Art) und eine „Baue …“-Umformulierung; „Kernidee:“.
• Technik benannt und begründet, Boilerplate mit festgelegten Versionen aus tech.md.
• Bildformat, Auflösung und fps (falls Export), Verhalten bei Größenänderung.
• Eröffnung entspricht der Strategie; Poster-Frame- und Erste-Sekunde-Test.
• Stilgesetz: Form, Linie, Textur, Palette mit Hex-Werten, Schriftart mit ihrer Rolle.
• Lesbarkeitsregel, einschließlich des Lesetempos von Text in Bewegung.
• Signaturbewegung mit Zahlen beschrieben; Easing und Timing als benannte Werte.
• Loop: Länge in Frames und die Nahtlosigkeitsregel; Film: Shot-Liste mit Zeitcodes und Beats.
• ≥5 unabhängige Bewegungssysteme (Max); Frozen-Frame-Test.
• Jedes erwähnte Feature ist sichtbar, in Bewegung oder betrachtbar.
• Scope-Creep-Verbote; Tonkalibrierung, wenn das Thema heikel ist.
• prefers-reduced-motion mit einer konkreten reduzierten Version.
• Export (falls vorhanden): Animation als reine Funktion der Zeit, Frame-für-Frame-Rendering, Format, Steuerung; Lottie nur in der kompatiblen Teilmenge.
• Leistung: Das Budget der Technik, DPR ≤ 2, Pause außerhalb des Bildschirms, Must-Keep-Liste („… wird niemals weggehandelt“).
• Abnahmekriterien (Max/Spezifikation) und „In einem Satz: …“.
• Die von der Form geforderten Abschnitte sind vorhanden; die Länge liegt im Bereich der Stufe.

Grenzen

• Formulierungen aus den Beispielphrasen in den Referenzdateien und in examples.md gehen niemals unverändert in den Prompt ein. Nimm die Struktur und die Entscheidungen und schreibe jeden Satz in eigenen Worten, einschließlich technischer Formeln und des Abnahmekriterien-Absatzes.
• Keine bekannten Figuren, Maskottchen, Logos oder urheberrechtlich geschützte Projekte, einschließlich „im Stil von“ einer bestimmten Figur. Der Stil einer Bewegung oder Epoche (Bauhaus, Ukiyo-e, Schweizer, mittelalterliche Scherenschnittformen als allgemeine Sprache) ist in Ordnung; schlage originelle Figuren und Markierungen vor.
• Schriftarten nur von Google Fonts oder Systemschriftarten, es sei denn, der Anwender liefert eigene.
• Der Prompt muss in einem Browser ausführbar sein. Wenn die Vision die Grenzen der Technik überschreitet (z. B. eine Million Vektorformen in SVG), ändere die Technik oder den Trick und benenne sie im Prompt.